简单form标准化实例（一）：整体布局

blank 楼主

首发：http://www.planabc.net/article.asp?id=97

form无论是在网站的制作中，还是在网站的重构中，我们都会频繁地“碰面”，当“碰面”的次数多了，反而觉得他更让人迷茫，有种熟悉的“陌生”，越来越把握不了他。

下面我们将带大家走进form的世界，一起来熟悉、探讨、掌握他的“脾性”。



对于简单form的设计图（如图一，yahoo注册页面的一部分），我们如何来做整体的布局呢？大体我们可以选用以下3种方式来做布局：

1、使用table来布局

这是大家最常用的方法，虽然现在到处都在谈标准化，甚至更多的在说div+css，但怿飞还是推荐大家使用table来布局form。对于标准，个人的另类理解“更符合逻辑，更效率快捷”。

为什么推荐大家使用呢？table本就是用来显示二维数据，用table来布局form可以说是他的“老本行”。另外重要的一点是，对于复杂的form，table能更有效的进行布局和维护修改，体现了效率和易用。

在布局之前，先温习一下table的部分标签：

table：显示二维数据
summary：定义表格的用途
caption：定义表格的标题，在表格开始的地方使用，仅一次
tr：表格中的一行
th：表头单元格，定义一行或者一列的表头信息
td：数据单元格

下面我们具体来对图一的设计图进行整体布局：

XHTML部分:

1. <form id="demoform" class="democss" action="">
   
2. 
   
3. <table summary="使用table来布局的演示" id="demo">
   
4. 
   
5. <caption>
   
6. Registration example form
   
7. </caption>
   
8. 
   
9. <tr>
   
10. <th><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></th>
    
11. <td><input type="text" id="fname" value="" /></td>
    
12. </tr>
    
13. <tr>
    
14. <th><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label></th>
    
15. <td><input type="text" id="lname" value="" /></td>
    
16. </tr>
    
17. <tr>
    
18. <th><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label></th>
    
19. <td>
    
20. <select name="content" id="content">
    
21. <option value="us" selected="selected">Yahoo! U.S.</option>
    
22. <option value="e1">Yahoo! U.S. in Spanish</option>
    
23. <option value="b5">Yahoo! U.S. in Chinese</option>
    
24. <option value="cn">Yahoo! China</option>
    
25. <option value="uk">Yahoo! United Kingdom</option>
    
26. <option value="ar">Yahoo! Argentina</option>
    
27. <option value="aa">Yahoo! Asia</option>
    
28. <option value="au">Yahoo! Australia</option>
    
29. <option value="br">Yahoo! Brazil</option>
    
30. <option value="ca">Yahoo! Canada in English</option>
    
31. <option value="cf">Yahoo! Canada in French</option>
    
32. <option value="fr">Yahoo! France</option>
    
33. <option value="de">Yahoo! Germany</option>
    
34. <option value="hk">Yahoo! Hong Kong</option>
    
35. <option value="in">Yahoo! India</option>
    
36. <option value="it">Yahoo! Italy</option>
    
37. <option value="kr">Yahoo! Korea</option>
    
38. <option value="mx">Yahoo! Mexico</option>
    
39. <option value="sg">Yahoo! Singapore</option>
    
40. <option value="es">Yahoo! Spain</option>
    
41. <option value="tw">Yahoo! Taiwan</option>
    
42. </select>
    
43. </td>
    
44. </tr>
    
45. <tr>
    
46. <th><span class="required">*</span> <label for="sex" accesskey="G">Gender:</label></th>
    
47. <td>
    
48. <select name="sex" id="sex">
    
49. <option value="">[Select] </option>
    
50. <option value="m">Male</option>
    
51. <option value="f">Female</option>
    
52. </select>
    
53. </td>
    
54. </tr>
    
55. <tr>
    
56. <th><span class="required">*</span> <label for="yid" accesskey="Y">Yahoo! ID:</label></th>
    
57. <td><input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br />
    
58. <span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span></td>
    
59. </tr>
    
60. <tr>
    
61. <th><span class="required">*</span> <label for="pw" accesskey="P">Password:</label></th>
    
62. <td>
    
63. <input type="password" value="" id="pw" /><br />
    
