如何在 HTML5 中为 fieldset 元素定义标题


在开发 HTML 表单时,为用户提供关于表单目的和收集数据的清晰简单信息至关重要。一种方法是在 fieldset 元素中添加标题或标题,fieldset 元素是链接表单组件的集合。标题或页眉提供了关于 fieldset 内包含的表单组件的上下文和信息,使用户能够理解正在询问哪些信息以及如何正确填写表单。

方法

在 HTML 中有多种方法可以为 fieldset 元素添加标题。以下是一些可能性 -

  • 使用 `` 标签

  • 在 fieldset 外部使用 `

现在让我们详细了解每种方法并举例说明。

方法 1:使用 `` 标签

在 HTML5 中定义 fieldset 元素标题的第一种方法是使用 `` 标签。要为 fieldset 元素添加标题或页眉,请在打开的 `

` 标签内使用 `` 标签。包含在 `` 标签中的文本将显示在 fieldset 内包含的表单组件的上方。

示例

在这里,我们将逐步学习如何实现此方法 -

<!DOCTYPE html>
<html>
<head>
   <title>Example Form with Fieldset and Legend</title>
</head>
<body>
   <form>
      <fieldset> 
         <legend>Personal Information</legend>
         <label for="name">Name:</label>
         <input type="text" id="name" name="name">
         <br>
         <label for="email">Email:</label>
         <input type="email" id="email" name="email">
      </fieldset>
      <br>
      <input type="submit" value="Submit">
   </form>
</body>
</html> 

方法 2:在 fieldset 外部使用 `

在 HTML5 中定义 fieldset 元素标题的第一种方法是使用 `

` 标签外部使用 `