不用 table 的 form 表单效果

 
.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; 
} 
 

 
<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>