二十一 Forms 可用性

Forms对残疾用户来说并不是最容易的东西，写满内容页面的导航算一个，form区域和输入信息之间是另外一个。所以对form增加一些元素是个非常好的办法。

Labels 标志

每个form 区域应该有它们自己的label。使用label标签分类，使用for属性联合label与form的元素。

<form>
<label for="yourName">Your Name</label> <input type="text" name="yourName" id="yourName" />

...

点击浏览器显示的label区域，焦点便会跑到label联合的form区域。

注意：name和id都必须有。name用来操作form区域，而id用来联系label。

Field sets and legends

你可以为区域建组，比如，名字（姓，名，中间，标题等待）或者地址（第一行，第二行，国家，邮政编码等等）。使用fieldset标签。

在field set里面可以使用legend建legend。

注意：浏览器使用边框包围field sets，而legends打破左边或上面的边框。

<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组

optgroup标签用来为select箱子里的options编组。它需要label属性，显示的值在下拉列表里每个组的顶部，不可被选择。

<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>

导航区域

像链接一样，form fields（和field sets）需要在没有指向装置（比如鼠标）时导航。和链接的做法一样，使用form元素——tab stops和access keys

accesskey和tabindex属性运用到form标签上，比如input和legend标签。

<input type="text" name="firstName" accesskey="f" tabindex="1" />