Invent

HTML高级教程 亲和力的表单

您现在的位置: 摘星网络_临沂网站建设优化 > 网站制作 > 站长经验 >

表单对于残障人士来说是最不容易使用的东西。导航和成文的内容是一种情况,而表单域和信息输入的跳跃又是另一回事儿。因此,为表单增加更多元素,使得表单更易用和更具亲和力未尝不是一个是好注意。

标记

每一个表单域都应该有一个自己的标记。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" >