05表单与输入
网页不只是「给人看」的，还要「让人填」：登录、注册、搜索、下单、评论…… 全靠表单。这一章把 form、input 全家族、原生验证一次讲透， 学完就能搭出完整的注册页。
一、form：所有控件的「家」
<form> 本身不显示任何东西，它是数据的打包器：
收集内部所有控件的值，提交时一并发送给服务器。三个核心属性决定「发给谁、怎么发」。
| 属性 | 作用 | 常用值 |
|---|---|---|
action | 数据提交到哪个地址 | URL，如 /login |
method | 用什么方式发送 | get（拼在网址后，可收藏）/ post（藏在请求体，更安全） |
target | 结果打开位置 | _self（默认）/ _blank（新标签页） |
name | 表单名称 | JS 里 document.表单名 快速拿到它 |
autocomplete | 是否启用自动填充 | on / off |
type="password" 改成 type="text"，密码立刻以明文显示二、input 的两大通用属性：name 与 value
每个控件都是「键值对」的搬运工：name 是键，value 是值。
提交时服务器收到的就是 username=张三&pwd=123 这样的串。
没有 name 的控件提交时会被直接丢弃——这是新手最常踩的坑。
| 通用属性 | 作用 | 备注 |
|---|---|---|
name | 数据键名 | 不写 = 白填，数据不上传 |
value | 当前值 / 初始值 | 用户改动会实时更新它 |
placeholder | 灰色占位提示 | 不构成数据，只是提示 |
disabled | 禁用控件 | 灰掉不可点，不参与提交 |
readonly | 只读 | 不可改但参与提交 |
required | 必填校验 | 空着就提交，浏览器直接拦 |
readonly 摘掉那只读框变可输入；disabled 删掉那只禁用框复活三、文本类输入：type 大观园
<input> 是个「百变怪」，type 一换就是另一种控件。
先看文本阵营——它们长得像，但键盘形态和校验规则完全不同。
| type | 用途 | 手机键盘 | 特色校验 |
|---|---|---|---|
text | 通用单行文本（默认） | 普通键盘 | 无 |
password | 密码 | 普通键盘 | 显示为圆点 |
email | 邮箱 | 带 @ 的键盘 | 必须含 @ 和域名 |
tel | 电话 | 数字拨号盘 | 无（格式各国不一） |
url | 网址 | 带 / 和 .com | 必须是合法 URL |
search | 搜索框 | 普通键盘 | 部分浏览器带清除叉 |
number | 数字 | 纯数字键盘 | 只收数字，可配 min/max/step |
四、选择类控件：radio / checkbox / select
让用户「选」而不是「打字」，能大幅减少输入错误。单选用 radio（互斥，同组同名），多选用 checkbox（可勾多个），下拉列表用 select。
五、多行文本与文件上传
<textarea> 没有 value 属性——初始内容写在标签中间，
这一点和 input 相反。文件上传则是 type="file"，多文件加 multiple。
| textarea 属性 | 作用 |
|---|---|
rows | 默认可见行数（高度） |
cols | 默认列数（宽度，一般用 CSS 控制更好） |
maxlength | 最大字符数 |
placeholder | 占位提示（空时显示） |
六、HTML5 新类型：date / color / range / 时间家族
以前做日期选择要引入几百 KB 的 JS 插件，HTML5 之后浏览器原生全包了。 颜色选择、滑杆、日期时间，一个 type 搞定。
range 适合「大概值」：音量、亮度、价格区间；
number 适合「精确值」：数量、年龄。
滑杆没有 value 展示时用户会很懵——旁边记得放一个实时数字。七、按钮三兄弟与 datalist 智能提示
按钮有三种性格：submit 提交、reset 重置、button 普通按钮。
<button> 里可以放图标和富文本，比 <input type="submit"> 灵活得多。
<datalist> 则给输入框装上「候选词」能力。
<button> 不写 type 默认就是 submit！——在下面那个输入框里打「上」，看 datalist 冒出候选词<button> 不写 type 时默认是 submit！
在表单里放「取消」按钮忘了写 type="button"，点了直接把表单交了——经典事故现场。八、原生验证：不写 JS 也能拦住错误
表单验证不用等 JS 出场，HTML 属性就能做第一道防线：
required 必填、pattern 正则、min/max 范围、
minlength/maxlength 长度。提交时浏览器自动弹气泡拦截。
| 验证属性 | 作用 | 示例 |
|---|---|---|
required | 不能为空 | <input required> |
pattern | 正则匹配 | pattern="1[3-9]\d{9}" 手机号 |
min / max | 数字/日期范围 | min="18" max="99" |
minlength / maxlength | 字符长度区间 | minlength="6" |
type=email/url | 格式校验 | 自带规则不用写 |
20，它才不会被 range 拦下九、label、fieldset 与 progress/meter
<label> 绑定文字与控件（点文字即点控件，读屏软件也靠它）；
<fieldset> + <legend> 给表单分组画框；
<progress> 和 <meter> 展示进度与度量。
value="0.6" 改成 0.92，度量计立刻越过 high 变红警示十、本章小结
- form 是数据打包器：action 发给谁、method 怎么发（get 明信片 / post 密封信）。
- 没有 name 的控件不提交；disabled 的也不提交，readonly 的会提交。
- input 靠 type 百变：文本七兄弟键盘校验各不同，手机端差异最明显。
- radio 靠同名分组互斥；checkbox 独立多选；select 的 value 与文案分离。
- textarea 初始值写在标签中间；file 靠 accept 过滤类型、multiple 开多选。
- HTML5 原生控件：date / color / range 免插件，一行 type 顶一个 JS 库。
- button 默认就是 submit，普通按钮必须手写
type="button"。 - required / pattern / min-max / minlength 是免费的验证第一道门。
- label 绑 id 提升可点性，fieldset+legend 分组，progress 显进度、meter 显度量。