HTML:表单

案例:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>报名表</title>
</head>
<body><form action="demo/welcome.php" method="post">名字:<input type="text" name="name"><br><br>邮箱:<input type="text" name="email"><br><br><button type="submit">提交</button></form>
</body>
</html>

一、form标签

<form> 标签用于为用户输入创建 HTML 表单。可以包含input、select等标签。

属性描述
methodget/post规定发送数据的HTTP方法。
actionURL表单向何处发送数据。

拓展资料:

POST和GET的区别:

1.用法不同:

        GET请求:从指定的资源请求数据,用于获取数据,一般用于搜索排序和筛选之类的操作。

        POST请求:向指定的资源提交要被处理的数据,用于将数据发送给服务器。

2.安全程度:

        GET 请求:它的数据附加在 URL 上,因此对所有人都是可见的,这可能会引起安全问题,特别是当传输敏感数据时。

        POST 请求:其数据在请求体内,对用户不可见,更适合传输敏感信息。

3.大小限制:

        GET 请求:有URL长度限制,只能发送小数据量。

        POST 请求:数据大小限制小,适合发送大数据量。

4.缓存和历史记录:

        GET 请求:会存在在缓存和历史记录中。

        POST 请求:不会存在在缓存和历史记录中。

二、input标签

<input>输入字段,根据type的变化有多种类型,无闭合标签。

属性描述
type

text文本框、password密码、radio单选框、checkbox复选框、submit提交按钮、reset重置按钮

data日期,datetime-local详细时间

根据type不同的取值有不同的类型。
checkedchecked与复选框和单选框搭配表示默认选定该项。
sizenumber表示文本框的宽度。
valuetext表示输入框默认值。
maxlengthnumber表示文本框最大输入字符数。

<lable>标签:它的for属性可与单选框和复选框搭配使用,用来扩大其选中范围。只要保持for的值与复选框或单选框的id值相等即可。

实例:

<form action="" method="post"><input id="跑步" type="checkbox"><label for="跑步">跑步</label>
</form>

效果:

 

<button>标签:代表自定义按钮,要编写JavaScript脚本函数且用onclick链接。 

三、textarea标签

textarea标签:代表多行文本输入框可以用cols和rows指定列数和行数。

实例:

<form action="" method="post"><textarea cols="15" rows="10"></textarea>
</form>

效果:

 

四、select标签

<select>标签:用来制作下拉列表,内含option标签,有多少个选项就有多少个option标签,其次option标签含selected表示默认被选中。

属性描述
sizenumber指定下拉列表最大可见项数目。
autofocusautofocus指定在页面加载后文本区域自动获得焦点。
multiplemultiple指定该下拉列表支持多个选项,可多选。

实例:

<form action="" method="post"><select multiple="multiple" size="1"><option >hello</option><option >world</option><option >11111</option></select>
</form>

效果: 

 

五、fieldset 标签

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段,可以与legend标签搭配使用。当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。

<legend>标签用于为fieldset标签添加说明文字。

注意:legend 元素必须是 fieldset 元素的第一个子元素。

 实例:

<fieldset><legend>健康信息</legend>身高:<input type="text" />体重:<input type="text" />
</fieldset>

 效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/796748.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【经典算法】LeetCode25:K 个一组翻转链表(Java/C/Python3,Hard)

#算法 目录 题目描述思路及实现方式一&#xff1a;递归思路代码实现Java 版本C 语言版本Python3 版本 复杂度分析 方式二&#xff1a;迭代和原地反转思路代码实现Java 版本C 语言版本Python3 版本 复杂度分析 总结相似题目 标签&#xff1a;链表、递归 题目描述 给你链表的头…

金融企业区域集中库的设计构想和测试验证

导读 本文探讨了金融企业区域集中库的设计构想和测试验证&#xff0c;包括架构设想、数据库整合场景测试及优势和使用设想。作者提出利用 TiDB 数据库产品集中建设区域集中库&#xff0c;解决 MySQL 存量节点的整合问题&#xff0c;实现部署的标准化、按需扩展和统一运维管理。…

ArcGIS10.8保姆式安装教程

ArcGIS 10.8是一款非常强大的地理信息系统软件&#xff0c;用于创建、管理、分析和可视化地理数据。以下是ArcGIS 10.8的详细安装教程&#xff1a; 确保系统满足安装要求 在开始安装之前&#xff0c;请确保您的计算机满足以下系统要求&#xff1a; 操作系统&#xff1a;Windo…

【算法集训】基础算法:前缀和 | 习题篇

