HTML5 表单

HTML5 对表单功能进行了大幅度的增强，引入了许多新的输入类型、属性和元素，旨在提供更好的用户体验、更强的数据验证能力，并减少对 JavaScript 的依赖。

新的 <input> 类型

HTML5 增加了多种新的 type 属性值，让浏览器能够更好地理解输入字段的用途，并提供相应的 UI（如日期选择器）和验证。

• email: 用于输入电子邮件地址。浏览器会自动验证输入内容是否符合标准的电子邮件格式。

  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email">

• url: 用于输入 URL 地址。浏览器会验证其格式。

• number: 用于输入数字。可以设置 min, max, step (步长) 等属性。在移动设备上通常会弹出数字键盘。

  <label for="quantity">数量 (1 到 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">

• date: 提供一个日期选择器，用于选择年、月、日。

• time: 提供一个时间选择器。

• color: 提供一个颜色选择器。

• range: 创建一个滑块控件，用于在指定范围内选择一个值。

• search: 用于搜索字段，外观上可能与 text 类似，但功能上可能带有一个清除按钮。

新的表单属性

这些新属性可以应用于 <input>, <form>, <textarea> 等元素，提供了强大的声明式验证和交互功能。

• placeholder: 在输入字段为空时，显示简短的提示性文字。当用户开始输入时，该文字会自动消失。

  <input type="text" name="fname" placeholder="请输入您的名字">

• required: 规定该输入字段在提交表单前必须被填写。如果为空，浏览器会阻止表单提交并提示用户。

  <input type="text" name="username" required>

• autofocus: 当页面加载时，自动将焦点设置到该输入字段上。

• pattern: 提供一个正则表达式，用于验证输入字段的值。如果值不匹配该模式，表单将无法提交。

  <label for="zip">邮政编码 (6位数字):</label>
  <input type="text" id="zip" name="zip" pattern="[0-9]{6}" title="请输入6位数字的邮政编码">

• multiple: 允许用户在 <input type="file"> 中选择多个文件，或在 <input type="email"> 中输入多个逗号分隔的邮箱地址。

• formaction, formmethod 等: 允许提交按钮 (<input type="submit"> 或 <button>) 覆盖其所属 <form> 的 action 和 method 等属性，实现一个表单内有多个不同提交行为的按钮。

<datalist> 元素

<datalist> 元素为输入字段提供了一个预定义的选项列表（自动补全功能）。用户既可以从列表中选择，也可以输入自己的值。

通过将 <input> 的 list 属性设置为 <datalist> 的 id 来将它们关联起来。

<label for="browser">选择您的浏览器:</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>