HTML 表单是用于收集用户输入数据的重要元素，通常用于提交到服务器进行处理。它包括一系列控件，如文本输入框、按钮、复选框、单选按钮、文件上传等。表单通过 form 标签定义，用户可以通过这些控件与网页进行交互。

1. 基础结构

  • 表单通过 <form> 标签创建，表单的 action 属性定义数据提交的目标 URL，method 属性定义提交方式（如 GET 或 POST）。
<form action="/submit" method="POST">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

2. 表单控件

HTML 表单提供了多种用户输入控件：

  • 文本输入 (<input type="text">, <textarea>)
  • 密码输入 (<input type="password">)
  • 单选框和复选框 (<input type="radio">, <input type="checkbox">)
  • 下拉列表 (<select>)
  • 按钮 (<button>, <input type="submit">)
  • 文件上传 (<input type="file">)
  • 隐藏输入 (<input type="hidden">)

3. 表单的属性

  • action：指定表单数据提交到的 URL。
  • method：定义提交方式，常用 GET（将数据附在 URL 后）和 POST（将数据放入 HTTP 请求体中）。
  • enctype：指定数据的编码类型，常用于文件上传（如 multipart/form-data）。
  • autocomplete：启用或禁用浏览器的自动完成功能。

4. 表单校验

HTML5 引入了许多新的表单校验功能，能够减少 JavaScript 校验代码的复杂度。校验功能包括：

  • 必填字段（required）
  • 正则表达式模式匹配（pattern）
  • 输入长度限制（minlength, maxlength）
  • 值范围限制（min, max, step）
  • 特定的输入类型（如 email, url）自带的校验规则

5. 表单的交互与提交

  • 表单可以通过 input 类型为 submit 或 <button type="submit"> 来触发提交。
  • onsubmit 事件可以通过 JavaScript 拦截表单提交，进行额外的校验或逻辑处理。
  • novalidate 属性可禁用表单的内置校验功能。

6. 表单数据处理

  • 在表单提交后，数据会以 URL 编码或表单编码格式提交到服务器。
  • 使用 JavaScript 可以通过 FormData 对象动态操作表单数据，方便处理和提交异步请求（AJAX）。

7. 文件上传

  • 通过 <input type="file"> 实现文件上传功能，结合 enctype="multipart/form-data" 可以上传多种文件格式。
  • 文件上传的限制（大小、类型）可以通过 HTML 和 JavaScript 控制。

8. 表单的无障碍设计

  • 使用 <label> 标签关联输入控件，以增强无障碍性和提高用户体验。
  • 为表单控件添加 aria 属性，帮助屏幕阅读器用户更好地理解表单的结构和功能。

9. 表单的布局和样式

  • 表单布局可以通过 CSS 灵活控制，如使用 display: flex、grid 等布局方式。
  • 表单控件的样式可以通过伪类（如 :valid, :invalid）自定义状态样式。

10. 表单的动态性

  • 表单可以通过 JavaScript 动态创建、修改或删除表单控件。使用 addEventListener 监听表单的交互事件，实现实时反馈和校验。

常见考点

1. HTML5 表单校验属性

  • required：必填字段
  • pattern：正则表达式校验
  • min/max：最小值和最大值（适用于 number、date 等类型）
  • minlength/maxlength：输入的最小长度和最大长度
  • step：步长（适用于 number、range）
  • type 属性校验：不同 input 类型自带的校验（如 email、url、tel 等）

2. 内置表单校验 API

  • checkValidity()：手动触发校验
  • reportValidity()：校验并展示错误提示
  • setCustomValidity()：设置自定义错误消息
  • validity 对象：检查表单字段的校验状态（如 valid, valueMissing, typeMismatch 等）

3. 表单校验的错误提示

  • 如何自定义错误提示信息？
  • 使用 validationMessage 自定义错误信息展示。

4. 浏览器默认校验与自定义校验

  • 如何关闭浏览器的默认校验？
  • 如何与 JavaScript 配合进行自定义表单校验？

5. 表单校验与样式

  • 使用 CSS 伪类（:valid、:invalid）进行样式变化。
  • 如何通过样式反映输入状态（正确、错误提示）？

6. 文件输入校验

  • accept 属性限制文件类型（如 image/*、.pdf 等）
  • 如何通过 JavaScript 校验文件大小、类型等属性？

7. 跨浏览器兼容性

  • 不同浏览器对于表单校验的支持和差异。

8. 表单校验与无障碍支持

  • 如何为屏幕阅读器提供适当的错误提示？

9. 禁用 HTML 校验

  • 如何通过 novalidate 禁用表单的 HTML 校验，并通过 JavaScript 实现自定义校验。

10. 表单验证的用户体验

  • 提交表单时，如何提升用户体验（如实时反馈、避免阻塞操作等）？
  • 如何处理错误提示的布局和显示方式以提升用户体验？