HTML Fieldset详解

发布时间：2023-05-23

一、Fieldset介绍

<fieldset> 是 HTML 中的一种标签，用于在表单中对相关元素进行分组。<fieldset> 包含一组相关的表单控件，并使用 <legend> 元素为此组指定标题。<label> 元素为每个控件定义标签（标注）。 使用 <fieldset> 可提高表单的可读性和可访问性，同时也有助于样式化表单、编写脚本和划分表单数据。 下面是一个简单的例子：

<fieldset>
  <legend>联系信息</legend>
  <label>姓名：<input type="text" name="name"></label>
  <label>电话：<input type="text" name="phone"></label>
  <label>邮箱：<input type="text" name="email"></label>
</fieldset>

二、使用Fieldset的好处

优势 1. 提高表单的可读性 使用 <fieldset> 元素可以将表单元素分组，并为此组元素提供一个标题。这种方式可以增强表单的可读性，让用户更容易理解表单元素所属的逻辑分组。 2. 提高可访问性 使用 <fieldset> 可以指定表单元素之间的逻辑关系，从而为辅助技术如屏幕阅读器提供更好的理解和解释。 3. 更易于样式化 使用 <fieldset> 和 <legend> 可以使表单看起来更专业、合理，有朝一日若需要调整表单的布局，修改 <fieldset> 及 <legend> 的样式就能快速完成。

三、Fieldset与表单元素

关系 在 <fieldset> 元素内可以放置任意类型的表单元素，如：<input>、<select>、<textarea> 以及 <button>。建议用 <label> 标签为每个表单元素定义标注，将 <label> 标签与相应的表单控件相关联。 一份简单的样例代码：

<fieldset>
  <legend>请填写以下信息</legend>
  <label>用户名：<input type="text" name="username"></label>
  <label>密码：<input type="password" name="password"></label>
  <br>
  <label><input type="radio" name="gender" value="male">男</label>
  <label><input type="radio" name="gender" value="female">女</label>
  <br>
  <label>住址：</label>
  <select name="address">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
  </select>
  <br>
  <label>个人描述：</label>
  <textarea name="description"></textarea>
</fieldset>

四、Fieldset与CSS样式

CSS样式 我们可以使用 CSS 对 <fieldset> 和 <legend> 进行样式的控制。 <fieldset> 元素可以单独设置一系列 CSS 属性，例如：边框颜色、宽度、形状等等。<legend> 元素也可设置类似的 CSS 属性，如：字体大小、颜色、位置等等。 样式示例：

<style>
  fieldset {
    border: 2px solid #333;
    border-radius: 5px;
  }
  legend {
    font-size: 20px;
    font-weight: bold;
  }
</style>

五、Fieldset与JavaScript操作

JS操作 为了使用 JavaScript 来操作 <fieldset> 和 <legend> 元素，我们需要首先获取它们的引用。 获取 <fieldset> 元素的引用：

var myFieldset = document.querySelector('fieldset');

获取 <legend> 元素的引用：

var myLegend = document.querySelector('fieldset legend');

也可以给 <fieldset> 和 <legend> 添加 ID 或类名，并通过 ID 或类名获取它们的引用。 获取 <fieldset> 元素的引用：

var myFieldset = document.getElementById('myFieldset');
var myFieldset = document.getElementsByClassName('myFieldset');

获取 <legend> 元素的引用：

var myLegend = document.getElementById('myLegend');
var myLegend = document.getElementsByClassName('myLegend');

通过获取 <fieldset> 和 <legend> 元素的引用，我们可以进行以下操作：

  • 在 <fieldset> 元素中添加、删除或替换元素
  • 修改 <legend> 元素的文本内容
  • 将 <fieldset> 元素和 <legend> 元素的样式与 JavaScript 动态调整

六、Fieldset与表单验证

表单验证 由于 <fieldset> 元素用于将表单元素分组，所以在进行表单验证时，我们可以将相关的验证规则应用于整个 <fieldset> 元素，而不是单独应用于每个表单元素。 例如，我们可以在 <fieldset> 元素上添加 required 属性，以指示每个元素都必须填写。或者，我们可以在 <fieldset> 元素上添加 pattern 属性，以指定正在验证的所有表单元素均应满足该模式。 示例代码：

<form>
  <fieldset>
    <legend>个人信息</legend>
    <label>姓名：<input type="text" name="username" required pattern="[A-Za-z]{3,10}" title="字母，长度3到10个字符"></label>
    <label>年龄：<input type="number" name="age" required min="18" max="60" step="1"></label>
    <label>邮箱：<input type="email" name="email" required></label>
  </fieldset>
  <button type="submit">提交</button>
</form>
推荐文章