跳到主要內容
:::|

12.6:H212005 在表單控制項上,以label標籤提示資訊

說明: 由於表單可以讓使用者傳達與網頁伺服器溝通的資訊,因此必須在表單控制項上,以LABEL標籤標示提示資訊,亦即必須明確顯示表單的控制項與控制項說明之間的關聯性。以便身心障礙者了解表單控制項與控制項說明。

範例: 在表單中使用LABEL標籤設定表單內容的提示資訊,有利使用者對於表單內容的辨別。下列不良設計未使用LABEL標籤,讓人無法辨別在表單中該填入何種資訊。

不良設計

不良設計:

 < FORM > 
   < INPUT value="請輸入您的姓名" >  < BR > 
 < FIELDSET > 
   < LEGEND > 性別 < /LEGEND > 
     < INPUT name="sex" type="radio" id="male" checked > 
       < LABEL for="male" > 男性 < /LABEL > 
     < INPUT type="radio" name="sex" id="female" > 
       < LABEL for="female" > 女性 < /LABEL > 
 < /FIELDSET >  < BR > 
   < SELECT > 
     < OPTION selected > 奧迪 < /OPTION > 
     < OPTION > 賓士 < /OPTION > 
     < OPTION > 寶馬 < /OPTION > 
     < /SELECT >  < BR > 
     < INPUT type="password" id="pwd" value="00000" size="10" >  < BR > 
     < TEXTAREA rows="10" cols="30" id="com" > 請輸入您的寶貴建議 
     < /TEXTAREA >  
     < BR > 
   < INPUT type="submit" value="送出" >
   < INPUT type="reset" value="重寫" > 
 < /FORM > 

正確示範

在表單中使用LABEL標籤設定表單控制項中的提示資訊,使用者可以在各個表單控制項中填入適當的資訊。

正確範例:

 < FORM > 
   < LABEL for="name" > 姓名: < /LABEL > 
      < INPUT id="name" value="請輸入您的姓名" >  < BR > 
   < FIELDSET > 
   < LEGEND > 性別 < /LEGEND > 
     < INPUT name="sex" type="radio" id="male" checked > 
       < LABEL for="male" > 男性 < /LABEL > 
     < INPUT type="radio" name="sex" id="female" > 
       < LABEL for="female" > 女性 < /LABEL > 
   < /FIELDSET >   < BR > 
   < LABEL for="tcar" > 汽車廠牌: < /LABEL > 
     < SELECT id="tcar" > 
       < OPTION selected > 奧迪 < /OPTION > 
       < OPTION > 賓士 < /OPTION > 
       < OPTION > 寶馬 < /OPTION > 
       < /SELECT >  < BR > 
   < LABEL for="pwd" > 密碼 < /LABEL > 
   < INPUT type="password" id="pwd" value="00000" size="10" >  < BR > 
   < LABEL for="com" > 建議: < /LABEL >  < BR > 
     < TEXTAREA rows="10" cols="30" id="com" > 請輸入您的寶貴建議 
     < /TEXTAREA > 
     < BR > 
     < INPUT type="submit" value="送出" > 
     < INPUT type="reset" value="重寫" > 
 < /FORM > 

上一頁| 回首頁