如何使用 HTML 为字段集指定名称？

在 HTML 表单中，可以使用字段集 (<fieldset>) 来将相关的表单元素分组。字段集通常包含一个标题 (<legend>) 和一组相关的表单元素。本文将介绍如何使用 HTML 为字段集指定名称。

使用 name 属性

为了在提交表单数据时能够正确识别字段集中的表单元素，可以使用 name 属性为字段集指定一个名称。这个名称会成为表单数据中的一个键，对应的值是字段集中包含表单元素的值。示例代码如下：

<form>
  <fieldset name="personal-info">
    <legend>个人信息</legend>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name"><br>
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age"><br>
  </fieldset>
  <fieldset name="contact-info">
    <legend>联系方式</legend>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email"><br>
    <label for="phone">电话：</label>
    <input type="tel" id="phone" name="phone"><br>
  </fieldset>
  <button type="submit">提交</button>
</form>

在这个例子中，分别为两个字段集指定了名称为 personal-info 和 contact-info。当用户提交表单时，如果输入了姓名、年龄、邮箱和电话，那么表单数据会包含这些键值对：

{
  "personal-info": {
    "name": "张三",
    "age": 18
  },
  "contact-info": {
    "email": "zhangsan@example.com",
    "phone": "13888888888"
  }
}

可以看到，字段集的名称成为了表单数据中的一个键，对应的值是包含表单元素的键值对对象。

总结

通过 name 属性为字段集指定名称，可以将相关的表单元素分组，并在提交表单数据时获得更加清晰的数据结构。