表单标签

表单基础

<form> 标签

<form name="myForm" id="myForm" action="submit.php" method="post">
<!-- 表单内容 -->
</form>

关键属性

属性	描述	示例值
name	表单名称(JS操作使用)	"loginForm"
id	表单唯一标识	"userForm"
action	数据提交目标URL	"process.php"
method	数据传输方式	get/post
enctype	数据编码类型	"multipart/form-data"

表单嵌套规则

表单可以包含表格(<table>)，但表格不能包含表单

数据传输方式

GET vs POST

特性	GET	POST
数据位置	URL查询字符串	HTTP请求体
数据可见性	可见	不可见
数据长度限制	有(约2048字符)	无
安全性	较低	较高
缓存/书签	可	不可
适用场景	搜索、筛选	登录、文件上传

GET示例: http://example.com?name=value&age=25

输入控件

<input> 元素

<input type="text" name="username" placeholder="请输入用户名">

常用类型

type值	描述	特有属性
text	单行文本框	maxlength, pattern
password	密码框	-
radio	单选按钮	checked
checkbox	复选框	checked
file	文件上传	accept
submit	提交按钮	-
reset	重置按钮	-
button	普通按钮	-
hidden	隐藏字段	-

单选按钮注意事项

• 同一组的radio必须具有相同name属性
• 使用checked设置默认选中项
• 配合label提升可用性

按钮类型对比

<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通" onclick="func()">
<input type="image" src="btn.png" alt="图片按钮">

其他表单元素

<select> 下拉列表

<select name="city" multiple size="4">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
</select>

属性	描述
multiple	允许多选
size	可见选项数

<textarea> 多行文本框

<textarea rows="5" cols="40" placeholder="请输入..."></textarea>

属性	描述
rows	可见行数
cols	可见列数
wrap	换行方式

表单语义化

<fieldset> 和 <legend>

<fieldset>
<legend>登录信息</legend>
<!-- 表单控件 -->
</fieldset>

<label> 标签

<input type="checkbox" id="remember">
<label for="remember">记住我</label>

最佳实践

1. 使用for属性关联input的id
2. 提升可访问性和用户体验
3. 点击标签即可聚焦相关控件

HTML5新增输入类型

类型	描述	示例
email	电子邮件输入	<input type="email">
url	URL输入	<input type="url">
number	数字输入	<input type="number" min="1" max="10">
date	日期选择器	<input type="date">
color	颜色选择器	<input type="color">
range	滑块控件	<input type="range">

表单验证属性

属性	描述	示例
required	必填字段	<input required>
pattern	正则验证	pattern="[A-Za-z]{3}"
min/max	数值范围	min="1" max="100"
minlength/maxlength	长度限制	minlength="6"

<input type="text" required pattern="\d{3}-\d{4}"
title="请输入000-0000格式">

表单最佳实践

1. 合理分组：使用fieldset组织相关控件
2. 明确标签：每个控件应有对应的label
3. 适当默认值：使用value/placeholder引导用户
4. 移动友好：

<input type="text" inputmode="numeric">

5. 安全考虑：

• 敏感数据使用POST
• 重要表单添加CSRF令牌
• 文件上传限制类型和大小

重要提醒

前端验证不能替代服务器端验证！必须进行双重验证保证数据安全