网页表单的web标准解决方案

《网页表单的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;}[这篇文章来自..，]