HTML5中新添加的表单属性有哪些？

HTML5 为表单添加了许多新属性，增强了表单的功能和用户体验。主要包括以下几类：

1. 输入类型和属性:

• 新的输入类型: 这些新类型提供了更具体的语义和内置的验证功能，以及更合适的键盘布局（在移动设备上尤其有用）。

  • email: 用于输入电子邮件地址。
  • url: 用于输入网址。
  • tel: 用于输入电话号码。
  • number: 用于输入数字。
  • range: 用于输入一定范围内的数字。
  • date: 用于输入日期。
  • time: 用于输入时间。
  • datetime: 用于输入日期和时间。
  • week: 用于输入周数。
  • month: 用于输入月份。
  • color: 用于选择颜色。
  • search: 用于搜索框。

• 新的输入属性:

  • placeholder: 显示在输入框内的提示文本，在用户输入内容后消失。
  • required: 标记必填字段。
  • autofocus: 页面加载时自动聚焦到该输入框。
  • autocomplete: 启用或禁用浏览器的自动完成功能。可以设置为on、off或特定值，例如name, street-address等。
  • min, max, step: 用于number和range类型的输入，指定最小值、最大值和步长。
  • pattern: 使用正则表达式定义输入值的有效格式。
  • list: 将输入框与datalist元素关联，提供预定义的选项供用户选择。
  • multiple: 允许在email, file等输入类型中选择多个值。

2. 表单属性:

• novalidate: 禁用浏览器对表单的内置验证。
• autocomplete: 启用或禁用整个表单的自动完成功能。
• formaction, formenctype, formmethod, formnovalidate, formtarget: 用于表单内单个提交按钮，允许覆盖表单自身的提交属性。

3. datalist 元素:

• datalist元素与list属性配合使用，为输入框提供预定义的选项列表。

4. output 元素:

• output元素用于显示计算结果或脚本输出。

示例：

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Enter your email" required>

  <label for="website">Website:</label>
  <input type="url" id="website" name="website" placeholder="Enter your website">

  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="1" max="10" value="1">

  <input type="submit" value="Submit">
</form>

<form>
  <input type="text" list="browsers">
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
  </datalist>
</form>

这些新属性和元素极大地提升了HTML表单的功能和用户体验，使得开发者可以创建更易用、更强大的Web表单。