HTML Fieldset詳解

Fieldset是HTML中的一種標籤，用於在表單中對相關元素進行分組。<fieldset>包含一組相關的表單控件，並使用<legend>元素為此組指定標題。<label>元素為每個控件定義標籤（標註）。

使用<fieldset>可提高表單的可讀性和可訪問性，同時也有助於樣式化表單、編寫腳本和劃分表單數據。

下面是一個簡單的例子：

      <fieldset>
        <legend>聯繫信息</legend>
        <label>姓名：<input type="text" name="name"></label>
        <label>電話：<input type="text" name="phone"></label>
        <label>郵箱：<input type="text" name="email"></label>
      </fieldset>
    

1. 提高表單的可讀性

使用<fieldset>元素可以將表單元素分組，並為此組元素提供一個標題。這種方式可以增強表單的可讀性，讓用戶更容易理解表單元素所屬的邏輯分組。

2. 提高可訪問性

使用<fieldset>可以指定表單元素之間的邏輯關係，從而為輔助技術如屏幕閱讀器提供更好的理解和解釋。

3. 更易於樣式化

使用<fieldset>和<legend>可以使表單看起來更專業、合理，有朝一日若需要調整表單的布局，修改<fieldset>及<legend>的樣式就能快速完成。

在<fieldset>元素內可以放置任意類型的表單元素，如：<input> 、<select>、<textarea> 以及<button> 。建議用<label>標籤為每個表單元素定義標註，將<label>標籤與相應的表單控件相關聯。

一份簡單的樣例代碼：

      <fieldset>
        <legend>請填寫以下信息</legend>
        <label>用戶名：<input type="text" name="username"></label>
        <label>密碼：<input type="password" name="password"></label>
        <br>
        <label><input type="radio" name="gender" value="male">男</label>
        <label><input type="radio" name="gender" value="female">女</label>
        <br>
        <label>住址：</label>
        <select name="address">
          <option value="bj">北京</option>
          <option value="sh">上海</option>
        </select>
        <br>
        <label>個人描述：</label>
        <textarea name="description"></textarea>
      </fieldset>
    

我們可以使用CSS對<fieldset>和<legend>進行樣式的控制。

<fieldset>元素可以單獨設置一系列CSS屬性，例如：邊框顏色、寬度、形狀等等。<legend>元素也可設置類似的CSS屬性，如：字體大小、顏色、位置等等。

樣式示例：

      <style>
        fieldset {
          border: 2px solid #333;
          border-radius: 5px;
        }
        legend {
          font-size: 20px;
          font-weight: bold;
        }
      </style>
    

為了使用JavaScript來操作<fieldset>和<legend>元素，我們需要首先獲取它們的引用。

獲取<fieldset>元素的引用：

      var myFieldset = document.querySelector('fieldset');
    

獲取<legend>元素的引用：

      var myLegend = document.querySelector('fieldset legend');
    

也可以給<fieldset>和<legend>添加ID或類名，並通過ID或類名獲取它們的引用。

獲取<fieldset>元素的引用：

      var myFieldset = document.getElementById('myFieldset');
      var myFieldset = document.getElementsByClassName('myFieldset');
    

獲取<legend>元素的引用：

      var myLegend = document.getElementById('myLegend');
      var myLegend = document.getElementsByClassName('myLegend');
    

通過獲取<fieldset>和<legend>元素的引用，我們可以進行以下操作：

• 在<fieldset>元素中添加、刪除或替換元素
• 修改<legend>元素的文本內容
• 將<fieldset>元素和<legend>元素的樣式與JavaScript動態調整

由於<fieldset>元素用於將表單元素分組，所以在進行表單驗證時，我們可以將相關的驗證規則應用於整個<fieldset>元素，而不是單獨應用於每個表單元素。

例如，我們可以在<fieldset>元素上添加required屬性，以指示每個元素都必須填寫。或者，我們可以在<fieldset>元素上添加pattern屬性，以指定正在驗證的所有表單元素均應滿足該模式。

示例代碼：

      <form>
        <fieldset>
          <legend>個人信息</legend>
          <label>姓名：<input type="text" name="username" required pattern="[A-Za-z]{3,10}" title="字母，長度3到10個字符"></label>
          <label>年齡：<input type="number" name="age" required min="18" max="60" step="1"></label>
          <label>郵箱：<input type="email" name="email" required></label>
        </fieldset>
        <button type="submit">提交</button>
      </form>