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>
範例結束
|