这是一个学习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" 标签来控制。
|