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