HTML <fieldset> 标签

<fieldset> 标签用于将表单中的一组相关元素进行分组，并为这组元素创建一个边框。

语法

<fieldset>
  <!-- 表单元素 -->
</fieldset>

属性

• disabled: 规定 <fieldset> 元素应该被禁用（不可编辑）。
• form: 规定 <fieldset> 元素所属的表单。
• name: 规定 <fieldset> 元素的名称。

示例

// www.javascriptcn.com code example
<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="phone">电话:</label>
    <input type="tel" id="phone" name="phone"><br><br>
  </fieldset>
</form>

在上面的示例中，<fieldset> 标签将姓名、邮箱和电话这三个输入框元素分组在一起，并添加了一个标题 "个人信息"。这样可以通过视觉上的边框分隔，使表单更加清晰易读。

<legend> 标签用于为 <fieldset> 元素添加标题，一般位于 <fieldset> 开始标签之后，结束标签之前。

注意事项

• <fieldset> 元素的内容应该包括一个 <legend> 元素，用于为 <fieldset> 元素添加标题。
• <fieldset> 元素可以包含任意表单元素，如输入框、复选框、单选框等。
• <fieldset> 元素在页面中会显示为一个矩形框，可以通过 CSS 样式来自定义边框样式和颜色。