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

12.6:H212005 在表單控制項上,以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>
網頁內容結束分隔線