ZT：4种常用表单布局CSS+div的写法
做网站的时候经常会遇到表单的排版，比如注册表单之类。下图是4种比较常用的表单格式。用css+div来处理这4种格式非常方便，可以用<ul>、<li>、<label>、<span>的组合，也可以用<p>、<label>、<span>的组合，用<dl〉、<dt>、<dd>也可以做到。这个表单的盒子，可以用fieldset装起来。
下面给出具体的代码，我用了<ul>、<li>、<label>、<span>的组合和<dl〉、<dt>、<dd>。
<!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>
<title>表单实例</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style type=”text/css” >
<!–
* {
margin:0;
padding:0;
list-style-type:none
}
body {
text-align:center
}
#main {
width:500px;
margin:0 auto
}
fieldset {
clear:both;
float:left;
width:500px;
border:1px solid #ff9900;
margin-top:30px;
text-align:left;
font-size:12px
}
fieldset legend {
margin-left:24px;
font-weight:bold;
color:#333333;
font-size:14px
}
fieldset ul, fieldset dl {
margin:30px 0 40px 60px;
line-height:24px
}
input {
border:1px solid #ccc;
height:16px;
}
fieldset li {
clear:both
}
#form1 label {
display:block;
float:left;
width:80px
}
#form2 label {
display:block;
float:left;
width:80px;
text-align:right
}
#form3 dt {
float:left;
clear:left
}
.btns {
margin-top:20px; margin-left:68px
}
.btns input {
margin-left:30px
}
–>
</style>
</head>
<body>
<div id=”main”>
<fieldset id=”form1″>
<legend>form example 1</legend>
<ul>
<li>
<label for=”userTbx”>用户名:</label>
<span>
<input name=”userTbx” id=”userTbx” type=”text” />
</span></li>
<li>
<label for=”pwTbx”>密码:</label>
<span>
<input name=”pwTbx” id=”pwTbx” type=”text” />
</span></li>
<li>
<label for=”pw2Tbx”>确认密码:</label>
<span>
<input name=”pw2Tbx” id=”pw2Tbx” type=”text” />
</span></li>
<li>
<label for=”emailTbx”>Email:</label>
<span>
<input name=”emailTbx” id=”emailTbx” type=”text” />
</span></li>
<li>
<label for=”birthTbx”>生日:</label>
<span>
<input name=”birthTbx” id=”birthTbx” type=”text” />
</span></li>
<div class=”btns”><input type=”submit” value=”提 交” />
<input name=”" type=”reset” value=”重 置” /></div>
</ul>
</fieldset>
<fieldset id=”form2″>
<legend>form example 2</legend>
<ul>
<li>
<label for=”userTbx”>用户名:</label>
<span>
<input name=”userTbx” id=”userTbx” type=”text” />
</span></li>
<li>
<label for=”pwTbx”>密码:</label>
<span>
<input name=”pwTbx” id=”pwTbx” type=”text” />
</span></li>
<li>
<label for=”pw2Tbx”>确认密码:</label>
<span>
<input name=”pw2Tbx” id=”pw2Tbx” type=”text” />
</span></li>
<li>
<label for=”emailTbx”>Email:</label>
<span>
<input name=”emailTbx” id=”emailTbx” type=”text” />
</span></li>
<li>
<label for=”birthTbx”>生日:</label>
<span>
<input name=”birthTbx” id=”birthTbx” type=”text” />
</span></li>
</ul>
</fieldset>
<fieldset id=”form3″>
<legend>form example 3</legend>
<dl>
<dt>用户名:</dt>
<dd>
<input name=”userTbx” id=”userTbx” type=”text” />
</dd>
<dt>密码:</dt>
<dd>
<input name=”pwTbx” id=”pwTbx” type=”text” />
</dd>
</li>
<dt>确认密码:</dt>
<dd>
<input name=”pw2Tbx” id=”pw2Tbx” type=”text” />
</dd>
<dt>Email:</dt>
<dd>
<input name=”emailTbx” id=”emailTbx” type=”text” />
</dd>
<dt>生日:</dt>
<dd>
<input name=”birthTbx” id=”birthTbx” type=”text” />
</dd>
</dl>
</fieldset>
<fieldset id=”form4″>
<legend>form example 4</legend>
<dl>
<dt>用户名:</dt>
<dd>
<input name=”userTbx” id=”userTbx” type=”text” />
</dd>
<dt>密码:</dt>
<dd>
<input name=”pwTbx” id=”pwTbx” type=”text” />
</dd>
</li>
<dt>确认密码:</dt>
<dd>
<input name=”pw2Tbx” id=”pw2Tbx” type=”text” />
</dd>
<dt>Email:</dt>
<dd>
<input name=”emailTbx” id=”emailTbx” type=”text” />
</dd>
<dt>生日:</dt>
<dd>
<input name=”birthTbx” id=”birthTbx” type=”text” />
</dd>
</dl>
</fieldset>
</div>
</body>
</html>
本文来自: CSSPLAY中文官方网(http://www.cssplay.org.cn/) 详细出处参考：http://www.cssplay.org.cn/css-layout/20080803/597.html
