语义化------表单

原文：Accessible Forms :: HtmlDog.com

作者：Patrick Griffiths

译者：JunChen Wu

Labels - 标签

每个表单的元素都应该有它自己的label。label标签，可以使用for属性连接一个label和表单元素。

1. <form>
2. <label for="yourName">Your Name</label>
3. <input type="text" name="yourName" id="yourName" />
4. ...

 

标签可以被可视化浏览器渲染成可以点击的，点击后光标会显示在关联的表单元素内。

效果：

Your Name

注：name和id都是需要的，name是由表单处理用，而id是给label做连接用。

Field sets and legends - 分组信息和标题

你能够分组不同的元素，比如说基本信息（姓氏、名字、职位等）或者联系信息（地址、城市、邮编、国家等），使用fieldset标签可以实现。

在一个组内，你可以用legend标签来设置一个标题。

注：可视化浏览器把fieldset渲染为带边框的，legend一般显示在左上角。

1. <form action="somescript.php" >
2. <fieldset>
3. <legend>Name</legend>
4. <p>First name <input type="text" name="firstName" /></p>
5. <p>Last name <input type="text" name="lastName" /></p>
6. </fieldset>
7. <fieldset>
8. <legend>Address</legend>
9. <p>Address <textarea name="address" ></textarea></p>
10. <p>Postal code <input type="text" name="postcode" /></p>
11. </fieldset>
12. ...

 

效果：

Name

First name
Last name

 

 

Address

Address
Postal code

 

Option groups - 选项组

optgroup标签可以给select元素的options分类。需要使用一个label属性，在可视化浏览器里，它的属性值会在下拉列表（select）里显示为一个不可选的、缩进标题。

1. <select name="country">
2. <optgroup label="Africa">
3. <option value="gam">Gambia</option>
4. <option value="mad">Madagascar</option>
5. <option value="nam">Namibia</option>
6. </optgroup>
7. <optgroup label="Europe">
8. <option value="fra">France</option>
9. <option value="rus">Russia</option>
10. <option value="uk">UK</option>
11. </optgroup>
    
12. <optgroup label="North America">
13. <option value="can">Canada</option>
14. <option value="mex">Mexico</option>
15. <option value="usa">USA</option>
16. </optgroup>
17. </select>

 

效果： Gambia Madagascar Namibia France Russia UK Canada Mexico USA

Navigating fields - 表单内的导航

和链接一样，在没有光标设备（如鼠标）的情况下，表单元素、组也可以自由导航。对于表单内的导航，也可以使用和链接一样的方法，tab导航和快捷键。

accesskey和tabindex属性可以添加到每个独立的表单标签上，比如input，甚至是legend标签。

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

 

更多信息可以参考Accessible Links一文。