网站建设中表单技巧

日期:2011年06月10日

一般来说,形式是相当无法为残疾用户。 使用下面的提示,以提高你的形式获取。

标签

提高形式使用<label>元素来指定的形式为每个字段标签辅助功能。

在第一个例子,前<label>标签用于每个字段,并引用字段的名称:

<FORM action="script-reference here" method="post">
<LABEL for="name">Name:</LABEL> 
<INPUT type="text" name="name"> 
<LABEL for="address">Address:</LABEL> 
<INPUT type="text" name="address"> 
<LABEL for="message">Message:</LABEL> 
<TEXTAREA name="message" cols="40" rows="5"></TEXTAREA> 
<INPUT type="submit" value="Submit Form"> 
<INPUT type="reset" value="Clear Form"> 
</FORM>

在第二个例子,<label>标记环绕每个字段的形式:

<FORM action="script-reference here" method="post"> 
<LABEL>Name:<INPUT type="text" name="name"></LABEL>
<LABEL>Address:<INPUT type="text" name="address"></LABEL>
<LABEL>Message: <TEXTAREA name="message" cols="40" rows="5"></TEXTAREA></LABEL><br> 
<INPUT type="submit" value="Submit Form">
<INPUT type="reset" value="Clear form">
</FORM>

Tab键顺序

提高形式的表单字段中使用tabindex属性访问。 这将控制字段的顺序,一个用户使用,因为他们通过表单通过按TAB键提交。

表头技巧

人们使用屏幕阅读器可以找到它很难理解在一个表中的资料。

关于如何标注表格的标题提示,以帮助视障用户。

细胞标题

使用钍元素标签表标题行或列单元格。 每个细胞钍元素也应该有一个独特的“标识”属性。 标题细胞成为细胞的参考点的数据。

例如:

...
<TR>
<TH ID="c1">Name</TH>
<TH ID="c2">Month</TH>
<TH ID="c3">Day</TH>
<TH ID="c4">Year</TH>
</TR>
...

数据单元格标签

如果一个表有两个或更多的行或列标题,或标题跨越多列,它需要额外的标签相关联的数据项。

表中的数据单元格,标题属性是用在TD元素来指定标题细胞与细胞相关的特定数据。

请注意,数据单元格包含数字的属性,包括02头=的“C2”,内容涉及与ID =的“C2”的标题细胞标记月。因此,对“02”的标题是月。

例如:

...
<TR>
<TD HEADERS="c1">Valentines</TD>
<TD HEADERS="c2">02</TD>
<TD HEADERS="c3">14</TD>
<TD HEADERS="c4">1500</TD>
</TR>
...

Tags:体验设计 企业网站建设
上一篇文章:在网页设计中跳过导航到主要内容
下一篇文章:网页设计中的框架使用