HTML 教程 / 选择电子邮件、数字、日期与选项输入类型

input 的 type 属性告诉浏览器该字段表示的值类型或选择。电子邮件地址、数量、日期值、复选框和单选按钮具有不同的行为。根据用户必须做出的数据和决策选择类型，而不仅仅是根据视觉外观。

根据数据选择输入类型

<form method="get">
  <p><label for="email">电子邮件地址</label>
     <input id="email" name="email" type="email"></p>
  <p><label for="quantity">数量</label>
     <input id="quantity" name="quantity" type="number" min="1"></p>
  <p><label for="visit-date">访问日期</label>
     <input id="visit-date" name="date" type="date"></p>
  <button type="submit">检查</button>
</form>

将示例保存为 HTML 文件并测试每个字段。email 可以在某些设备上提供基本的地址格式验证和适当的输入界面。number 可以与 min 一起指定最小值；date 的可见控件取决于浏览器和操作系统。服务器始终必须检查提交的日期是否对应用程序有效。

数量是一个可以进行计算的数字，但邮政编码可能有前导零，电话号码可能包含国家代码或标点符号。对于这些值，请使用 text 或 tel，而不是 number。询问值是否为数值数量，而不仅仅是询问其是否包含数字。

复选框还是单选按钮？

选择复选框以进行独立的是/否决策或多个独立选择。如果只能从一组选项中选择一个，请使用具有相同 name 的单选按钮。将组的命名与文章“使用 fieldset、legend 和自动完成功能使表单易于理解”中关于 fieldset 和 legend 的示例进行比较。

<fieldset>
  <legend>更新</legend>
  <label><input type="checkbox" name="news" value="yes"> 接收新闻</label>
</fieldset>
<fieldset>
  <legend>首选联系方式</legend>
  <label><input type="radio" name="contact" value="email"> 电子邮件地址</label>
  <label><input type="radio" name="contact" value="phone"> 电话</label>
</fieldset>

单选输入共享name="contact"，因此选择一个会取消另一个的选择。value是传递的值，它不必与可见标签一致。将这些组放入带有提交按钮的form中进行测试：未选中的news复选框不会加入任何名值对，而选择电子邮件地址会发送contact=email。如果您的应用需要区分明确的“否”和未作答，请在服务器端有意识地设计这种选择及其处理。

比较输入界面与提交的值

将完整示例保存为 visit.html，并使用测试地址 name@example.com。如果必填的单选组未作答，则会阻止提交，而可选的“新闻”选择会改变数据列表。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>字段类型练习</title>
</head>
<body>
  <h1>练习访问请求</h1>
  <form id="visit-form" method="get">
    <p><label for="visit-email">电子邮件地址</label>
      <input id="visit-email" name="email" type="email" required></p>
    <p><label for="visit-day">访问日期</label>
      <input id="visit-day" name="date" type="date" required></p>
    <p><label for="visit-quantity">数量</label>
      <input id="visit-quantity" name="quantity" type="number" min="1" step="1" value="1"></p>
    <fieldset>
      <legend>联系方式</legend>
      <label><input type="radio" name="contact" value="email" required> 电子邮件地址</label>
      <label><input type="radio" name="contact" value="phone"> 电话</label>
    </fieldset>
    <p><label><input type="checkbox" name="news" value="yes"> 新闻</label></p>
    <button type="submit">检查输入的值</button>
  </form>
</body>
</html>

选择一个日期，并在控制台中检查 document.getElementById("visit-day").value。选择2030年5月20日会得到 2030-05-20 格式的值，这与本地化日历的显示无关。然后选中和取消选中“新闻”，并使用下面的命令比较条目列表。

Array.from(new FormData(document.getElementById("visit-form")).entries())

MDN：日期字段值的格式

检查的不仅仅是类型

每个字段都始终需要一个易于理解的标签，如果其值需要提交，还需要一个 name。type="email" 字段可以留空，除非您也需要一个值；格式和必填是分开的规则。如果确实需要选择答案，您可以向一组单选按钮添加 required。测试浏览器提交的内容，并在服务器端验证重要的值。MDN 上的 输入元素参考 列出了支持的类型和限制。类型和必填、长度和范围是分开的；可通过表单验证：必填项、文本长度与数值范围逐项比较这些边界。