会员中心
用户名:    密码:    验证码:      免费注册会员

jquery手册   CSS2手册       请关注健康

CSSer > 客户端开发 > web标准与前台开发 > 遵照 WCAG 指导原则设计表单

来源: 作者:forestgan 发布时间:2007-04-12
雅虎收藏夹 百度收藏 Google书签 Yahoo书签 新浪ViVi 搜狐网摘 365Key网摘 天极网摘 diglog 和讯网摘 POCO网摘 YouNote网摘 博拉网 天下图摘 Del.icio.us digg reddit spurl BlinkList blogmarks
表单是网页中一个不可缺少的部分,如何使表单更具有亲和力了?这是一个遵照 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>

相关文章