如何在 HTML 中显示字段集?

htmlweb developmentfront end technology更新于 2026/1/16 0:12:17

Fieldset 是 HTML 中的一个元素，用于对相关元素进行分组。如果表单字段按逻辑分组排列，将对用户有所帮助。

为了区分网页其他部分的外观，它会在相关元素周围添加边框。<lagend> 标签用于为 <fieldset> 定义标题。它支持全局属性和事件属性。它与所有浏览器兼容。

语法

以下是 HTML 中 fieldset 的用法/语法

<fieldset>....</fieldset>

fieldset 中使用的属性如下所示

fieldset 中的属性用于执行以下操作 −

disabled − 此属性指定应禁用的相关表单元素组。

<fieldset disabled>

form − form 是 fieldset 中使用的属性，用于指定当前 fieldset 属于哪个表单。

<fieldset form="form_id">

name − name 属性指定字段集的名称。

<fieldset name="text">

现在让我们通过不同的示例来更好地了解 HTML 中的字段集 −

示例

以下是创建字段集的示例 −

<!DOCTYPE html>
<html>
<body>
   <h1>Displaying the Fieldset</h1>
   <form action="/action_page.php">
      <fieldset>
         <legend>Profile Information:</legend>
         <label for="fname">First name:</label>
         <input type="text" id="fname" name="fname">
         <br>
         <br>
         <label for="lname">Last name:</label>
         <input type="text" id="lname" name="lname">
         <br>
         <br>
         <label for="email">Email:</label>
         <input type="email" id="email" name="email">
         <br>
         <br>
         <label for="birthday">Birthday:</label>
         <input type="date" id="birthday" name="birthday">
         <br>
         <br>
         <input type="submit" value="Submit">
      </fieldset>
   </form>
</body>
</html>

示例

以下是使用 CSS 创建文件集的另一个示例 −

<!DOCTYPE html>
<html>
<head>
   <style>
      fieldset {
         background-color: yellow;
      }

      legend {
         background-color: red;
         color: white;
         padding: 5px 10px;
      }

      input {
         margin: 5px;
      }
   </style>
</head>
<body>
   <h1>Demonstrating fieldset element applying CSS</h1>
   <form action="/action_page.php">
      <fieldset>
         <legend>Student Profile:</legend>
         <label for="fname">First name:</label>
         <input type="text" id="fname" name="fname">
         <br>
         <br>
         <label for="lname">Last name:</label>
         <input type="text" id="lname" name="lname">
         <br>
         <br>
         <label for="email">Email:</label>
         <input type="email" id="email" name="email">
         <br>
         <br>
         <label for="birthday">Birthday:</label>
         <input type="date" id="birthday" name="birthday">
         <br>
         <br>
         <input type="submit" value="Submit">
      </fieldset>
   </form>
</body>
</html>

示例

下面是另一个示例，我们在 HTML 中创建两个字段集 −

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Contact Us</title>
   <meta charset="utf-8">
   <style>
      legend {
         background-color: green;
         color: white;
         padding: 5px 10px;
      }
      #fieldset1 {
         width: 150px;
         height: 150px;
         border: 1px solid black;
         background-color: grey;
         margin: 1px;
         padding: 1px;
      }
      #fieldset2 {
         width: 150px;
         height: 150px border: 1px dotted black;
         background-color: violet;
         margin: 1px;
         padding: 1px;
      }
      /* width, border, background color, margin and padding */
   </style>
</head>
<body>
   <h2> Contact Us </h2>
   <form action="https://www.cainiaomax.com/index.html" method="post"">
      <fieldset id=" fieldset1">
         <legend>Submit button</legend>
         <br>
         <br>
         <center>
            <input type="submit" id="mySubmit" value="Submit">
         </center>
      </fieldset>
      <br>
      <br>
      <fieldset id="fieldset2">
         <legend>Reset button</legend>
         <br>
         <br>
         <center>
            <input type="reset" value="Reset">
         </center>
      </fieldset>
   </form>
</body>
</html>