64. <span class="explain">Six characters or more; capitalization matters!</span>
    
65. </td>
    
66. </tr>
    
67. <tr>
    
68. <th><span class="required">*</span> <label for="pw2" accesskey="R">Re-type password:</label></th>
    
69. <td><input type="password" value="" id="pw2"/></td>
    
70. </tr>
    
71. <tr>
    
72. <th></th>
    
73. <td><input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/></td>
    
74. </tr>
    
75. </table>
    
76. </form>

复制代码

CSS部分:

1. * {
   
2.   margin:0;
   
3.   padding:0;
   
4. }
   
5. 
   
6. table {
   
7.    border-collapse:collapse;
   
8. }
   
9. 
   
10. input,select {
    
11.    font-family:Arial, Helvetica, sans-serif;
    
12.    font-size: 12px;
    
13. }
    
14. 
    
15. .required {
    
16.   font:0.8em Verdana !important;
    
17.   color:#f68622;
    
18. }
    
19. 
    
20. .explain {
    
21.   color:#808080;
    
22. }
    
23. 
    
24. .b {
    
25.   font-weight:bold;
    
26.   font-size:12px;
    
27. }
    
28. 
    
29. .democss table{
    
30.   font:11px/12px Arial, Helvetica, sans-serif;
    
31.   color:#333;
    
32.   width:420px;
    
33. }
    
34. 
    
35. .democss caption {
    
36.   display:none;
    
37. }
    
38. 
    
39. .democss th {
    
40.   font-weight:normal;
    
41.   text-align:right;
    
42.   vertical-align:top;
    
43.   padding:4px;
    
44.   padding-top:8px;
    
45.   width:110px
    
46. }
    
47. 
    
48. .democss td {
    
49.   text-align:left;
    
50.   padding:4px;
    
51.   width:294px;
    
52. }
    
53. 
    
54. .democss input {
    
55.   width:180px;
    
56. }
    
57. 
    
58. .democss select#content {
    
59.   width:185px;
    
60. }
    
61. 
    
62. .democss input.submit {
    
63.   width:70px;
    
64. }

复制代码

