HTML <fieldset> 标签

简介

在 HTML 中，<fieldset> 标签用于将表单元素进行分组。通常情况下，这些表单元素会被一条或多条边框包围起来，并且可以加上一个 <legend> 标签作为标题。

语法

<fieldset>
   <!-- Form elements -->
</fieldset>

其中，<!-- Form elements --> 部分是放置表单元素的地方，例如 <input>, <textarea>, <select> 等。

属性

  • disabled: 该属性使用时会禁用 fieldset 内所有的表单元素。

示例：

<fieldset disabled>
   <input type="text" name="username">
   <input type="password" name="pwd">
</fieldset>

在上述代码中，用户无法输入任何数据到 username 和 pwd 字段。

<legend> 标签

<legend> 标签可以放置在 <fieldset> 标签内部的第一个位置，用于为 fieldset 元素定义一个标题（caption）。

语法：

<fieldset>
   <legend>Title:</legend>
   <!-- Form elements -->
</fieldset>

示例：

<form action="/submit_form">
   <fieldset>
      <legend>个人信息:</legend>
      Name: <input type="text" name="username"><br>
      Email: <input type="email" name="useremail"><br>
      Date of Birth: <input type="date" name="dob">
   </fieldset>
</form>

在上述示例中，"个人信息:" 就是 <legend> 标签所定义的标题。

注意事项

  1. <fieldset> 和 <legend> 标签通常用于表单元素，但它们也可以在其他场景下使用。
  2. <fieldset> 不能嵌套在另一个 <fieldset> 中，因为 HTML5 规范并没有对此情况进行定义。
  3. <legend> 标签的内容是可以被点击的，一些浏览器会提供默认的焦点样式。如果你不希望用户能够通过点击 <legend> 来切换表单元素的状态，可以使用 CSS 或 JavaScript 进行禁止操作。

结论

HTML <fieldset> 标签提供了一种组织表单元素的便捷方式，同时还可以为这些元素添加一个清晰的标题。在编写 HTML 代码时，正确使用 <fieldset> 和 <legend> 标签可以提高网页的易读性和用户体验。