HTML 教程 / 使用 fieldset、legend 和 autocomplete 组织表单

使用 fieldset 将相关的表单元素分组，并使用 legend 指定组的问题。对于姓名或电子邮件地址等字段，可以使用适当的 autocomplete 标记值让浏览器知道该字段请求的信息。

使用 fieldset 和 legend 汇总一个问题

各个选项按钮的标签描述了答案，但用户还需要知道这些答案对应的问题。legend 提供了这个组名。可在选择电子邮件、数字、日期与选项输入类型中比较单选按钮、复选框及未选中的控件。

<fieldset>
  <legend>我们如何联系您？</legend>
  <label><input type="radio" name="contact" value="email"> 电子邮件</label>
  <label><input type="radio" name="contact" value="phone"> 电话</label>
</fieldset>

在浏览器中打开示例：默认情况下，可能会显示一个框架和一个标签。CSS 可以更改此显示，而不会移除其关系。两个单选按钮共享 name="contact"，因此选择一个选项会取消选择另一个选项。对于另一个问题，使用单独的 fieldset 和不同的单选按钮组名；否则，在一个问题中选择某个答案可能会取消另一个问题的选择。

描述具有自动完成的输入字段的目标

<form action="/contact" method="post">
  <fieldset>
    <legend>联系方式</legend>
    <label for="full-name">全名</label>
    <input id="full-name" name="full_name" autocomplete="name">
    <label for="email">电子邮件地址</label>
    <input id="email" name="email" type="email" autocomplete="email">
  </fieldset>
  <button type="submit">发送</button>
</form>

autocomplete="name" 和 autocomplete="email" 描述了字段的目标。它们不会设置固定值，也不会以用户名义传递信息。建议的存在取决于浏览器设置和已保存的信息。属性 name 是提交数据使用的键名；标记值 autocomplete 是对输入预期用途的提示。/contact 是一个示例路径，需要服务器端处理程序。自动填充目标不能替代 正确关联 label 与 input 中描述的标签与 ID 的匹配。

测试独立的组和输入目标

将其保存为 groups.html 并选择电子邮件和上午。两个选项应同时存在，因为组使用不同的名称值。

<!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="groups-form" method="get">
    <fieldset>
      <legend>联系方式</legend>
      <label><input type="radio" name="contact" value="email" required> 电子邮件</label>
      <label><input type="radio" name="contact" value="phone"> 电话</label>
    </fieldset>
    <fieldset>
      <legend>访问时间</legend>
      <label><input type="radio" name="visit" value="morning" required> 上午</label>
      <label><input type="radio" name="visit" value="afternoon"> 下午</label>
    </fieldset>
    <button type="submit">检查两个答案</button>
  </form>
</body>
</html>

暂时将访问组的两个选项字段中的 name="visit" 替换为 name="contact"。如果选择一个答案，另一个问题的选择会被取消：相同的 name 定义了单选组。比较后恢复 name="visit"。

选择一个与所请求信息匹配的标记值。autocomplete="postal-code" 不会验证邮政编码格式，并且在没有保存信息的浏览器中可能无法显示建议。

检查分组和自动完成

不要在同一个字段集中放置与主题无关的问题，也不要在没有组名的情况下分布单选题。请使用定义的 autocomplete 代替任意词语。测试两个独立的选项组：如果第二组中选择某个答案会取消第一组的选择，则它们的 name 值很可能意外相同。自动填充功能不会检查用户数据，收集个人数据的表单始终需要适当的安全和隐私实践。请参阅参考 MDN autocomplete 以及参考 fieldset。