具体演示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>使用table来布局的演示</title> <style type="text/css" media="all"> * { 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 table{ font: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; } </style> </head> <body> <form id="demoform" class="democss" action=""> <table summary="使用table来布局的演示" id="demo"> <caption> Registration example form </caption> <tr> <th><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></th> <td><input type="text" id="fname" value="" /></td> </tr> <tr> <th><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label></th> <td><input type="text" id="lname" value="" /></td> </tr> <tr> <th><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label></th> <td> <select name="content" id="content"> <option value="us" selected="selected">Yahoo! U.S.</option> <option value="e1">Yahoo! U.S. in Spanish</option> <option value="b5">Yahoo! U.S. in Chinese</option> <option value="cn">Yahoo! China</option> <option value="uk">Yahoo! United Kingdom</option> <option value="ar">Yahoo! Argentina</option> <option value="aa">Yahoo! Asia</option> <option value="au">Yahoo! Australia</option> <option value="br">Yahoo! Brazil</option> <option value="ca">Yahoo! Canada in English</option> <option value="cf">Yahoo! Canada in French</option> <option value="fr">Yahoo! France</option> <option value="de">Yahoo! Germany</option> <option value="hk">Yahoo! Hong Kong</option> <option value="in">Yahoo! India</option> <option value="it">Yahoo! Italy</option> <option value="kr">Yahoo! Korea</option> <option value="mx">Yahoo! Mexico</option> <option value="sg">Yahoo! Singapore</option> <option value="es">Yahoo! Spain</option> <option value="tw">Yahoo! Taiwan</option> </select> </td> </tr> <tr> <th><span class="required">*</span> <label for="sex" accesskey="G">Gender:</label></th> <td> <select name="sex" id="sex"> <option value="">[Select] </option> <option value="m">Male</option> <option value="f">Female</option> </select> </td> </tr> <tr> <th><span class="required">*</span> <label for="yid" accesskey="Y">Yahoo! ID:</label></th> <td><input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br /> <span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span></td> </tr> <tr> <th><span class="required">*</span> <label for="pw" accesskey="P">Password:</label></th> <td> <input type="password" value="" id="pw" /><br /> <span class="explain">Six characters or more; capitalization matters!</span> </td> </tr> <tr> <th><span class="required">*</span> <label for="pw2" accesskey="R">Re-type password:</label></th> <td><input type="password" value="" id="pw2"/></td> </tr> <tr> <th></th> <td><input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/></td> </tr> </table> </form> </body> </html>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

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 />，并且个br设定清除浮动clear:left;

注意：使用次方法在IE下有个小BUG，那就是div或p里的第一行的input或其他有3px的IE的BUG，我们可以使用只有IE才识别的* html来定义属性来消除3px的BUG。

下面我们具体来对图一的设计图进行整体布局：

XHTML部分:

1. <form id="demoform" class="democss" action="">
   
2. 
   
3. <p>
   
4. <label for="fname" accesskey="F"><span class="required">*</span> First name:</label>
   
5. <input type="text" id="fname" value="" />
   
6. </p>
   
7. <p>
   
8. <label for="lname" accesskey="L"><span class="required">*</span> Last name:</label>
   
9. <input type="text" id="lname" value="" />
   
10. </p>
    
11. <p>
    
12. <label for="content" accesskey="C"><span class="required">*</span> Preferred content:</label>
    
13. <select name="content" id="content">
    
14. <option value="us" selected="selected">Yahoo! U.S.</option>
    
15. <option value="e1">Yahoo! U.S. in Spanish</option>
    
16. <option value="b5">Yahoo! U.S. in Chinese</option>
    
17. <option value="cn">Yahoo! China</option>
    
18. <option value="uk">Yahoo! United Kingdom</option>
    
19. <option value="ar">Yahoo! Argentina</option>
    
20. <option value="aa">Yahoo! Asia</option>
    
21. <option value="au">Yahoo! Australia</option>
    
22. <option value="br">Yahoo! Brazil</option>
    
23. <option value="ca">Yahoo! Canada in English</option>
    
24. <option value="cf">Yahoo! Canada in French</option>
    
25. <option value="fr">Yahoo! France</option>
    
26. <option value="de">Yahoo! Germany</option>
    
27. <option value="hk">Yahoo! Hong Kong</option>
    
28. <option value="in">Yahoo! India</option>
    
29. <option value="it">Yahoo! Italy</option>
    
30. <option value="kr">Yahoo! Korea</option>
    
31. <option value="mx">Yahoo! Mexico</option>
    
32. <option value="sg">Yahoo! Singapore</option>
    
33. <option value="es">Yahoo! Spain</option>
    
34. <option value="tw">Yahoo! Taiwan</option>
    
35. </select>
    
36. </p>
    
37. <p>
    
38. <label for="sex" accesskey="G"><span class="required">*</span> Gender:</label>
    
39. <select name="sex" id="sex">
    
40. <option value="">[Select] </option>
    
41. <option value="m">Male</option>
    
42. <option value="f">Female</option>
    
43. </select>
    
44. </p>
    
45. <p>
    
46. <label for="yid" accesskey="Y"><span class="required">*</span> Yahoo! ID:</label>
    
47. <input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br />
    
48. <span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span>
    
49. </p>
    
50. <p>
    
51. <label for="pw" accesskey="P"><span class="required">*</span> Password:</label>
    
52. <input type="password" value="" id="pw" /><br />
    
53. <span class="explain">Six characters or more; capitalization matters!</span>
    
54. </p>
    
55. <p>
    
56. <label for="pw2" accesskey="R"><span class="required">*</span> Re-type password:</label>
    
57. <input type="password" value="" id="pw2"/>
    
58. </p>
    
59. 
    
60. <div id="submit">
    
61. <input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/>
    
62. </div>
    
63. 
    
64. </form>

复制代码

CSS部分:

1. * {
   
2.   margin:0;
   
3.   padding:0;
   
4. }
   
5. 
   
6. input,select {
   
7.    font-family:Arial, Helvetica, sans-serif;
   
8.    font-size: 12px;
   
9. }
   
10. 
    
11. .required {
    
12.   font:0.8em Verdana !important;
    
13.   color:#f68622;
    
14. }
    
15. 
    
16. .explain {
    
17.   color:#808080;
    
18. }
    
19. 
    
20. .b {
    
21.   font-weight:bold;
    
22.   font-size:12px;
    
23. }
    
24. 
    
25. .democss {
    
26.   font:11px/12px Arial, Helvetica, sans-serif;
    
27.   color:#333;
    
28. }
    
29. 
    
30. .democss p {
    
31.   width: 298px;
    
32.   clear: left;
    
33.   padding:4px;
    
34.   padding-left: 122px;
    
35.   text-align:left;
    
36.   height: 1%;
    
37. }
    
38. 
    
39. .democss label {
    
40.   float: left;
    
41.   margin-left: -122px;
    
42.   width: 110px;
    
43.   padding:4px 4px 0;
    
44.   text-align:right;
    
45. }
    
46. 
    
47. .democss input {
    
48.   width:180px;
    
49. }
    
50. 
    
51. .democss select#content {
    
52.   width:185px;
    
53. }
    
