不用 table 的 form 表单效果_湛江HTML5

以前做;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.positi.net/exp/threept.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>;