Labels - 標簽
每個表單的元素都應該有它自己的label。label
標簽,可以使用for
屬性連接一個label和表單元素。
<form>
<label for="yourName">Your Name</label>
<input type="text" name="yourName" id="yourName" />
...
標簽可以被可視化瀏覽器渲染成可以點擊的,點擊后光標會顯示在關聯(lián)的表單元素內(nèi)。
效果:
注:name
和id
都是需要的,name
是由表單處理用,而id
是給label做連接用。
Field sets and legends - 分組信息和標題
你能夠分組不同的元素,比如說基本信息(姓氏、名字、職位等)或者聯(lián)系信息(地址、城市、郵編、國家等),使用fieldset
標簽可以實現(xiàn)。
在一個組內(nèi),你可以用legend
標簽來設置一個標題。
注:可視化瀏覽器把fieldset渲染為帶邊框的,legend一般顯示在左上角。
<form action="somescript.php" >
<fieldset>
<legend>Name</legend>
<p>First name <input type="text" name="firstName" /></p>
<p>Last name <input type="text" name="lastName" /></p>
</fieldset>
<fieldset>
<legend>Address</legend>
<p>Address <textarea name="address" ></textarea></p>
<p>Postal code <input type="text" name="postcode" /></p>
</fieldset>
...
效果:
Option groups - 選項組
optgroup
標簽可以給select元素的options分類。需要使用一個label
屬性,在可視化瀏覽器里,它的屬性值會在下拉列表(select)里顯示為一個不可選的、縮進標題。
<select name="country">
<optgroup label="Africa">
<option value="gam">Gambia</option>
<option value="mad">Madagascar</option>
<option value="nam">Namibia</option>
</optgroup>
<optgroup label="Europe">
<option value="fra">France</option>
<option value="rus">Russia</option>
<option value="uk">UK</option>
</optgroup>
<optgroup label="North America">
<option value="can">Canada</option>
<option value="mex">Mexico</option>
<option value="usa">USA</option>
</optgroup>
</select>
效果:
Navigating fields - 表單內(nèi)的導航
和鏈接一樣,在沒有光標設備(如鼠標)的情況下,表單元素、組也可以自由導航。對于表單內(nèi)的導航,也可以使用和鏈接一樣的方法,tab導航和快捷鍵。
accesskey
和tabindex
屬性可以添加到每個獨立的表單標簽上,比如input
,甚至是legend
標簽。
<input type="text" name="firstName" accesskey="f" tabindex="1" />