HTML | <fieldset> 名称属性

在 HTML 中，可以使用 <fieldset> 元素来创建一个包含相关表单字段的组合。而 <fieldset> 元素的名称属性则用于为该组合字段集添加一个可视化的标题。

语法

要为 <fieldset> 元素添加名称属性，可以将其添加为该元素的第一个子元素。具体的语法如下：

<fieldset>
  <legend>字段集标题</legend>
  <!-- 其他表单字段 -->
</fieldset>

注意，包含在 <fieldset> 元素中的每个表单字段都会被包围在一个特定的边界内，以提供一种在视觉上将相关字段分组的方式。

例子

下面的示例演示了如何使用 <fieldset> 元素的名称属性来创建一个字段集合并为其添加标题：

<form>
  <fieldset>
    <legend>用户信息</legend>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">邮件:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password">
  </fieldset>

  <fieldset>
    <legend>选择爱好</legend>
    <input type="checkbox" id="hobby1" name="hobby1" value="reading">
    <label for="hobby1">阅读</label><br><br>
    <input type="checkbox" id="hobby2" name="hobby2" value="cooking">
    <label for="hobby2">烹饪</label><br><br>
    <input type="checkbox" id="hobby3" name="hobby3" value="sports">
    <label for="hobby3">运动</label>
  </fieldset>
</form>

在上述示例中，我们创建了两个字段集。第一个字段集包含了用户的姓名、邮箱和密码字段，而第二个字段集包含了选择爱好的复选框字段。每个字段集都带有一个标题，分别是 "用户信息" 和 "选择爱好"。

效果

上述示例通过使用 <fieldset> 元素的名称属性为表单字段添加了可视化的标题，并且将相关的字段分组在一起。这样可以提高用户界面的可读性和用户体验。

下面是上述示例的效果：

总结

使用名称属性为 <fieldset> 元素添加标题可以让用户更加清晰地了解到表单字段的用途或分组情况。在复杂的表单中，使用 <fieldset> 元素可以提高可读性和用户友好性，并且使表单更加易于填写和提交。