如何使用 HTML <fieldset> 标签-之路教程

←如何使用 HTML accept 接受属性

如何在 HTML5 中的 <select> 元素上使用“required”属性→

为什么我们需要 <fieldset> 标签

<fieldset> 标签允许我们将表单分成多个逻辑部分。
在浏览器中，内容周围会显示一个框。
这是创建具有相同目的（样式和语义）的小部件组的简单方法。

该标签的重要性通常取决于它对辅助技术的影响，这使得 <fieldset> 标签成为创建可访问表单的关键元素之一。

每当我们有一些单选按钮时，我们必须将它们嵌套在 <fieldset> 中。
还有其他用例，例如此元素可用于分割表单。
如果表单很长，应该在一个页面上，请将不同的相关部分放在不同的 <fieldset> 元素中，这将提高可用性。

如何使用 HTML <fieldset> 标签

<fieldset> 标签的使用

<fieldset> 标签用于对 <form> 标签中的一些逻辑相关的字段进行可视化分组。

在本教程中，我们将找到一些使用 <fieldset> 标签的例子，并找出我们为什么需要这个标签。

在下面的示例中，我们将 <fieldset> 元素放在 <form> 标记中。
在 <fieldset> 中，我们添加了 <legend>、<input> 和 <label> 元素。

使用 <fieldset> 标签的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Book</legend>
        <input type="radio" name="book" value="html" id="book_html">
        <label for="book_html">HTML</label>
        <input type="radio" name="book" value="css" id="book_css">
        <label for="book_css">CSS</label>
        <input type="radio" name="book" value="javascript" id="book_javascript">
        <label for="book_javascript">Javascript</label>
      </fieldset>
    </form>
  </body>
</html>

要标记 <fieldset>，使用 <legend> 标签。
<legend> 的内容描述了 <fieldset> 的用途，其中包含它。

其中每个单选按钮都有标签，并且还为整个组提供了一个标签。
这在使用辅助技术的情况下尤为重要。

让我们看另一个例子，我们添加一些 CSS 用于样式目的。

将 <fieldset> 标记与某些 CSS 属性一起使用的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      fieldset {
        background: #abffb3;
      }
      legend {
        padding: 20px 0;
        font-size: 20px;
      }
      div {
        margin-bottom: 10px;
      }
      label {
        display: inline-block;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Personal Information:</legend>
        <div>
          <label>Name:</label>
          <input type="text">
        </div>
        <div>
          <label> Surname:</label>
          <input type="text">
        </div>
        <div>
          <label>Date of birth:</label>
          <input type="number">
        </div>
      </fieldset>
    </form>
  </body>
</html>

在上面的示例中，我们为 <div> 指定了 margin-bottom 属性，并为 <label> 元素设置了 display 和 width 属性。

日期：2020-06-02 22:15:13 来源：oir作者：oir