HTML 表单是 Web 应用收集用户数据的核心机制。从简单的联系表单到复杂的申请流程，表单几乎无处不在。掌握表单创建和处理是 Web 开发者的必备技能。

HTML 表单是 Web 应用收集用户数据的核心机制。从简单的联系表单到复杂的申请流程，表单几乎无处不在。掌握表单创建和处理是 Web 开发者的必备技能。

form 元素是表单的容器。action 属性指定表单提交地址，通常指向服务器端点。method 属性决定提交方式，GET 将数据附加到 URL，POST 将数据放入请求体。enctype 属性指定编码类型。

GET 提交方式适用于查询、搜索等只读操作。数据以查询字符串形式附加在 URL 后面。优点是结果可以收藏和分享，缺点是数据量和类型受限，安全性较低。

POST 提交方式适用于数据修改、文件上传等操作。数据放在 HTTP 请求的消息体中。优点是数据量无限制，类型丰富，安全性较高。缺点是结果不能直接收藏。

input 元素是最常用的表单控件。text 类型创建单行文本框。password 类型创建密码框，输入字符显示为星号或圆点。email 类型在移动设备上显示邮件键盘。

number 类型限制输入数字。可以设置 min、max、step 属性控制范围。range 类型创建滑块控件，适用于不需要精确数值的场景。

checkbox 类型创建复选框。同一组复选框可以使用相同的 name 属性，提交时以数组形式发送给服务器。checked 属性设置默认选中状态。

radio 类型创建单选按钮。同一组单选按钮必须使用相同的 name 属性，确保只能选择一个。value 属性定义各选项的值，checked 属性设置默认选中。

date、time、datetime-local 等类型创建日期时间选择器。color 类型创建颜色选择器。file 类型创建文件上传控件，可以设置 accept 属性限制文件类型。

button 元素和 input[type=”button/submit/reset”] 创建按钮。submit 类型自动提交表单。reset 类型重置表单到初始状态。button 类型不执行默认行为，点击事件由 JavaScript 处理。

textarea 创建多行文本输入区域。cols 和 rows 属性设置列数和行数。wrap 属性控制换行方式。placeholder 提供输入提示，maxlength 限制最大字符数。

select 创建下拉选择框。option 定义选项，optgroup 将选项分组。selected 属性设置默认选项。multiple 属性允许多选，此时下拉框变为列表框。

label 元素为表单控件提供标签。for 属性关联控件的 id。点击标签聚焦关联控件，改善可访问性。所有表单控件都应该有关联的标签。

fieldset 和 legend 元素对表单内容分组。fieldset 创建分组边框，legend 提供分组标题。常用于将相关字段组织在一起，提升表单结构和可访问性。

表单验证确保数据质量。required 属性表示必填。pattern 属性使用正则表达式验证格式。minlength 和 maxlength 限制长度。min 和 max 限制数值范围。

浏览器原生验证提供即时反馈。invalid 事件在验证失败时触发。checkValidity 方法手动检查验证状态。reportValidity 方法显示验证消息。setCustomValidity 方法设置自定义错误消息。

JavaScript 可以增强表单交互。change 事件在值改变时触发。input 事件在每次输入时触发。submit 事件在提交前触发，可用于阻止提交或修改数据。

FormData API 简化表单数据处理。new FormData(form) 创建 FormData 对象。get、getAll、set、append 操作数据。entries、keys、values 遍历数据。toString 将数据编码为字符串。

防止重复提交提升用户体验。提交前禁用按钮。提交后显示加载状态。使用防重令牌防止多次提交。超时后重新启用提交按钮。

移动端表单需要特别优化。输入类型触发正确的虚拟键盘。autocomplete 属性利用浏览器自动填充。autocapitalize 属性控制首字母大写。viewport meta 标签确保正确缩放。

表单安全需要考虑多个方面。CSRF 令牌防止跨站请求伪造。输入验证服务端也要执行，防止恶意数据。密码字段应使用专用的密码管理器属性。

无障碍表单确保所有人都能使用。标签和控件关联。错误消息清晰指出问题和解决方案。焦点状态明显可见。分组用 fieldset 组织。

调试表单问题使用开发者工具。Network 面板查看提交数据。Console 面板检查 JavaScript 错误。Elements 面板检查 DOM 结构。Sources 面板断点调试 JavaScript。

表单设计最佳实践包括：表单宜短，渐进暴露多余字段；标签清晰，简短描述输入内容；错误提示具体，指导用户修正；按钮文字描述操作，如实而非”提交”。

掌握 HTML 表单需要理论结合实践。从简单表单开始，逐步添加复杂功能。理解浏览器行为和服务器处理。多尝试不同控件和验证方式，积累经验。

（本文为 HTML 技术系列文章的第 80 篇）