表单是网页中一个不可缺少的部分,如何使表单更具有亲和力了?这是一个遵照 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>