HTML教程-HTML<fieldset>标签

作者: 鱼丸

时间: 2023-06-07

分类: HTML教程

HTML <fieldset>标签用于将HTML表单中的逻辑相关字段/标签进行分组。

在创建HTML表单时，使用该标签是可选的，但使用<fieldset>可以更容易地理解表单中分组元素的目的。

<legend>标签与<fieldset>元素一起使用，作为第一个子元素，用于定义分组相关字段的标题。

语法

<fieldset>.....</fieldset>

以下是关于HTML <fieldset>标签的一些规范：

显示	块级元素
起始标签/结束标签	都有起始和结束标签
用途	结构化（在HTML表单内）

示例 1

<!DOCTYPE html>
<html>
<head>
  <title>fieldset Tag</title>
  <style>
    p {
      color: #db7093;
      margin-left: 440px;
      font-size: 40px;
      font-weight: bold;
    }
    form {
      color: white;
      width: 600px;
      height: 300px;
      margin: auto;
      margin-top: 30px;
    }
    div {
      background-color: #28455e;
    }
    .tx {
      margin-left: 20px;
    }
  </style>
</head>
<body>
  <h1>Example of fieldset Tag</h1>
  <p>User Feedback Form</p>
  <div>
    <form class="wd">
      <fieldset class="wd">
        <legend>User basic information:</legend>
        <label>First Name<br>
        <input type="text" name="fname"><br>
        <label>Last Name<br>
        <input type="text" name="lname"><br>
        <label>Enter Email<br>
        <input type="email" name="email"><br><br>
      </fieldset><br>
      <label class="tx">Enter your feedback:<br>
      <textarea class="tx" cols="30"></textarea><br><br>
      <input class="tx" type="Submit"><br>
    </form>
  </div>
</body>
</html>

属性

HTML5中新增的属性。

标签特定属性

属性	值	描述
disabled	disabled	指定`<fieldset>`元素内的所有表单控件都被禁用。
form	form_id	指定与`<fieldset>`控件相关的一个或多个表单。
name	text	指定与`<fieldset>`关联的名称。在浏览器中不会显示，可用于JavaScript中。

全局属性

HTML <fieldset>标签支持HTML中的全局属性。

事件属性

HTML <fieldset>标签支持HTML中的事件属性。

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
`<fieldset>`	是	是	是	是	是