标签form标准化例和详细解释.docVIP

form无论是在网站的制作中，还是在网站的重构中，我们都会频繁地“碰面”，当“碰面”的次数多了，反而觉得他更让人迷茫，有种熟悉的“陌生”，越来越把握不了他。 下面我们将带大家走进form的世界，一起来熟悉、探讨、掌握他的“脾性”。 对于简单form的设计图（如图一，yahoo注册页面的一部分），我们如何来做整体的布局呢？大体我们可以选用以下3种方式来做布局： 1、使用table来布局 这是大家最常用的方法，虽然现在到处都在谈标准化，甚至更多的在说div+css，但怿飞还是推荐大家使用table来布局form。对于标准，个人的另类理解“更符合逻辑，更效率快捷”。 为什么推荐大家使用呢？table本就是用来显示二维数据，用table来布局form可以说是他的“老本行”。另外重要的一点是，对于复杂的form，table能更有效的进行布局和维护修改，体现了效率和易用。 在布局之前，先温习一下table的部分标签：/forum.php?mod=viewthreadtid=2152206table：显示二维数据 summary：定义表格的用途 caption：定义表格的标题，在表格开始的地方使用，仅一次 tr：表格中的一行 th：表头单元格，定义一行或者一列的表头信息 td：数据单元格 下面我们具体来对图一的设计图进行整体布局： XHTML部分: form id=demoform class=democss action= table summary=使用table来布局的演示 id=demo captionRegistration example form/caption trthspan class=required*/span label for=fname accesskey=FFirst name:/label/thtdinput type=text id=fname value= //td/trtrthspan class=required*/span label for=lname accesskey=LLast name:/label/thtdinput type=text id=lname value= //td/trtrthspan class=required*/span label for=content accesskey=CPreferred content:/label/thtdselect name=content id=contentoption value=us selected=selectedYahoo! U.S./optionoption value=e1Yahoo! U.S. in Spanish/optionoption value=b5Yahoo! U.S. in Chinese/optionoption value=cnYahoo! China/optionoption value=ukYahoo! United Kingdom/optionoption value=arYahoo! Argentina/optionoption value=aaYahoo! Asia/optionoption value=auYahoo! Australia/option option value=brYahoo! Brazil/optionoption value=caYahoo! Canada in English/optionoption value=cfYahoo! Canada in French/optionoption value=frYahoo! France/optionoption value=deYahoo! Germany/optionoption value=hkYahoo! Hong Kong/optionoption value=inYahoo! India/optionoption value=itYahoo! Italy/optionoption value=krYahoo! Korea/optionoption value=mxYahoo! Mexico/optionoption value=sgYahoo! Singapore/optionoption value=esYahoo! Spain/optionoption value=twYahoo! Taiwan/option/select/td/trtrthspan class=required*/span label for=sex accesskey=GGender:/label/thtdselect name=s