以前做;form;时,通常是用两列表格,一列显示名称,一列放置表单元素。而本文介绍的是用;css;来实现的方法,便于控制全站风格,代码简洁。
---------------------------------------------------
点此查看示例文件
---------------------------------------------------
CSS:
.cssform p{ width: 300px; clear: left margin: 0 padding: 5px 0 8px 0 padding-left: 155px; /*width of left column containing the label elements*/ border-top: 1px dashed gray height: 1%; } .cssform label{ font-weight: bold float: left margin-left: -155px; /*width of left column*/ width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/ } .cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/ width: 180px; } .cssform textarea{ width: 250px; height: 150px; } /*.threepxfix class below: Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents. to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html */ * html .threepxfix{ margin-left: 3px; }
HTML:
<form id="myform" class="cssform" action=""> <p> <label for="user">Name</label> <input type="text" id="user" value="" /> </p> <p> <label for="emailaddress">Email Address:</label> <input type="text" id="emailaddress" value="" /> </p> <p> <label for="comments">Feedback:</label> <textarea id="comments" rows="5" cols="25"></textarea> </p> <p> <label for="comments">Sex:</label> Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br /> </p> <p> <label for="comments">Hobbies:</label> <input type="checkbox" name="hobby" /> Tennis<br /> <input type="checkbox" name="hobby" class="threepxfix" /> Reading <br /> <input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br /> </p> <p> <label for="terms">Agree to Terms?</label> <input type="checkbox" id="terms" class="boxes" /> </p> <div style="margin-left: 150px;"> <input type="submit" value="Submit" /> <input type="reset" value="reset" /> </div> </form>
;