如何使用HTML將表單中的相關元素分組？

在為網站設計表單時，務必考慮使用者體驗，並使使用者儘可能輕鬆地填寫表單。一種方法是將相關元素組合在一起，以便使用者可以快速掃描並填寫表單。在這篇博文中，我們將討論如何使用HTML將表單中的相關元素分組。

什麼是HTML表單中的分組？

HTML表單中的分組涉及將相關的表單元素組合在一起，例如單選按鈕、複選框和文字輸入欄位。透過將相關元素組合在一起，您可以使使用者更容易理解表單的結構並更有效地完成表單。

HTML 提供了幾種將相關表單元素組合在一起的方法。一些最常用的方法包括使用`

`和``標籤，以及使用標籤對元素進行分組。

方法一：使用 Fieldset 和 Legend 標籤

`

`和``標籤通常一起使用來分組相關的表單元素。`
`標籤用於將一組相關的表單控制元件組合在一起，而``標籤則為該組提供標題或說明。

示例

以下是如何使用`

`和``標籤將單選按鈕組合在一起的示例：

<form>
   <fieldset>
      <legend>Preferred Contact Method:</legend>
      <input type="radio" id="contact-phone" name="contact-method" value="phone">
      <label for="contact-phone">Phone</label><br>
      <input type="radio" id="contact-email" name="contact-method" value="email">
      <label for="contact-email">Email</label><br>
      <input type="radio" id="contact-mail" name="contact-method" value="mail">
      <label for="contact-mail">Mail</label><br>
   </fieldset>
</form>

在這個例子中，`

`標籤將三個單選按鈕組合在一起，``標籤為該組提供了一個標題（“首選聯絡方式”）。這使使用者清楚地知道這些單選按鈕是相關的，在填寫表單時應將其視為一個組。

方法二：使用標籤對元素進行分組

將相關表單元素組合在一起的另一種方法是使用標籤。在HTML中，`

示例

以下是如何使用標籤將複選框組合在一起的示例：

<form>
   <label for="check-fruit">Select your favorite fruit:</label><br>
   <input type="checkbox" id="check-fruit" name="fruit" value="apple">
   <label for="check-fruit">Apple</label><br>
   <input type="checkbox" id="check-fruit" name="fruit" value="banana">
   <label for="check-fruit">Banana</label><br>
   <input type="checkbox" id="check-fruit" name="fruit" value="orange">
   <label for="check-fruit">Orange</label><br>
</form>

在這個例子中，每個複選框都使用“for”屬性與一個標籤關聯。文字標籤顯示在複選框旁邊，使使用者清楚地知道這些複選框是相關的，在填寫表單時應將其視為一個組。

方法三：使用 Div 標籤

您還可以使用`

`標籤將相關的表單元素組合在一起。這種方法比使用`
`和``標籤提供了更大的靈活性，但是需要更多工作來設定表單元素的樣式。

示例

以下是如何使用`

`標籤對錶單元素進行分組的示例：

<form>
   <div>
      <label for="firstName">First Name:</label>
      <input type="text" id="firstName" name="firstName">
   </div>
   <div>
      <label for="lastName">Last Name:</label>
      <input type="text" id="lastName" name="lastName">
   </div>
   <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
   </div>
   <div>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password">
   </div>
   <div>
      <label for="confirmPassword">Confirm Password:</label>
      <input type="password" id="confirmPassword" name="confirmPassword">
   </div>
   <div>
      <label for="dob">Date of Birth:</label>
      <input type="date" id="dob" name="dob">
   </div>
   <div>
      <input type="submit" value="Submit">
   </div>
</form>

在這個例子中，每個表單元素都用`

`標籤包裝。您可以應用樣式到`
`標籤以視覺上將相關元素組合在一起。例如，您可以給每個`
`新增邊框、背景顏色或填充以使其脫穎而出。

要設定表單元素本身的樣式，您可以使用CSS選擇器來定位特定的輸入型別或ID。以下是如何設定上面示例中``元素樣式的示例：

<style>
   input[type="text"], input[type="email"], input[type="password"], input[type="date"] {
      display: block;
      width: 100%;
      padding: 0.5rem;
      border: 1px solid #ccc;
      border-radius: 0.25rem;
      margin-bottom: 1rem;
   }
</style>

此CSS規則為表單中的所有``元素設定標準樣式。`display: block`屬性使每個輸入元素佔據其容器（在本例中為`

