HTML | DOM 字段集表单属性

HTML表单是网页中收集用户信息的主要方式之一。在HTML中，可以使用字段集（fieldset）元素来对表单中的一组相关表单元素进行分组。在字段集元素中，可以使用以下属性来定制和控制表单中相关元素的行为和样式。

fieldset属性

fieldset元素支持以下属性：

• disabled - 禁用该字段集中的所有元素。
• form - 指定该字段集所属的表单元素。如果未指定，则该字段集所属的表单元素是最近的祖先表单元素。
• name - 指定该字段集的名称。

例如，以下代码展示了一个使用fieldset元素并设置其disabled属性的表单组：

<form>
  <fieldset disabled>
    <legend>用户信息</legend>
    <label>姓名: <input type="text"></label><br>
    <label>年龄: <input type="number"></label><br>
    <label>性别:
      <label><input type="radio" name="gender" value="male">男</label>
      <label><input type="radio" name="gender" value="female">女</label>
    </label><br>
  </fieldset>
</form>

legend属性

legend元素位于fieldset元素的最开始，用于定义字段集的标题。legend元素支持以下属性：

• align - 设置legend元素的对齐方式。取值可以为"left","center"或"right"。
• accesskey - 按下指定的访问键后，将设置焦点到legend元素。
• style - 内联样式。

例如，以下代码展示了一个带有legend元素和accesskey属性的表单组：

<form>
  <fieldset>
    <legend accesskey="u">用户信息</legend>
    <label>姓名: <input type="text"></label><br>
    <label>年龄: <input type="number"></label><br>
    <label>性别:
      <label><input type="radio" name="gender" value="male">男</label>
      <label><input type="radio" name="gender" value="female">女</label>
    </label><br>
  </fieldset>
</form>

总结

字段集属性和legend属性在HTML表单中非常有用，可以帮助我们清晰地组织表单的相关元素，使表单更具可读性和可用性。以上是它们的一些常见属性和用法，但并不是全部。我们可以适应实际情况，自由地使用它们的其他属性来满足我们的需求。