您当前位置：首页 >> web标准 >> web标准之表单
web标准之表单
更新时间：2008-05-29参与评论
不需要多余的代码
或许你或发现,在#thisform label 的定义中没有重复font-size:12px;由于<label>元素包含在#thisform之内,因此他们会继承这个属性.在较高层级 设定共享规则,接着在元素树底层覆盖有需要的设定值是个好习惯.这能节省不少代码.除了显而易见好处之外,也能让往后的维护工作轻松不少.如果你想改变整 个表单的font-family,那么只需要修改一条规则,而不必修改所有重复设定字体的规则.
想象你设计了一个网站,全部使用了Georgia字体,最初你在20个不同的规则中分别加上相同的font-face: Georgia,serif;规则,过了一星期后,老板跑来找你并且对你说"CEO现在讨厌serif字体了,把网站内容改用Verdana".这时你的 钻进这20条规则里,慢慢修改了.
或者是,你也能在更高层级设定一次这条规则,比如说指定在<body>元素里,此时整份文档都汇继承 Georgia字体,除非以其他规则指定另外的设定值.现在,当老板要求你进行修改时,你就能回答"没问题,两分钟之后搞定";或者是能把简易性留给自 己,告诉他这需要耗上两个小时,然后用这些额外的时间上eBay标东西.
OK,当然,你应该告诉老板真相,他们应该知道你的价值,为公司节省时间并且善用你找到的新解法.
以<fieldset>制作表单元素群组
使用<fieldset>是个为表单元素分组的便利方法.除此之外,加上叙述用的< legend>则会在大多数浏览器内,为你做好的表单元素群组加上一个漂亮的边框.我刚刚有说"漂亮"吗?嗯,我的确喜欢这种边框.而我们只需要用 上一点CSS,就能使它变得更加迷人.
首先,来看看建立群组是需要哪些标签.接着为示例表单加上一个群组:
<form action="/path/to/script" id="thisform" method="post"> <fieldset> <legend>Sign In</legend> <p><label for="name" accesskey="9" >Name:</label><br /> <input type="text" id="name" name="name" tabindex="1" /></p> <p><label for="email">Email:</label><br /> <input type="text" id="email" name="email" tabindex="2" /></p> <p><input type="checkbox" id="remember" name="remember" tabindex="3" /> <label for="remember">Remember this info?</label></p> <p><input type="submit" value="submit" tabindex="4" /></p> </fieldset> </form>
图5-12是浏览器显示这个群组的效果图,包含刚加上的<fieldset>与< legend>标签,以及刚为<label>设定的CSS样式.或许你已发现有条漂亮的边线围绕在<fieldset>里 面的所有表单元素之外,同时<legend>的内容断开了左上方的边线.
图5-12.加上<fieldset>与<legend>之后的表单
我说这个效果"漂亮"的原因是:完全不加上CSS,使用它们的预设样式,它的显示效果的确让人相当感动.同时还能加上一些自定属性,使它变得更有趣,我们马上动手.
你应该也能看出<fieldset>在为表单隔出不同区块的时候十分有用,举例来说,如果我们的示例是个大表单的第一部分,那么以<fieldset>从视觉上隔开这些区块的话,不仅语义更清楚,还能使表单结构更明显,更容易阅读使用.
为<fieldset>和<legend>加上样式
我们能使用CSS改写<fieldset>预设边框与<legend>文字的样式,与定义其他元素的样式一样简单,首先,我们来修改边框的颜色和宽度,接着再修改文字本身.
为了使<fieldset>的边线变得更加细致,我们使用以下的CSS:
#thisform {
font-family: Georgia, serif;
font-size: 12px;
color: #999;
}
#thisform label {
font-family: Verdana, sans-serif;
font-weight: bold;
color: #600;
}
#thisform fieldset {
border: 1px solid #ccc;
padding: 0 20px;
}
接着为左右两边指定20像素的外补丁,并且去掉上下外补丁,为什么要去掉这些外补丁?因为我们的表单说明文字,表单元素都放在<p>标签内,因此他们在上下方向上已经留足了边界空白.
图5-13是指定这些样式之后的表单显示效果.
图5-13.为<fieldset>指定样式之后的效果
立体的<legend>
最后,为<legend>标签指定一些样式,做出立体的边线效果,让它看起来像是与<fieldset>元素的边线连在一起.
#thisform {
font-family: Georgia, serif;
font-size: 12px;
color: #999;
}
#thisform label {
font-family: Verdana, sans-serif;
font-weight: bold;
color: #600;
}
#thisform fieldset {
border: 1px solid #ccc;
padding: 0 20px;
}
#thisform legend {
font-family: arial, sans-serif;
font-weight: bold;
font-size: 90%;
color: #666;
background: #eee;
border: 1px solid #ccc;
border-bottom-color: #999;
border-right-color: #999;
padding: 4px 8px;
}
如你所见,这里做了几件事,首先,调整了<legend>的字体,粗细与大小,接着产生了立体效果,把背景 设为浅灰色,然后在整个<legend>的外面加上配合<fieldset>边线颜色的单像素边线,为了达成阴影效果,我们还把 底部与右侧的边线颜色换成深一点的灰色.
字体大小百分比: 由于我们之前为整个#thisform 的字体设置为font-size:12px;因此要缩小<legend>文字时,我们直接用百分比,在较高层级指定字体大小,接着在底层使用 百分比,能够减轻未来的维护负担.要调大整个网站的字体大小么?只要修改一个地方,所有百分比都会随之改变.事实上,最理想的状况下,我们可以设定 <body>的初始字型大小,然后在其他所有地方使用百分比.然而在这个示例中,我们选择在<form>层级指定字体大小.
然后调整内部定,以便文字与边线之间留下一点空间.就是这样了!图5-14显示的是最后结果,加上本章内的所有CSS代码,同时仍然使用最简洁,灵活的表单结构.
图5-14 完成的表单示例,以CSS设定样式.
结论
标记表单有许多方法,不管你使用表格,定义清单,还是最基本的段落标签进行说明,表单元素的排版,都要记住,本章讨论的易用性功能,可以轻易加到任何方法里面.
像是tabindex与accesskey这种属性可以提升浏览效率,而<label>元素与对应的id属性能确保互助设备可以正确辨识你的表单内容.
基于短小简介的修改,就能得到更好的结果.
