表单结构与控件

表单把用户输入组织成可提交的数据。label、控件的 name、校验约束和提交方法共同决定数据契约；只画出一个输入框不等于完成了表单设计。

<form action="/search" method="get">
  <label for="query">搜索关键词</label>
  <input id="query" name="q" required minlength="2">
  <button type="submit">搜索</button>
</form>

for 与 id 把标签和控件关联起来，name 决定成功提交时的字段名，required 与 minlength 提供浏览器原生约束。id 只是文档中的身份；没有 name 的控件通常不会进入提交数据。GET 将数据编码进 URL，POST 适合提交需要放在请求体中的数据，但安全性还取决于服务端验证、传输和认证。

字段集可以用 fieldset 与 legend 表达一组相关选项。自定义控件若绕过原生输入，必须重新实现焦点、键盘、禁用、错误提示和提交语义，成本远高于添加样式。

实验与练习

创建一个搜索表单和一个包含单选按钮的设置表单。提交一次合法值和一次非法值，观察 URL、FormData、浏览器校验提示和焦点位置。再删除 name 或 label 关联，记录数据和辅助技术分别损失了什么。

常见错误

• 没有 label，只用 placeholder 充当标签。
• 控件没有 name，却以为它会自动提交。
• 只在前端校验，服务端不重新检查输入。
• 表单内普通按钮没有声明 type="button"。
• 自定义下拉框只处理鼠标点击。

继续阅读

表单需要和页面结构及辅助技术协作，下一篇整理全局属性和无障碍身份：全局属性与无障碍。

练习

1. 用最小输入复现“表单结构与控件”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案