习题 1480. 一维数组的动态和 简单的前缀和 int* runningSum(int* nums, int numsSize, int* returnSize){int * ret (int *)malloc(sizeof(int) * numsSize);ret[0] nums[0];for(int i 1; i < numsSize; i) {ret[i] ret[i - 1] nums[i];}*returnSize numsSize;ret…

阿里云4核8G服务器ECS通用算力型u1实例优惠价格

阿里云4核8G服务器优惠价格955元一年&#xff0c;配置为ECS通用算力型u1实例&#xff08;ecs.u1-c1m2.xlarge&#xff09;4核8G配置、1M到3M带宽可选、ESSD Entry系统盘20G到40G可选&#xff0c;CPU采用Intel(R) Xeon(R) Platinum处理器&#xff0c;阿里云活动链接 aliyunfuwuq…

逻辑回归详解

逻辑回归详解 逻辑回归&#xff0c;虽然名字中带有“回归”二字&#xff0c;但实际上它是一种分类算法&#xff0c;被广泛用于处理二分类问题。在机器学习和统计学习中&#xff0c;逻辑回归占据了重要的地位&#xff0c;是数据科学家和机器学习工程师的必备工具。本文将详细解…

11 flink-sql 中基于 mysql-cdc 连接 mysql-pxc 集群无法获取增量数据问题

前言 问题是来自于 群友, 2024.03.29, 也是花了一些时间 来排查这个问题 大致的问题是用 mysql-cdc 连接了一个 mysql-pxc 集群, 然后创建了一个 test_user 表 使用 "select * from test_user" 获取数据表的数据, 可以拿到 查询时的快照, 但是 无法获取到后续对…

拾光坞N3 ARM 虚拟主机 i茅台项目

拾光坞N3 在Dcoker部署i茅台案例 OS&#xff1a;Ubuntu 22.04.1 LTS aarch64 cpu&#xff1a;RK3566 ram&#xff1a;2G 部署流程——》mysql——》java8——》redis——》nginx mysql # 依赖 apt update apt install -y net-tools apt install -y libaio* # 下载mysql wg…

CSS设置字体样式

目录 前言&#xff1a; 1.font-family&#xff1a; 2.font-style&#xff1a; 3.font-weight&#xff1a; 4.font-size&#xff1a; 5.font-variant&#xff1a; 6.font&#xff1a; 前言&#xff1a; 在网页中字体是重要的组成部分&#xff0c;使用好字体可以让网页更…

[AIGC] Spring Interceptor 拦截器详解

文章目录 什么是Spring Interceptor如何使用Spring InterceptorSpring Interceptor的影响 什么是Spring Interceptor Interceptor&#xff08;拦截器&#xff09;是Spring MVC框架中的一种特性&#xff0c;类似于Servlet开发中的Filter&#xff08;过滤器&#xff09;&#xf…

一点点安全资料:数通知识扩展

工具 ENSP 华为防火墙 华为防火墙是华为提供的一种网络安全产品&#xff0c;设计用来保护企业网络不受未经授权访问和各种网络威胁的侵害。华为防火墙采用先进的技术&#xff0c;以确保网络安全&#xff0c;同时提供高性能的数据处理能力。下面我们就来详细了解一下华为防火墙…

Spring 面试题(三)

1. Spring Bean 支持哪几种作用域? Spring Bean支持以下五种作用域&#xff1a; Singleton&#xff08;单例&#xff09;&#xff1a;这是Spring默认的作用域。它表示在整个Spring IoC容器中&#xff0c;只会创建一个bean实例。这种作用域适用于那些无状态的bean&#xff0c…

Java常用函数接口

Java常用函数接口 Java 8 中引入的常用函数式接口&#xff0c;也就是 java.util.function 包中的接口。这些接口提供了一种简洁的方式来定义函数&#xff0c;常用于 Lambda 表达式和方法引用。下面是一些常用的接口&#xff1a; 一、Predicate&#xff08;断言&#xff09; …

go实现工厂模式

在Go中实现工厂模式&#xff0c;可以定义一个工厂接口和实现该接口的具体工厂类型。以下是一个简单的例子&#xff1a; package main import "fmt" // 定义一个接口&#xff0c;所有的具体产品都需要实现这个接口 type Product interface { Use() string } …

前端学习之DOM编程星星点灯案例

这个案例的实现逻辑是当你点击屏幕时&#xff0c;会完成一个事件&#xff0c;在你的屏幕上生成一张星星图片。然后再设置星星图片的大小将其改为随机。 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><t…

js和ts中的null与undefined

本文在个站同步发布&#xff0c;您可以在>>这里看到最新的文章。 1 定义 本文中的undefined和null指变量的字面值&#xff1a; undefined&#xff1a;已声明但未初始化的变量值null&#xff1a;未定义&#xff08;不存在&#xff09;的变量值 例如&#xff1a; var v…

代码随想录刷题——5双指针法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言5.1 移除元素&#xff08;3.30&#xff09;5.2 翻转字符串&#xff08;3.30&#xff09;5.3 替换数字&#xff08;3.30&#xff09;5.4 翻转字符串里的单词(3.3…

Halcon TCP 服务端接收命令

Halcon TCP 服务端接收命令 * 1.创建服务端 ***************************************** 协议 Protocol : TCP4 * 端口 Port : 5321 * 超时 Timeout : 1.0* 打开TCP服务端 open_socket_accept (Port, [protocol, timeout], \[Protocol,Timeout], AcceptingSocket)* 2.循环接受…

Netty和websocket,如何部署Netty

Netty是一个**高性能、异步事件驱动的网络应用框架**。 Netty是基于Java NIO&#xff08;非阻塞IO&#xff09;实现的&#xff0c;它提供了一套易于使用的API&#xff0c;帮助开发者能够更高效地开发出网络应用程序。以下是Netty的一些主要特点&#xff1a; 1. **异步和事件驱…

使用开源AI引擎:提高合同管理效率与合规性方案|可本地化部署

合同管理是企业运营中的关键环节&#xff0c;它不仅涉及到企业的经济利益&#xff0c;还直接关系到企业的法律风险控制。随着企业规模的扩大和业务的复杂化&#xff0c;传统的人工合同审核方式已经难以满足高效、准确的管理需求。因此&#xff0c;采用技术手段提高合同管理的效…