多CSS爱好者不喜欢HTML表格，尤其是在制作表单的时候，虽然现在已经是XHTML+CSS的年代，但表单的设计大多还在采用table来布局。那么，有没有更好的使用纯语义化XHTML+CSS设计表单方法呢？今天让我们一起来尝试这种更符合语义化的方法来代替Table嵌套的表单元素吧！
您可以下载源代码并使用在自己的网站项目中。
下载源文件
第一步:HTML代码
创建一个新页面index.html，然后拷贝并粘贴以下代码到<body>标签内。
Code
1 <div id=”stylized” class=”myform”>
2 <form id=”form” name=”form” method=”post” action=”index.html”>
3 <h1>Sign-up form</h1>
4 <p>This is the basic look of my form without table</p>
5
6 <label>Name
7 <span class=”small”>Add your name</span>
8 </label>
9 <input type=”text” name=”name” id=”name” />
10
11 <label>Email
12 <span class=”small”>Add a valid address</span>
13 </label>
14 <input type=”text” name=”email” id=”email” />
15
16 <label>Password
17 <span class=”small”>Min. size 6 chars</span>
18 </label>
19 <input type=”text” name=”password” id=”password” />
20
21 <button type=”submit”>Sign-up</button>
22 <div class=”spacer”></div>
23
24 </form>
25 </div>
26
27
通过上面的代码，你是否能看出它的视觉样式呢？下面是我们的CSS表单结构图示:
我为每个input元素使用了<label>标签，并使用<span>标签包含简短的描述。所有的label和input元素都是用了CSS的float属性，值为left。
第二步:CSS代码
复制并粘贴以下代码到你页面中的<head>标签中的<style type=”taxt/css”></style>内。(也可以单独存储到CSS文件中)
Code
1 body{
2 font-family:”Lucida Grande”, “Lucida Sans Unicode”, Verdana, Arial, Helvetica, sans-serif;
3 font-size:12px;
4 }
5
6 p, h1, form, button{border:0; margin:0; padding:0;}
7 .spacer{clear:both; height:1px;}
8 /* ———– My Form ———– */
9 .myform{
10 margin:0 auto;
11 width:400px;
12 padding:14px;
13 }
14
15 /* ———– stylized ———– */
16 #stylized{
17 border:solid 2px #b7ddf2;
18 background:#ebf4fb;
19 }
20
21 #stylized h1 {
22 font-size:14px;
23 font-weight:bold;
24 margin-bottom:8px;
25 }
26
27 #stylized p{
28 font-size:11px;
29 color:#666666;
30 margin-bottom:20px;
31 border-bottom:solid 1px #b7ddf2;
32 padding-bottom:10px;
33 }
34
35 #stylized label{
36 display:block;
37 font-weight:bold;
38 text-align:right;
39 width:140px;
40 float:left;
41 }
42
43 #stylized .small{
44 color:#666666;
45 display:block;
46 font-size:11px;
47 font-weight:normal;
48 text-align:right;
49 width:140px;
50 }
51
52 #stylized input{
53 float:left;
54 font-size:12px;
55 padding:4px 2px;
56 border:solid 1px #aacfe4;
57 width:200px;
58 margin:2px 0 20px 10px;
59 }
60
61 #stylized button{
62 clear:both;
63 margin-left:150px;
64 width:125px;
65 height:31px;
66 background:#666666 url(img/button.png) no-repeat;
67 text-align:center;
68 line-height:31px;
69 color:#FFFFFF;
70 font-size:11px;
71 font-weight:bold;
72 }
73
74
以上仅仅是表单布局的一种方式，您也可以按照您的喜好来修改源代码并重新使用它。
