亲和表单

标记

每一个表单域都应该有一个自己的标记。label标签挑选出来，跟for属性一起与一个表单元素关联。

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

标记为可视化浏览器处理本身使得标记自己可点击增加好处，使相关表单域获得焦点。

注意：name和id两者都是必须的──name为表单处理该表单域，id为标记关联到表单。

分组与图例说明

你可以为表单域分组，比如名字（姓，名，头衔等）或者地址（第一行，第二行，县，地区，邮编，国家等）。使用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> ... 

选项分组

optgroup标签用于在一个层叠式选择菜单为选项分类，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> 

导航域

像连接，表单域（和表单分组）需要为没有指点设备（比如鼠标）的用户导航。与连接相同的方法也可以用在表单元素上，使得任务更容易──tab逗留和快捷键。

可以为input和legend等独立表单标签设置accesskey和tabindex属性。

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