一个遵照 WCAG 指导原则设计的表单

一个遵照 WCAG 指导原则设计的表单

表单是网页中一个不可缺少的部分，如何使表单更具有亲和力了？这是一个遵照 WCAG 指导原则设计的表单，许多地方都努力去做了。

fieldset标签

fieldset标签会在包含的文本和input等表单元素外面形成一个方框，legend元素作为标题。

Label标签

Label 用于表单元素 (input, textarea or select),配于 for 将值传递给相应的表单元素。

tabindex

用于 input, textarea......，给其一个编号，使用键盘上的TAB（制表键），就很容易地进入输入框中。

背景和前景色

背景: #FFFFF，前景:#333333，色彩差异: 612 > 500，亮度差异: 204 > 125 ,符合要求。

代码:

<form action="index.html">
<fieldset>
<legend>Contact Form</legend>
<div>
<label for="name">Name : </label>
<input name="name" type="text" id="name" value="Enter your name here *" maxlength="30" tabindex="1" />
</div>
<div>
<label for="email">E-mail : </label>
<input name="email" type="text" id="email" value="Enter your E-mail here *" maxlength="35" tabindex="2" />
</div>
<div>
<label for="title">Title : </label>
<input name="title" type="text" id="title" value="Enter title here *" maxlength="30" tabindex="3" />
</div>
<div>
<label for="introduce">Comments : </label>
<textarea name="introduce" cols="50" rows="8" id="introduce" tabindex="4">Enter comments here *</textarea>
</div>
</fieldset>
<div class="center">
<input name="cmdOk" type="submit" class="button" value="Send" tabindex="5" />
<input name="cmdReset" type="reset" class="button" value="Reset" tabindex="6" />
</div>
</form>

演示地址

posted on 2006-12-25 10:08 Steveson 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/Steveson/archive/2006/12/25/602727.html