这是一个学习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" 标签来控制。
Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved. 闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)
鄂公网安备 42011102001154号
站长:MinTao ICP备案号:鄂ICP备11006601号-18