HTML5 - Web 表单 2.0

HTML5 - 表单

与 HTML4 相比，HTML5 显著增强了 Web 表单，引入了新的输入类型、属性和元素，提升了用户体验，提供了更好的语义，并启用了原生浏览器验证，从而减少了对 JavaScript 的依赖，以处理常见的验证场景。

新的输入类型

HTML5 扩展了 <input> 元素的 type 属性，新增了多个值。这些值在支持的浏览器和移动设备上通常提供专用的 UI 控件（如日期选择器或滑块），并启用内置验证。

类型	描述与用例
`email`	用于电子邮件地址。浏览器可能会提供基本电子邮件格式的验证。移动设备通常显示为电子邮件输入优化的键盘。
`url`	用于网址。浏览器可能会验证格式。移动键盘可能会提供特定于 URL 的按键。
`tel`	用于电话号码。由于全球格式多样，不强制执行特定验证，但移动设备可能会显示数字键盘。
`number`	用于数字输入。浏览器通常显示微调器控件。允许使用 `min`、`max` 和 `step` 等属性。
`range`	用于在定义范围内选择值。通常渲染为滑块控件。需要 `min`、`max` 属性，可选 `step` 属性。
`date`	用于选择特定日期（年、月、日）。浏览器通常显示日历日期选择器。
`month`	用于选择特定月份和年份。
`week`	用于选择特定周和年份。
`time`	用于选择特定时间（小时、分钟，可选秒）。
`datetime-local`	用于选择特定日期和时间，不含时区信息。
`search`	用于搜索字段。功能上类似于 `text`，但浏览器可能会以不同的方式设置样式或添加“清除”按钮。
`color`	用于选择颜色。浏览器通常显示颜色选择器界面。

注意： 如果浏览器不支持特定的输入类型，它通常会回退到将其渲染为 type="text"。由于基于浏览器的验证可以被绕过，请始终提供服务器端验证。

输入类型示例

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Input Types</title>
</head>
<body>
  <form action="/submit-form" method="post">
    <p>
      <label for="email_addr">Email:</label>
      <input type="email" id="email_addr" name="email_addr" required>
    </p>
    <p>
      <label for="visit_date">Date of Visit:</label>
      <input type="date" id="visit_date" name="visit_date">
    </p>
    <p>
      <label for="quantity">Quantity (1-10):</label>
      <input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
    </p>
    <p>
      <label for="satisfaction">Satisfaction (1-5):</label>
      <input type="range" id="satisfaction" name="satisfaction" min="1" max="5" step="1" value="3">
      <span id="rangeValue">3</span>
      <script>
        // Optional: Display range value dynamically
        const satisfaction = document.getElementById('satisfaction');
        const rangeValue = document.getElementById('rangeValue');
        satisfaction.addEventListener('input', () => { rangeValue.textContent = satisfaction.value; });
      </script>
    </p>
     <p>
      <label for="fav_color">Favorite Color:</label>
      <input type="color" id="fav_color" name="fav_color" value="#ff0000">
    </p>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

新的表单属性

HTML5 为表单元素，特别是 <input>、<textarea> 和 <select>，引入了几个新属性：

required: 一个布尔属性，指示该字段在提交表单之前必须填写。如果必填字段为空，浏览器将阻止提交并显示默认错误消息。
placeholder: 在用户输入值之前，在输入字段中提供简短提示（例如，示例值或描述）。当字段获得焦点或输入内容时，提示会消失。
autofocus: 一个布尔属性，当存在时，页面加载时会自动将焦点给予关联的表单控件。
pattern: 指定一个正则表达式，输入值必须匹配该表达式才能通过验证。与 text、search、url、tel、email 和 password 类型一起使用。需要一个 title 属性来向用户描述模式。
min、max、step: 与数字输入类型（number、range、date 等）一起使用，用于定义可接受值的约束。
multiple: 允许为 email 和 file 输入类型以及 <select> 元素选择多个值。
form: 将输入元素与表单关联，即使输入位于 <form> 标签之外。其值是表单的 ID。
formaction、formenctype、formmethod、formnovalidate、formtarget: 这些属性可以应用于提交按钮（<input type="submit">、<button type="submit">），以覆盖父级 <form> 元素在该特定提交的相应属性。

属性示例 (`required`、`placeholder`、`pattern`)

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Form Attributes</title>
</head>
<body>
  <form action="/signup" method="post">
    <p>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required placeholder="e.g., john_doe">
    </p>
    <p>
      <label for="zipcode">ZIP Code (5 digits):</label>
      <input type="text" id="zipcode" name="zipcode" required
             pattern="[0-9]{5}"
             title="Please enter a 5-digit ZIP code."
             placeholder="e.g., 90210">
    </p>
    <p>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required minlength="8">
      <!-- minlength is also a useful validation attribute -->
    </p>
    <button type="submit">Sign Up</button>
    <button type="submit" formnovalidate>Submit without Validation</button>
    <!-- formnovalidate overrides required/pattern etc. for this button -->
  </form>
</body>
</html>

新的表单元素

<datalist>: 为 <input> 元素提供“自动完成”功能。它包含一个 <option> 元素列表。当用户在关联的输入字段中输入时，浏览器会将这些选项显示为建议。
<output>: 表示计算或用户操作的结果。通常使用 JavaScript 填充。for 属性可以将其链接到涉及计算的输入元素。
<progress>: 显示任务进度。可以是确定性的（带有 value 和 max 属性）或不确定性的。
<meter>: 表示已知范围内的标量测量（一个仪表盘），例如磁盘使用情况或相关性得分。使用 value、min、max、low、high、optimum 等属性。

元素示例 (`datalist`、`output`)

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Form Elements</title>
</head>
<body>
  <form action="/process" method="get" oninput="result.value = parseInt(a.value) + parseInt(b.value)">
    <p>
      <label for="browser_choice">Choose your browser:</label>
      <input list="browsers" id="browser_choice" name="browser">
      <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Safari">
        <option value="Edge">
        <option value="Opera">
      </datalist>
    </p>
    <p>
      Calculate:
      <input type="number" id="a" name="a" value="5"> +
      <input type="number" id="b" name="b" value="5"> =
      <output name="result" for="a b">10</output>
      <!-- The oninput handler updates the output dynamically -->
    </p>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

表单验证

HTML5 基于输入类型和 required、pattern、min、max、minlength、maxlength 以及 type（例如，email、url）等属性提供了内置的客户端表单验证。

如果验证失败，浏览器通常会阻止表单提交并显示默认错误消息。你可以使用 CSS 伪类（:valid、:invalid、:required、:optional）和 JavaScript 约束验证 API（例如，element.validity、element.setCustomValidity('')）自定义外观和行为。

记住：客户端验证是用户体验的增强，而不是安全措施。 始终在服务器端重新验证提交的数据。