如何在 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 元素標題的第一種方法是使用 `` 標籤在 fieldset 外部。要為 fieldset 元素新增標題或頁首，請在 `

` 標籤外部使用 `` 標籤。label 標籤的 for 屬性應與 fieldset 標籤的 id 屬性匹配。

示例

在這裡，我們將逐步學習如何實現此方法 -

<!DOCTYPE html>
<html>
<head>
   <title>Example Form with Fieldset and Label</title>
</head>
<body>
   <form>
      <label for="personal-info">Personal Information</label>
      <fieldset id="personal-info">
         <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>

結論

在 fieldset 元素中使用標題或頁首是提供關於 fieldset 內包含的表單元件的上下文和資訊的一種有效方法。在 HTML 中有多種方法可以為 fieldset 元素新增標題，包括使用 legend 標籤、fieldset 外部的 label 標籤或 CSS 來設計 fieldset 和 legend。

Diksha Patro

更新於： 2023 年 3 月 24 日

929 次瀏覽

開啟你的職業生涯

透過完成課程獲得認證

開始學習

如何在 HTML5 中為 fieldset 元素定義標題

方法

方法 1：使用 `` 標籤

方法 2：在 fieldset 外部使用 `` 標籤

結論

開啟你的 職業生涯

開啟你的職業生涯