用CSS布局表单实例(抛弃表格)

　　这是一个学习WEB标准的例子，我们在不使用标准之前为表单布局一般都使用表格，在这个例子中我们抛弃表格，来使用CSS为表单进行布局。
CSS设置代码：
<style type="text/css">
label{
float: left;
width: 120px;
font-weight: bold;
}
input, textarea{
width: 180px;
margin-bottom: 5px;
}
textarea{
width: 250px;
height: 150px;
}
.boxes{
width: 1em;
}
#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
br{
clear: left;
}
</style>
HTML代码：
<form>
<label for="user">Name</label>
<input type="text" name="user" value="" /><br />
<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" value="" /><br />
<label for="comments">Comments:</label>
<textarea name="comments"></textarea><br />
<label for="terms">Agree to Terms?</label>
<input type="checkbox" name="terms" class="boxes" /><br />
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
</form>
　　在这个例子中用 "label" 标签来布局表单的左部，即表单的提示内容，使表单显示的效果明显分为左右两部分，左部的宽度我们可以使用 "label" 标签来控制。

补充：Css教程,样式布局