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