54. 
    
55. .democss input.submit {
    
56.   width:70px;
    
57. }
    
58. 
    
59. div#submit {
    
60.   width:298px;
    
61.   text-align:left;
    
62.   padding:4px;
    
63.   padding-left:122px;
    
64. }
    
65. 
    
66. * html .democss input,* html .democss select{
    
67.   margin-left: -3px;  
    
68. }
    
69. 
    
70. * html div#submit input{
    
71.   margin-left: 0px;
    
72. }

复制代码

具体演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>使用label布局的演示</title> <style type="text/css" media="all"> * { 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 select{ margin-left: -3px; } * html div#submit input{ margin-left: 0px; } </style> </head> <body> <form id="demoform" class="democss" action=""> <p> <label for="fname" accesskey="F"><span class="required">*</span> First name:</label> <input type="text" id="fname" value="" /> </p> <p> <label for="lname" accesskey="L"><span class="required">*</span> Last name:</label> <input type="text" id="lname" value="" /> </p> <p> <label for="content" accesskey="C"><span class="required">*</span> Preferred content:</label> <select name="content" id="content"> <option value="us" selected="selected">Yahoo! U.S.</option> <option value="e1">Yahoo! U.S. in Spanish</option> <option value="b5">Yahoo! U.S. in Chinese</option> <option value="cn">Yahoo! China</option> <option value="uk">Yahoo! United Kingdom</option> <option value="ar">Yahoo! Argentina</option> <option value="aa">Yahoo! Asia</option> <option value="au">Yahoo! Australia</option> <option value="br">Yahoo! Brazil</option> <option value="ca">Yahoo! Canada in English</option> <option value="cf">Yahoo! Canada in French</option> <option value="fr">Yahoo! France</option> <option value="de">Yahoo! Germany</option> <option value="hk">Yahoo! Hong Kong</option> <option value="in">Yahoo! India</option> <option value="it">Yahoo! Italy</option> <option value="kr">Yahoo! Korea</option> <option value="mx">Yahoo! Mexico</option> <option value="sg">Yahoo! Singapore</option> <option value="es">Yahoo! Spain</option> <option value="tw">Yahoo! Taiwan</option> </select> </p> <p> <label for="sex" accesskey="G"><span class="required">*</span> Gender:</label> <select name="sex" id="sex"> <option value="">[Select] </option> <option value="m">Male</option> <option value="f">Female</option> </select> </p> <p> <label for="yid" accesskey="Y"><span class="required">*</span> Yahoo! ID:</label> <input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br /> <span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span> </p> <p> <label for="pw" accesskey="P"><span class="required">*</span> Password:</label> <input type="password" value="" id="pw" /><br /> <span class="explain">Six characters or more; capitalization matters!</span> </p> <p> <label for="pw2" accesskey="R"><span class="required">*</span> Re-type password:</label> <input type="password" value="" id="pw2"/> </p> <div id="submit"> <input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/> </div> </form> </body> </html>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

放不下接下帖！！！

[ 本帖最后由 blankzheng 于 2007-1-23 16:21 编辑 ]

blank 楼主

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部分:

1. <form id="demoform" class="democss" action="">
   
2. 
   
3. <dl>
   
4. <dt><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></dt>
   
5. <dd><input type="text" id="fname" value="" /></dd>
   
6. <dt><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label></dt>
   
7. <dd><input type="text" id="lname" value="" /></dd>
   
8. <dt><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label></dt>
   
9. <dd><select name="content" id="content">
   
10. <option value="us" selected="selected">Yahoo! U.S.</option>
    
11. <option value="e1">Yahoo! U.S. in Spanish</option>
    
12. <option value="b5">Yahoo! U.S. in Chinese</option>
    
13. <option value="cn">Yahoo! China</option>
    
14. <option value="uk">Yahoo! United Kingdom</option>
    
15. <option value="ar">Yahoo! Argentina</option>
    
16. <option value="aa">Yahoo! Asia</option>
    
17. <option value="au">Yahoo! Australia</option>
    
18. <option value="br">Yahoo! Brazil</option>
    
19. <option value="ca">Yahoo! Canada in English</option>
    
20. <option value="cf">Yahoo! Canada in French</option>
    
21. <option value="fr">Yahoo! France</option>
    
22. <option value="de">Yahoo! Germany</option>
    
23. <option value="hk">Yahoo! Hong Kong</option>
    
24. <option value="in">Yahoo! India</option>
    
25. <option value="it">Yahoo! Italy</option>
    
26. <option value="kr">Yahoo! Korea</option>
    
27. <option value="mx">Yahoo! Mexico</option>
    
28. <option value="sg">Yahoo! Singapore</option>
    
29. <option value="es">Yahoo! Spain</option>
    
30. <option value="tw">Yahoo! Taiwan</option>
    
31. </select>
    
32. </dd>
    
33. <dt><span class="required">*</span> <label for="sex" accesskey="G">Gender:</label></dt>
    
34. <dd><select name="sex" id="sex">
    
35. <option value="">[Select] </option>
    
36. <option value="m">Male</option>
    
37. <option value="f">Female</option>
    
38. </select>
    
39. </dd>
    
40. <dt><span class="required">*</span> <label for="yid" accesskey="Y">Yahoo! ID:</label></dt>
    
41. <dd><input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br />
    
42. <span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span></dd>
    
43. <dt><span class="required">*</span> <label for="pw" accesskey="P">Password:</label></dt>
    
44. <dd><input type="password" value="" id="pw" /><br />
    
45. <span class="explain">Six characters or more; capitalization matters!</span>
    
46. </dd>
    
47. <dt><span class="required">*</span> <label for="pw2" accesskey="R">Re-type password:</label></dt>
    
48. <dd><input type="password" value="" id="pw2"/></dd>
    
49. </dl>
    
50. 
    
51. <div id="submit">
    
52. <input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/>
    
53. </div>
    
54. 
    
55. </form>

复制代码

CSS部分:

1. * {
   
2.   margin:0;
   
3.   padding:0;
   
4. }
   
5. 
   
6. input,select {
   
7.    font-family:Arial, Helvetica, sans-serif;
   
8.    font-size: 12px;
   
9. }
   
10. 
    
11. .required {
    
12.   font:0.8em Verdana !important;
    
13.   color:#f68622;
    
14. }
    
15. 
    
16. .explain {
    
17.   color:#808080;
    
18. }
    
19. 
    
20. .b {
    
21.   font-weight:bold;
    
22.   font-size:12px;
    
23. }
    
24. 
    
25. .democss {
    
26.   font:11px/12px Arial, Helvetica, sans-serif;
    
27.   color:#333;
    
28. }
    
29. 
    
30. .democss dl {
    
31.   width:420px;
    
32. }
    
33. 
    
34. .democss dt {
    
35.   width: 110px;
    
36.   float: left;
    
37.   padding:4px;
    
38.   padding-top:8px;
    
39.   text-align:right;
    
40. }
    
41. 
    
42. .democss dd{
    
43.   margin:0 0 0 118px;
    
44.   padding:4px;
    
45.   text-align:left;
    
46. }
    
47. 
    
48. .democss input {
    
49.   width:180px;
    
50. }
    
51. 
    
52. .democss select#content {
    
53.   width:185px;
    
54. }
    
