基于本文回答

播面 播面

文图音视，全方位拆解八股文
0
评论
请从左侧选择一个分类

HTML5 新增了哪些表单属性？

知识点图片

HTML5 对表单（Form）进行了重大的增强，引入了许多新属性，使得表单验证、交互和数据处理变得更加简单，大大减少了对 JavaScript 的依赖。

以下是 HTML5 新增的主要表单属性，按功能分类整理：

1. 验证与约束类属性 (Validation)

这些属性允许浏览器直接进行客户端验证。

  • required

    • 描述： 规定输入字段为必填项。如果未填写，表单无法提交。
    • 适用： <input>, <textarea>, <select>
    • 示例： <input type="text" required>

  • pattern

    • 描述： 规定输入字段必须符合的正则表达式模式。
    • 适用： <input> (text, search, url, tel, email, password)
    • 示例： <input type="text" pattern="[A-Za-z]{3}" title="请输入3个字母">

  • min / max

    • 描述： 规定输入字段的最小值和最大值。
    • 适用： <input> (number, range, date, time, datetime-local, month, week)
    • 示例： <input type="number" min="1" max="10">

  • step

    • 描述： 规定输入字段的合法数字间隔（步长）。
    • 适用： 同 min/max。
    • 示例： <input type="number" step="2"> (只能输入 0, 2, 4...)

2. 用户体验与交互类属性 (UX)

  • placeholder

    • 描述： 提供输入字段的提示信息（占位符），当用户输入内容后消失。
    • 适用： <input>, <textarea>
    • 示例： <input type="text" placeholder="请输入用户名">

  • autofocus

    • 描述： 页面加载时，自动让该字段获得焦点。
    • 适用： 所有表单控件。
    • 示例： <input type="text" autofocus>

  • autocomplete

    • 描述： 规定表单或输入字段是否应该自动完成（基于浏览器历史记录）。
    • 值： on (默认), off
    • 适用： <form>, <input>
    • 示例： <input type="email" autocomplete="off">

  • multiple

    • 描述： 允许用户在 <input> 中输入多个值（如多个邮箱）或选择多个文件。
    • 适用： <input type="file">, <input type="email">
    • 示例： <input type="file" multiple>

3. 表单关联与结构类属性

  • form (非常有用)

    • 描述： 允许 <input> 元素放置在 <form> 标签之外，但仍属于该表单。需要指定表单的 id。
    • 适用： 所有表单控件。
    • 示例：
      html 
      <form id="myForm" action="/submit"></form>
<!-- 这个输入框在表单外，但属于 myForm -->
<input type="text" form="myForm">

  • list

    • 描述： 引用 <datalist> 元素，为输入框提供预定义的选项列表（实现类似搜索建议的功能）。
    • 适用： <input>
    • 示例：
      html 
      <input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>

4. 重写表单行为属性 (Form Override)

这些属性通常用在提交按钮（<input type="submit"> 或 <input type="image"> 或 <button>）上，用于覆盖 <form> 标签上的默认设置。

  • formaction: 覆盖表单的 action 属性（提交到的 URL）。
  • formenctype: 覆盖表单的 enctype 属性（编码方式，如文件上传时）。
  • formmethod: 覆盖表单的 method 属性（GET 或 POST）。
  • formnovalidate: 提交时覆盖表单的验证设置（即不进行验证）。
  • formtarget: 覆盖表单的 target 属性（在何处打开响应）。

示例：

html 
<form action="/save" method="post">
  <input type="submit" value="保存">
  <!-- 点击此按钮会提交到 /save-admin 且不进行验证 -->
  <input type="submit" formaction="/save-admin" formnovalidate value="管理员保存">
</form>

5. <form> 标签自身的新属性

  • novalidate
    • 描述： 提交表单时禁用浏览器的默认验证功能。
    • 示例： <form action="demo.php" novalidate>

总结

HTML5 的这些新属性主要解决了以下痛点：

  1. 减少 JS 代码：以前需要写 JS 做的非空验证、正则验证、占位符效果，现在只需一个属性。
  2. 移动端友好：如 type="email" 或 type="number" 配合验证属性，可以在移动端唤起特定的键盘。
  3. 布局灵活：form 属性让表单元素可以随意放置，不再受 HTML 嵌套结构的限制。
00:00
00:00