`標籤）的全部寬度。`width`、`padding`、`border`和`border-radius`屬性控制輸入欄位本身的外觀。最後，`margin-bottom`屬性在每個輸入欄位之間新增一些空間，使表單更易於閱讀。

總的來說，使用`

`標籤將相關的表單元素組合在一起可以更好地控制表單的外觀和佈局。但是，它需要更多工作來設定每個表單元素的樣式。

方法四：設定分組標籤樣式

在對錶單元素進行分組時，為每個組提供清晰且不同的標籤非常重要。這有助於使用者快速掃描表單並理解元素之間的關係。除了使用`

`和``標籤之外，您還可以設定與每個組關聯的標籤的樣式，以使其在視覺上更清晰。

設定分組標籤樣式的一種方法是使用CSS應用背景顏色或邊框。例如：

<style>
   fieldset {
      border: 1px solid #ccc;
      padding: 10px;
   }
   legend {
      background-color: #f2f2f2;
      padding: 5px;
      font-weight: bold;
   }
</style>

在這個例子中，`

`標籤被賦予邊框和填充，以將其與表單上的其他元素在視覺上分開。``標籤的樣式設定了背景顏色、填充和粗體字型，使其作為組的標籤脫穎而出。

您還可以使用CSS將其他樣式應用於分組標籤，例如字型大小、字型粗細和文字對齊方式。例如：

<style>
   legend {
      font-size: 1.2em;
      font-weight: bold;
      text-align: center;
   }
</style>

此示例將字型大小設定為1.2em，加粗文字，並在``標籤內居中。

在處理包含多組相關元素的長表單時，設定分組標籤樣式尤其有用。透過對每個分組標籤應用不同的樣式，您可以建立一個視覺層次結構，幫助使用者更輕鬆地瀏覽表單。

使用網格系統

分組相關表單元素的另一種方法是使用網格系統。許多前端框架和CSS庫都提供網格系統，允許您建立更結構化和組織良好的表單佈局，易於閱讀和導航。

網格系統通常基於一系列用於在頁面上佈置元素的列和行。每列都有固定的寬度，元素放置在列中以建立網格狀結構。

一個流行的網格系統是Bootstrap，它提供一個12列的網格，可用於建立各種不同的佈局。要將Bootstrap網格系統用於表單佈局，您可以將每一組相關的表單元素用一個類名為“row”的`

`標籤包裝，然後使用Bootstrap網格類將該行劃分為列。例如：

示例

<div class="row">
   <div class="col-md-6">
      <label for="first-name">First Name:</label>
      <input type="text" id="first-name" name="first-name">
   </div>
   <div class="col-md-6">
      <label for="last-name">Last Name:</label>
      <input type="text" id="last-name" name="last-name">
   </div>
</div>

在這個例子中，“名字”和“姓氏”的表單元素用一個類名為“row”的`

`標籤包裝。然後使用“col-md-6”類將該行劃分為兩列，該類指定每列應占用中等大小螢幕上12個可用列中的6個。

透過使用網格系統，您可以建立一個更組織化、更美觀的表單佈局，方便使用者導航。但是，必須記住，並非所有使用者都熟悉網格佈局，因此您還應該為每一組表單元素提供清晰且不同的標籤。

結論

在HTML中分組相關的表單元素是建立使用者友好且易於訪問的Web表單的重要方面。它幫助使用者理解表單的目的，並使其更容易導航和完成。在這篇博文中，我們探討了分組表單元素的不同方法，包括使用`

`和``標籤、`
`標籤以及語義HTML5標籤，如`
`、`
`和`
`。我們還討論了使用CSS、網格系統和JavaScript設定和組織分組表單元素樣式的不同方法。

更新於：2023年8月7日

瀏覽量：563

開啟您的職業生涯

完成課程獲得認證

開始
廣告
© . All rights reserved.