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

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" 标签来控制。