12.6:H212105 在表單控制項上，以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>

範例結束