欢迎来到天天文库
浏览记录
ID:24398459
大小:53.50 KB
页数:4页
时间:2018-11-13
《网页表单的web标准解决方案》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库。
1、网页表单的Web标准解决方案>>edu.5151doc.教育资源库进入eYou.后,马上就给新版的邮件界面转化成XHTML+CSS的工作,还好平时基本功还够扎实,有条不紊的干了下来。当然会遇到新的问题,比如,平时做网页,因为没有跟程序打过什么交道,较少使用表单。还好,世界还有Google,让我可以轻松应对新挑战。一些经验,写出来大家分享。基于易用性(accesibility)的考虑,表单的标准写法应该在<form>和</form>之中包含fieldset和legend(说明),让用户明白该表单域的内容概要。简单的结构如下:<form><fieldset>&l
2、t;legend></legend>......</fieldset></form>在某些场合或许你不愿意让也许fieldset和legend影响你的设计方案中的美观,好办,在CSS中把fieldset的border设置为0,legend的display设置为none就行了。在绝大多数情况下,表单的布局分两列,左边是标记(label),右边是输入框(inputtype="text"...)。如此简单的两列布局,我强烈建议不要使用表格。参考uploads/source/cssform.php和.aplus.co.yu/css/forms/?css=1(绝对有价值的两
3、个参考,你已经可以不必往下看了),我们发现,L:(部分)<form><fieldset><legend>表单实例</lengend><div><labelfor="name"></label><inputtype="text"id="name"/></div><div><labelfor="etc">其他等等:</label><inputtype="text"id="etc"/></div><divclass="submit"><inputtype="submit"value="提交"/
4、></div></fieldset></form>CSS:(部分)body{/*跟表单无关,设置页面的显示效果*/argin:20pxauto;font:14px/1.5Serif;}fieldset{border:none;border-top:1pxsolid#ccc;}legend{padding:2px;border:1pxsolid#ddd;background:#ececed;}div{display:block;padding:5px0;}label{float:left;;text-align:right;}.submit{margin-left:
5、6em;}.submitinput{padding:2px;border:1pxsolid#ccc;background:#ececec;}[这篇文章来自..,]
此文档下载收益归作者所有