無障礙網路空間服務網無障礙網路空間服務網

12.4:H212103 在表單控制項中,使用fieldset及legend標籤作群組間的區隔

不良設計

未使用FIELDSET標籤做表單控制項的區隔,使用者無法區隔表單中控制項的不同性質。

不良設計:

<FORM>
  <LEGEND>個人資料</LEGEND>
    <LABEL for="lastname">姓氏:</LABEL>
      <INPUT type="text" id="lastname" tabindex="1" value="輸入姓氏">
    <LABEL for="firstname">名字:</LABEL> 
      <INPUT type="text" id="firstname" tabindex="2" value="輸入名字">
        <!--...更多的個人資訊...-->
  <LEGEND>個人醫療紀錄</LEGEND>
        <!--...個人醫療記錄...-->
  </FORM>
          

正確示範

使用FIELDSET標籤做標單控制項的區隔,使用者可以輕易的區隔出表單控制項中的差異。

正確範例:

<FORM>
  <FIELDSET>
    <LEGEND>個人資料</LEGEND>
     <LABEL for="lastname">姓氏:</LABEL> 
       <INPUT type="text" id="lastname" tabindex="1" value="輸入姓氏">
     <LABEL for="firstname">名字:</LABEL> 
       <INPUT type="text" id="firstname" tabindex="2" value="輸入名字"> 
             <!--...更多的個人資訊...-->
 </FIELDSET>
 <FIELDSET>
   <LEGEND>個人醫療紀錄</LEGEND>
             <!--...個人醫療記錄...-->
 </FIELDSET>
</FORM>
          
網頁內容結束分隔線