WEB学习笔记12-高可读性的HTML之如何正确设计表单

网站中的用户登录、注册、用户调查等都是通过页面中的表单提交到网站服务器的。假设要实现让用户设置个人信息的一个表单。

该表格为两栏布局，第一栏中的文本左对齐，第二栏的表单控件右对齐，构成了最容易实现的表单布局设计。<label>用于为输入控件定义文本标签（label）——即显示在输入控件旁边的说明性文字。要为<label>指定关联的输入控件，只需把相关控件的id赋值给<label>标签的for属性。for属性的作用是：不仅把<label>元素上的触发事件指向了for属性指代的表单元素，也从语义上绑定了label元素和此表单元素。

 <form action="/service/user" method="post">
 <label for="userName">User Name:</label>
 <input type="text" id="userName" name="userName" />
 <label for="password">Password:</label>
 <input type="text" id="password"  name="password" />
 <input type="checkbox" id="staySigned" name="staySigned" />
 <label for="staySigned">Stay signed in</label>
 <input type="submit" value="Login" />
 </form>

此外，还可以使用<fieldset>元素给表单控件分组。和<fieldset>相关的一个元素是<legend>元素，<legend>元素用来定义控件组的标题。表单使用<label>标签、<fieldset>标签和<legend>标签后的代码如下：

 <form action="/service/user" method="post">
 <fieldset>
 <legend>Sign in to begin.</legend>
 <label for="userName">User Name:</label>
 <input type="text" id="userName" name="userName" />
 <label for="password">Password:</label>
 <input type="text" id="password"  name="password" />
 <input type="checkbox" id="staySigned" name="staySigned" />
 <label for="staySigned">Stay signed in</label>
 </fieldset>
 <input type="submit" value="Login" />
 </form>

下面介绍一下提高表单易用性的手段:

（1）使用<label>标签，并设置<label>标签的for属性.

　　<label>元素上的鼠标事件会转移到其关联的输入控件上，这一特性为鼠标用户增强了可用性，尤其是对单选框和复选框等使用鼠标操作的输入控件来说。

　

 <input type="checkbox" id="keepSigned" name="keepSigned" value="" />
 <label for="keepSigned">Keep Me Signed In For 30 Days.</label>
 // 省略for属性，把输入控件作为label的子元素
 <label><input type="checkbox" id="keepSigned" name="keepSigned" value="" /> Keep Me Signed In For 30 Days.</label>

（2）给输入控件设置合适的水印提示

　　推荐使用HTML5中引入的placeholder属性.

 <input type="text" name="email" id="email" placeholder="user@lifeway.com" />

（3）如有必要，给输入控件设置tab顺序

　　如果实际的顺序并不是期望的顺序，则需要给输入控件设置tabindex属性来设置输入控件的切换顺序，示例代码如下：

　　

 <input type="text" tabindex="2" />

（4）使用HTML5中引入的表单控件

结合以上所述的易用性表单设计原则，给相关表单控件设置placeholder属性、tabindex属性和require属性，并更改用户名输入框的类型为email。最终的HTML代码为：

 <form action="/service/user" method="post">
 <fieldset>
 <legend>Sign in to begin.</legend>
 <label for="userName">User Name:</label>
 <input type="email" id="userName" name="userName" placeholder=user@lifeway.com" tabindex="1" required="true" />
 <label for="password">Password:</label>
 <input type="text" id="password"  name="password" placeholder="
 password" tabindex="2" required="true" />
 <label for="staySigned">
 <input type="checkbox" id="staySigned" name="staySigned" tabindex=
 "3" />
 Stay signed in
 </label>
 </fieldset>
 <input type="submit" value="Login" tabindex="4" />
 </form>

为了检验HTML是否符合语义，尝试去掉作用于表单上的CSS样式，此时在Chrome浏览器中显示的效果如图

因为设置了用户名和密码输入框的require属性，即输入不允许为空，所以当单击“Login”按钮时，会出现默认的错误提示框。

在Firefox浏览器中显示的效果和Chrome浏览器中显示的效果类似，只是外观稍有不同