电脑技术学习

不用 table 的 form 表单效果

dn001

以前做;form;时,通常是用两列表格,一列显示名称,一列放置表单元素。而本文介绍的是用;css;来实现的方法,便于控制全站风格,代码简洁。


---------------------------------------------------
点此查看示例文件
---------------------------------------------------


CSS:

  1. .cssform p{
  2. width: 300px;
  3. clear: left
  4. margin: 0
  5. padding: 5px 0 8px 0
  6. padding-left: 155px; /*width of left column containing the label elements*/
  7. border-top: 1px dashed gray
  8. height: 1%;
  9. }
  10. .cssform label{
  11. font-weight: bold
  12. float: left
  13. margin-left: -155px; /*width of left column*/
  14. width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
  15. }
  16. .cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
  17. width: 180px;
  18. }
  19. .cssform textarea{
  20. width: 250px;
  21. height: 150px;
  22. }
  23. /*.threepxfix class below:
  24. Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
  25. to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
  26. */
  27. * html .threepxfix{
  28. margin-left: 3px;
  29. }




HTML:

  1. <form id="myform" class="cssform" action="">
  2. <p>
  3. <label for="user">Name</label>
  4. <input type="text" id="user" value="" />
  5. </p>
  6. <p>
  7. <label for="emailaddress">Email Address:</label>
  8. <input type="text" id="emailaddress" value="" />
  9. </p>
  10. <p>
  11. <label for="comments">Feedback:</label>
  12. <textarea id="comments" rows="5" cols="25"></textarea>
  13. </p>
  14. <p>
  15. <label for="comments">Sex:</label>
  16. Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br />
  17. </p>
  18. <p>
  19. <label for="comments">Hobbies:</label>
  20. <input type="checkbox" name="hobby" /> Tennis<br />
  21. <input type="checkbox" name="hobby" class="threepxfix" /> Reading <br />
  22. <input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br />
  23. </p>
  24. <p>
  25. <label for="terms">Agree to Terms?</label>
  26. <input type="checkbox" id="terms" class="boxes" />
  27. </p>
  28. <div style="margin-left: 150px;">
  29. <input type="submit" value="Submit" /> <input type="reset" value="reset" />
  30. </div>
  31. </form>





;

标签: