简单表单标准化实例.docx

1、使用table来布局这是大家最常用的方法，虽然现在到处都在谈标准化，甚至更多的在说div+css，但怿飞还是推荐大家使用table来布局form。对于标准，个人的另类理解“更符合逻辑，更效率快捷”。为什么推荐大家使用呢？table本就是用来显示二维数据，用table来布局form可以说是他的“老本行”。另外重要的一点是，对于复杂的form，table能更有效的进行布局和维护修改，体现了效率和易用。在布局之前，先温习一下table的部分标签：table：显示二维数据summary：定义表格的用途caption：定义表格的标题，在表格开始的地方使用，仅一次tr：表格中的一行th：表头单元格，定义一行或者一列的表头信息td：数据单元格下面我们具体来对图一的设计图进行整体布局：Registration example form* First name:* Last name:* Preferred content:Yahoo! U.S.Yahoo! U.S. in SpanishYahoo! U.S. in ChineseYahoo! ChinaYahoo! United KingdomYahoo! ArgentinaYahoo! AsiaYahoo! Australia Yahoo! BrazilYahoo! Canada in EnglishYahoo! Canada in FrenchYahoo! FranceYahoo! GermanyYahoo! Hong KongYahoo! IndiaYahoo! ItalyYahoo! KoreaYahoo! MexicoYahoo! SingaporeYahoo! SpainYahoo! Taiwan* Gender:Select MaleFemale* Yahoo! ID: ID may consist of a-z, 0-9, underscores, and a single dot (.)* Password:Six characters or more; capitalization matters!* Re-type password: CSS部分:* margin:0;padding:0;table border-collapse:collapse;input,select font-family:Arial, Helvetica, sans-serif; font-size: 12px;.required font:0.8em Verdana !important;color:#f68622;.explain color:#808080;.b font-weight:bold;font-size:12px;.democss tablefont:11px/12px Arial, Helvetica, sans-serif;color:#333;width:420px;.democss caption display:none;.democss th font-weight:normal;text-align:right;vertical-align:top;padding:4px;padding-top:8px;width:110px.democss td text-align:left;padding:4px;width:294px;.democss input width:180px;.democss select#content width:185px;.democss input.submit width:70px;2、使用label来布局特点：对于简单的form布局，此方法在语义表现上更为突出。通常的解决方法为：为label和input或其他的外围添加一个div或p，把该div或p触发layout（可以利用Holly Hack设置height: 1%），并清除左浮动clear:left;。将label设为float: left;浮动在input或其他的右边。让label 对齐的是方法是：固定label的宽度，然后根据需要使用text-align向左或者向右对齐。如果label右侧有多行input或其他，我们可以对div或p设置padding-left：xpx，然后对label设置margin-left:-xpx，设定宽度的一个小窍门，使用单位em根据标记的最大字数来定宽度，不必辛苦测试px。当然你也可以不用div或p，在每行结束使用，并且个br设定清除浮动clear:left;注意：使用次方法在IE下有个小BUG，那就是div或p里的第一行的input或其他有3px的IE的BUG，我们可以使用只有IE才识别的* html来定义属性来消除3px的BUG。下面我们具体来对图一的设计图进行整体布局：XHTML部分:* First name:* Last name:* Preferred content:Yahoo! U.S.Yahoo! U.S. in SpanishYahoo! U.S. in ChineseYahoo! ChinaYahoo! United KingdomYahoo! ArgentinaYahoo! AsiaYahoo! Australia Yahoo! BrazilYahoo! Canada in EnglishYahoo! Canada in FrenchYahoo! FranceYahoo! GermanyYahoo! Hong KongYahoo! IndiaYahoo! ItalyYahoo! KoreaYahoo! MexicoYahoo! SingaporeYahoo! SpainYahoo! Taiwan* Gender:Select MaleFemale* Yahoo! ID: ID may consist of a-z, 0-9, underscores, and a single dot (.)* Password:Six characters or more; capitalization matters!* Re-type password: CSS部分:* margin:0;padding:0;input,select font-family:Arial, Helvetica, sans-serif; font-size: 12px;.required font:0.8em Verdana !important;color:#f68622;.explain color:#808080;.b font-weight:bold;font-size:12px;.democss font:11px/12px Arial, Helvetica, sans-serif;color:#333;.democss p width: 298px;clear: left;padding:4px;padding-left: 122px; text-align:left;height: 1%;.democss label float: left;margin-left: -122px;width: 110px; padding:4px 4px 0;text-align:right;.democss input width:180px;.democss select#content width:185px;.democss input.submit width:70px;div#submit width:298px;text-align:left;padding:4px;padding-left:122px;* html .democss input,* html .democss selectmargin-left: -3px; * html div#submit inputmargin-left: 0px;3、使用dl、dt、dd来布局此属于发挥，练习的方法，当然图一的设计图还可以用其他更多的方法来布局，用dl、dt、dd来布局只为抛砖引玉。dl：代表HTML自定义列表 dt：代表HTML自定义列表组dd：HTML自定义列表描述 虽然说dl、dt、dd在语义上并不能很好的表现图一，但dl、dt、dd的布局特点依旧可以用来进行图一的布局，而且效果还不错，呵呵dt主要放label部分，dd主要放input或其他。注意：和label布局一样，有IE的3px BUG。下面我们具体来对图一的设计图进行整体布局：XHTML部分:* First name:* Last name:* Preferred content:Yahoo! U.S.Yahoo! U.S. in SpanishYahoo! U.S. in ChineseYahoo! ChinaYahoo! United KingdomYahoo! ArgentinaYahoo! AsiaYahoo! Australia Yahoo! BrazilYahoo! Canada in EnglishYahoo! Canada in FrenchYahoo! FranceYahoo! GermanyYahoo! Hong KongYahoo! IndiaYahoo! ItalyYahoo! KoreaYahoo! MexicoYahoo! SingaporeYahoo! SpainYahoo! Taiwan* Gender:Select MaleFemale* Yahoo! ID: ID may consist of a-z, 0-9, underscores, and a single dot (.)* Password:Six characters or more; capitalization matters!* Re-type password: CSS部分:* margin:0;padding:0;input,select font-family:Arial, Helvetica, sans-serif; font-size: 12px;.required font:0.8em Verdana !important;color:#f68622;.explain color:#808080;.b font-weight:bold;font-size:12px;.democss font:11px/12px Arial, Helvetica, sans-serif;color:#333;.democss dl width:420px;.democss dt width: 110px;float: left;padding:4px;padding-top:8px; text-align:right;.democss ddmargin:0 0 0 118px;padding:4px;text-align:left;.democss input width:180px;