HTML 表单 **全标签 + 全属性** 深度精讲
（分：全局通用属性 + 表单专属标签专属属性，逐个拆、带作用、带用法、易混区分，专门给你研究用）
HTML 表单 全标签 + 全属性 深度精讲
（分：全局通用属性 + 表单专属标签专属属性，逐个拆、带作用、带用法、易混区分，专门给你研究用）
一、先搞懂：HTML 属性是什么
写法规则：
html
预览
<标签名 属性1="值" 属性2="值">内容</标签名>
属性写在开始标签内部
格式：
属性名="属性值"分两类：
- 全局属性：所有 HTML 标签都能用
- 专属属性：只给表单 / 某类标签专用
二、所有标签通用「全局常用属性」
不管是 div、p、input、form 全都能用：
表格
| 属性 | 作用 |
|---|---|
id |
页面唯一标识，JS/DOM 获取元素、label 绑定 |
class |
定义类名，CSS 样式、DOM 选择器用 |
name |
表单核心，提交数据时的参数名 |
style |
行内 CSS 样式 |
title |
鼠标悬浮上去显示提示文字 |
hidden |
直接隐藏元素，不占页面位置 |
tabindex |
按 Tab 键切换焦点顺序 |
data-* |
自定义属性，如 data-id="123"，JS 拿自定义数据 |
autofocus |
页面加载自动聚焦到该元素 |
三、表单根标签 <form> 专属属性
整个表单的容器，控制提交方式、跳转、编码、验证
表格
| 属性 | 取值 | 作用 |
|---|---|---|
action |
后端接口地址 | 表单提交到哪个 URL |
method |
GET / POST |
提交方式： GET：参数拼在地址栏 POST：参数放请求体 |
target |
_self/_blank |
提交后在哪打开页面 |
enctype |
编码类型 | 表单数据编码格式 1. application/x-www-form-urlencoded 默认2. multipart/form-data 上传文件必须用3. text/plain 纯文本 |
novalidate |
无值 | 关闭浏览器自带表单验证 |
autocomplete |
on/off |
是否开启输入历史自动补全 |
示例：
html
预览
<form action="/submit" method="POST" enctype="multipart/form-data">
四、<label> 标签属性
作用：点击文字，自动聚焦到输入框
表格
| 属性 | 作用 |
|---|---|
for |
绑定对应 input 的 id，关联输入框 |
示例：
html
预览
<label for="username">用户名：</label>
<input type="text" id="username">
五、表单核心：<input> 标签 所有常用属性
input 是表单最万能标签，靠 type 切换样式，下面是通用属性 + type 类型
1. input 通用专属属性
表格
| 属性 | 作用 |
|---|---|
type |
控制输入框类型（最关键） |
name |
提交后台的字段名必须要有 |
value |
默认值、单选 / 复选提交的值 |
placeholder |
输入框灰色提示文字 |
readonly |
只读：能看、能复制、不能改，可提交 |
disabled |
禁用：变灰、不能输入、不会提交到后台 |
required |
表单提交必填校验，不能为空 |
maxlength |
限制最大输入字符数 |
min/max |
数字 / 日期的最小、最大值 |
pattern |
正则表达式校验（手机号、邮箱） |
checked |
单选 / 复选 默认选中 |
size |
控制输入框显示宽度 |
2. input 的 type 常用全部类型
plaintext
text 单行文本输入
password 密码框
radio 单选框（同name互斥）
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮（无默认行为）
hidden 隐藏域，看不见但能提交数据
number 数字输入框
email 邮箱格式校验
tel 手机号
url 网址
date 日期选择器
time 时间选择器
file 文件上传
range 滑动条
color 颜色选择器
六、下拉框 <select> + <option> 属性
<select> 属性
表格
| 属性 | 作用 |
|---|---|
name |
提交字段名 |
multiple |
允许多选 |
size |
显示几个选项 |
required |
必选校验 |
<option> 下拉选项属性
表格
| 属性 | 作用 |
|---|---|
value |
提交给后台的值 |
selected |
默认选中该项 |
disabled |
禁用某一项不可选 |
<optgroup>
下拉选项分组，属性：label 分组名称
七、多行文本域 <textarea> 属性
表格
| 属性 | 作用 |
|---|---|
rows |
显示行数 |
cols |
显示列宽 |
placeholder |
提示文字 |
readonly |
只读 |
disabled |
禁用 |
required |
必填 |
maxlength |
最大字数限制 |
示例：
html
预览
<textarea rows="4" cols="30" placeholder="请输入简介"></textarea>
八、按钮 <button> 属性
比 input type="button" 更强大
表格
| 属性 | 作用 |
|---|---|
type |
submit 提交 / reset 重置 / button 普通按钮 |
name / value |
提交参数 |
disabled |
禁用按钮 |
区别：
<button>内部可以放文字、图标、标签<input>只能纯文字
九、辅助表单标签属性
<fieldset> 表单分组
把一组表单框起来，无复杂属性，多用于语义分组。
<legend>
配合 fieldset，分组标题。
<datalist> 联想输入
配合 input 的 list 属性，实现输入联想：
html
预览
<input type="text" list="cityList">
<datalist id="cityList">
<option value="广州">
<option value="清远">
</datalist>
十、必背易混属性区分（高频考点）
- readonly vs disabled
- readonly：能看、能复制、可提交、不灰化
- disabled：不能操作、不提交数据、灰化
name 为什么必须写？
表单提交是按
name=value传给后端，没 name 后台收不到数据required
浏览器原生校验，提交前自动判断是否为空
enctype 什么时候用？
只要上传文件，form 必须加
enctype="multipart/form-data"
我可以给你整理一份：完整表单示例代码，把 form、input、select、textarea、label 全部写在一个页面里，带所有属性实战，要不要？