實施範例7

7.使用fieldset和legend元素為表單控件提供組合描述

這項技巧的目的是為分組的表單控件提供文字描述,讓用戶能了解控件項目之間的聯繫,也可以迅速和有效率地與表單互動。

有關聯的表單控件可利用fieldset元素來包圍和分組,而在該元素的第一個項目是legend元素,目的是為該分組控件提供標籤或指示。雖然可使用巢狀的分組形式,但過頭了時會引致混亂。

控件分組對單選按鈕和複選框尤其重要,因為同一組有關的單選鈕或複選框會以單一的名字欄位來提交數值。它們與選擇清單類同,讓用戶從不同的項目中選擇。但是選擇清單是單一控件,而單選鈕和複選框則有多個控件項目。因此在使用語義的分組形式後,這些控件可容易地被視為單一項目。

有時候,網頁程式員會避免使用fieldset元素,因為在默認的環境下,網頁瀏覽器會替分組的控件套上一個框線,然而這種視覺上的分組也是有用的,因此應該考慮保留,否則可以透過修改CSS來把框線隱藏。

範例︰

在個人檔案設定頁中,用戶可以在興趣組別的複選框中選擇多於一個項目。

範例代碼︰

<fieldset>
<legend>我對以下的項目感興趣(可選多於一項)︰</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">攝影照片</label><br />
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">水彩畫</label><br />
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">塑膠料油畫</label>

</fieldset>