55. 
    
56. .democss input.submit {
    
57.   width:70px;
    
58. }
    
59. 
    
60. div#submit {
    
61.   width:298px;
    
62.   text-align:left;
    
63.   padding:4px;
    
64.   padding-left:122px;
    
65. }
    
66. 
    
67. * html .democss input,* html .democss select{
    
68.   margin-left: -3px;  
    
69. }
    
70. 
    
71. * html div#submit input{
    
72.   margin-left: 0px;
    
73. }

复制代码

具体演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>使用dl,dt,dd布局的演示</title> <style type="text/css" media="all"> * { 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 dd{ margin:0 0 0 118px; padding:4px; text-align:left; } .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 select{ margin-left: -3px; } * html div#submit input{ margin-left: 0px; } </style> </head> <body> <form id="demoform" class="democss" action=""> <dl> <dt><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></dt> <dd><input type="text" id="fname" value="" /></dd> <dt><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label></dt> <dd><input type="text" id="lname" value="" /></dd> <dt><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label></dt> <dd><select name="content" id="content"> <option value="us" selected="selected">Yahoo! U.S.</option> <option value="e1">Yahoo! U.S. in Spanish</option> <option value="b5">Yahoo! U.S. in Chinese</option> <option value="cn">Yahoo! China</option> <option value="uk">Yahoo! United Kingdom</option> <option value="ar">Yahoo! Argentina</option> <option value="aa">Yahoo! Asia</option> <option value="au">Yahoo! Australia</option> <option value="br">Yahoo! Brazil</option> <option value="ca">Yahoo! Canada in English</option> <option value="cf">Yahoo! Canada in French</option> <option value="fr">Yahoo! France</option> <option value="de">Yahoo! Germany</option> <option value="hk">Yahoo! Hong Kong</option> <option value="in">Yahoo! India</option> <option value="it">Yahoo! Italy</option> <option value="kr">Yahoo! Korea</option> <option value="mx">Yahoo! Mexico</option> <option value="sg">Yahoo! Singapore</option> <option value="es">Yahoo! Spain</option> <option value="tw">Yahoo! Taiwan</option> </select> </dd> <dt><span class="required">*</span> <label for="sex" accesskey="G">Gender:</label></dt> <dd><select name="sex" id="sex"> <option value="">[Select] </option> <option value="m">Male</option> <option value="f">Female</option> </select> </dd> <dt><span class="required">*</span> <label for="yid" accesskey="Y">Yahoo! ID:</label></dt> <dd><input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br /> <span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span></dd> <dt><span class="required">*</span> <label for="pw" accesskey="P">Password:</label></dt> <dd><input type="password" value="" id="pw" /><br /> <span class="explain">Six characters or more; capitalization matters!</span> </dd> <dt><span class="required">*</span> <label for="pw2" accesskey="R">Re-type password:</label></dt> <dd><input type="password" value="" id="pw2"/></dd> </dl> <div id="submit"> <input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/> </div> </form> </body> </html>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

对于dl,dt,dd的布局好像有个小BUG，有兴趣的朋友可以实验一下。给dd添加他的宽度属性，我们可以根据相关数据算出dd的宽度为294px，添加上这个宽度属性按理论上是没有问题的，在FF下实验也没有问题，但在IE6下，就惨不忍睹了！


相关阅读（很不错的，强烈推荐）：

设计类：
《浅议 Web 表单设计》：http://www.junchenwu.com/2006/04/web_application_form_design.html
《浅议 Web 表单设计（续）》：http://www.junchenwu.com/2006/04/web_application_form_design_expanded.html
《再议 Web 表单设计 —— 是否该使用下拉框？》：http://www.junchenwu.com/2006/12/web_form_design_should_i_use_a_drop_down.html
《基于CSS的表单：现代的解决方案》：http://www.jluvip.com/blog/article.asp?id=338

制作类：

《轻松玩转花样表单 》：http://www.blueidea.com/tech/web/2003/377.asp
《熟悉常用表单格式的五点技巧 》：http://www.blueidea.com/tech/web/2003/929.asp
《重新认识表格和一个访问无障碍的数据表格例子》：http://www.forest53.com/tutorials/tutorials_show.asp?sortid=6&id=60
《用css制作表单并体验亲和力 》：http://www.blueidea.com/tech/site/2006/3359.asp


下期预告：《简单form标准化实例（二）：语义结构 》

[ 本帖最后由 blankzheng 于 2007-2-1 15:22 编辑 ]

幻想曲

不错！
一直不知道dt/dd/dl的用法,受益~~~

jdjia

向这样的表格; 有没有什么好办法?

blank 楼主

对于复杂的表单布局，还是强烈推荐table布局！

webdesigning

好文章，应该加分鼓励~~~

261509559

dt/dd/dl    非也, 原来可以在这里用.
做天看<无懈可击web设计>一书中作者也用了dt/dd/dl 做了个图文混排的模块,棒极了.
大虾们多发关于表单的文章,我也很迷惑
另外我觉得楼主写的xhtml中不应当用到<br />

[ 本帖最后由 261509559 于 2007-1-24 10:06 编辑 ]

hero4u

  都差不多，能省则省，开发效率优先还是执行效率优先 完全看价值取向了。给的钱多不就多做点，给的少就少做点，哈哈。绝对的懒人主意

chenjk28

用ul,li来整体布局需要怎么写呢?

blank 楼主

原帖由 chenjk28 于 2007-1-23 23:51 发表
用ul,li来整体布局需要怎么写呢?

自己可以尝试着用各种方法去布局，亲手去布局，会有更多的体会和认知！

wheatlee

嗯，很不错的文章。不过我提两点我的看法：

1 我认为还是用table比较好，因为从语义上看“表单”用“表格”来布局是最恰当的，而实际运用的时候用table也是最方便的。用第二种方法，即p标签包含label，这样作出来的HTML没有什么结构化效果，而且label的宽度还得人工定义，实际应用的时候会遇到一个表单一个CSS定义，完全没用通用性。dl也是这样的。

2 使用colgroup和col标签来定义表格列的样式，可以避免为每个td和th都设置class属性（这或许也是一种classitis）。

MagicYY

发一个部分使用CSS2的表单，由于IE6不支持CSS2，可能看起来非常简陋

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Form demo</title> <style type="text/css"> <!-- * { margin:0; padding:0; } body { font-family:Arial, Helvetica, sans-serif; font-size:75%; color:#666; background:#fff; text-align:center; } a { color:#1E7ACE; text-decoration:none; color:#CE7A1E; } a:hover { color:#000; text-decoration:underline; } p { color:#1E7ACE; margin:4px; font-weight:700; } input{ padding:1px; margin:2px; font-size:1em; } input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover { color:red; border:1px solid red; cursor:pointer; } input[type="text"], input[type="password"] { color:#000; border:1px solid #ccc; } input[type="text"]:hover, input[type="password"]:hover { border:1px solid #1E7ACE; } input[type="text"]:focus, input[type="password"]:focus { background:#D0F0FF; border:1px solid #1E7ACE; } .button{ padding:1px 10px; border:1px #1E7ACE solid; background:#D0F0FF; } #formwrapper { width:450px; margin:15px auto; padding:20px; text-align:left; border:1px solid #A4CDF2; } fieldset { padding:10px; margin:5px auto; border:1px solid #A4CDF2; background:#fff; } fieldset legend { color:#1E7ACE; font-weight:bold; padding:3px 20px 3px 20px; border:1px solid #A4CDF2; background:#fff; } fieldset label { float:left; width:10em; text-align:right; padding:4px; margin:1px; cursor:pointer; font-weight:700; } fieldset label:hover { color:red; } fieldset div { clear:left; margin-bottom:2px; line-height:100%; } fieldset span { color:red; font-weight:700; } .center{ text-align:center;} --> </style> </head> <body> <div id="formwrapper"> <h3>用户登录</h3> <form action="" method="post" name="apLogin" id="apLogin"> <fieldset> <legend>用户登录</legend> <div> <label for="loginname">用户名</label> <input type="text" name="Name" id="loginname" size="18" maxlength="30" /> </div> <div> <label for="loginpassword">密码</label> <input type="password" name="password" id="loginpassword" size="18" maxlength="30" /> </div> <div class="cookiechk"> <label title="选择是否记录您的信息"><input type="checkbox" name="CookieYN" id="CookieYN" value="1" />记住我</label> <input name="login791" type="submit" class="button" value="登录" /> <a href="#">您忘记密码？</a> </div> </fieldset> </form> <h3>创建帐户</h3> <form action="" method="post" name="apForm" id="apForm"> <fieldset> <legend>用户注册</legend> <p>您的电子邮箱不会被公布出去，但是必须填写。</p> <div> <label for="signupname">用户名</label> <input type="text" name="Name" id="signupname" value="" size="20" maxlength="30" /> <span>*(最多30个字符)</span> </div> <div> <label for="Email">电子邮箱</label> <input type="text" name="Email" id="Email" value="" size="20" maxlength="150" /> <span>*</span> </div> <div> <label for="signuppassword">密码</label> <input type="password" name="password" id="signuppassword" size="18" maxlength="15" /> <span>*(最多15个字符)</span> </div> <div> <label for="confirm_password">重复密码</label> <input type="password" name="confirm_password" id="confirm_password" size="18" maxlength="15" /> <span>*</span> </div> <div> <label for="AgreeToTerms">同意服务条款</label> <input type="checkbox" name="AgreeToTerms" id="AgreeToTerms" value="1" /> <a href="#" title="您是否同意服务条款">先看看条款？</a> <span>*</span> </div> <div class="center"> <input name="create791" type="submit" class="button" value="提交" /> <input name="Submit" type="reset" class="button" value="重置" /> </div> <p>在提交您的注册信息时，我们认为您已经同意了我们的<a href="#">服务条款</a>。</p> <p><a href="#">这些条款</a>可能在未经您同意的时候进行修改。</p> </fieldset> </form> </div> </body> </html>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

uplive

进来发现看着table 下那么多的tr td 嵌套 有点怕怕.

好久都没用table 了，感觉有点陌生起来了，

blank 楼主

table布局其实是最方便的布局，就像4楼秀才提供的图一样，你不用table布局而选用其他的方式布局，会很麻烦，当然你技术过关，是可以用其他方式布局出来的，但复杂程度不会比表格来的简单，而且如果后期要进行布局更改或修改，用其他布局的局限性和不易用性就会体现出来，那时候就会怀念table的。

对于标准，没人说不许用table布局，更没说不让选择table布局，应该根据具体情况来定！

blank 楼主

原帖由 wheatlee 于 2007-1-24 16:43 发表
即p标签包含label，这样作出来的HTML没有什么结构化效果

对于这一点，你可以考虑div，为什么我使用p，因为我对p的理解是不仅可以用于段落的表示，对于结构相同的类似于段落的不复杂部分，也可以使用p，对于此我的定义是伪段落表示。

部分标签我相信每个人都有自己的理解！

凉爽

我也是觉得复杂的表单应该用表格来做

weihua22

藏起来先。。。。。

rainoxu

我觉得不错，不过复杂的东西确实还是用表格更方便，也没办要一味的为了标准而弄得很麻烦，像DZ的论坛还不是都用表格的，不然的话也都用ul和li了，所以可以说表格还是有其优势的

jubailan

提醒:最后回贴距现在 529 天，请不要无意义回复

原帖由 chenjk28 于 2007-1-23 23:51 发表
用ul,li来整体布局需要怎么写呢?

感觉可以这样
<h3>标题</h3>
<ul>
<li>
内容
</li>
</ul

itmssliyan

个人认为table和div我其中一个区别就是两者一个是td间自适应高度的,一个是div间高度不相干的
一般左右分栏的可以不用table布局

nick03

用FORM 做。。

* html .democss input,* html .democss select{
  margin-left: -3px;  
}
* html div#submit input{
  margin-left: 0px;
}


这个好像不用加吧。。去掉在IE6 IE7 一样是好的啊。。

nick03

为label和input或其他的外围添加一个div或p，把该div或p触发layout（可以利用Holly Hack设置height: 1%），并清除左浮动clear:left;。


不知道height: 1% 有什么用。但去掉照样兼容IE FF。。。

还有clear:left 好像是多余的。。他本身就是块级元素。。。

fuguojian1988

真的很实用

weizeyan

刚刚看了楼主dl布局， 有个地方是不是有点问题呢

从语义化上来讲，我个人觉得dt在其dl内应该出现一次， dd是可以多次使用的，

shani2010

很实用！  必须支持一下！辛苦了LZ ！

pigyaa

留名~~~

alexing

留名支持