用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" 標籤來控制。