HTML fieldset标记

<fieldset> 是HTML中被用来组织表单内容的标记. 这个标记使开发人员能够将表单元素组合在一起并为它们创建可视化边框.

基本使用

<fieldset> 标记用于在表单中组织相关表单元素. 仅仅包含在<fieldset>标记内部的表单元素会被组织在一起，并继承其样式。可以使用类或者ID属性为 <fieldset> 标记设置样式。下面是一个基本的例子:

<form>
  <fieldset>
    <legend>基本信息</legend>
    <label>姓名：
      <input type="text" name="name" required>
    </label>
    <label>电子邮件：
      <input type="email" name="email" required>
    </label>
  </fieldset>
</form>

在这个例子中， <fieldset> 标记包含了两个 <label> 标记，这两者的表单元素都被包含在内。通过使用 <legend> 标记，可以为 <fieldset> 标记添加一个标题。这里展示的所有表单元素都在同一个字段集中，并共享相同的样式。

fieldset的属性

• align: 设置
  元素中的内容水平对齐方式。

<fieldset align="center">
  <legend>注册信息</legend>
  <label>用户名：
    <input type="text" name="username" required>
  </label>
  <label>密码：
    <input type="password" name="password" required>
  </label>
  <button type="submit">注册</button>
</fieldset>

• disabled: 禁用
  标记中的所有表单元素。

<form>
  <fieldset disabled>
    <legend>启用/禁用字段</legend>
    <label>姓名：
      <input type="text" name="name" required>
    </label>
    <label>电子邮件：
      <input type="email" name="email" required>
    </label>
  </fieldset>
  <button type="submit">提交</button>
</form>

• form: 定义
  元素所属的表单。

<form id="myForm">
  <fieldset form="myForm">
    <legend>选择您要的产品</legend>
    <label>
      <input type="checkbox" name="product" value="product1"> 产品1
    </label>
    <label>
      <input type="checkbox" name="product" value="product2"> 产品2
    </label>
  </fieldset>
</form>

• name: 为
  元素定义名称。

<form>
  <fieldset name="user-info">
    <legend>用户信息</legend>
    <label>姓名：
      <input type="text" name="name" required>
    </label>
    <label>电子邮件：
      <input type="email" name="email" required>
    </label>
  </fieldset>
  <button type="submit">提交</button>
</form>

总结

<fieldset> 标记是HTML表单中一个非常有用的工具，可以将表单元素组织在一起并为其创建边框。还可以使用类或ID属性为其设置样式，并使用属性来更改其行为。

参考

HTML: