Posted By

hotdiggity on 03/30/09


Tagged

css html forms


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

nirva
aleksanderek
satsuma


Tabless CSS Form


 / Published in: CSS
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5. <title>Tabless CSS Form</title>
  6. <style type="text/css">
  7.  
  8. .cssform p {
  9. width: 300px;
  10. clear: left;
  11. margin: 0;
  12. padding: 5px 0 8px 0;
  13. padding-left: 155px; /*width of left column containing the label elements*/
  14. border-top: 1px dashed gray;
  15. height: 1%;
  16. }
  17.  
  18. .cssform label {
  19. font-weight: bold;
  20. float: left;
  21. margin-left: -155px; /*width of left column*/
  22. width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
  23. }
  24.  
  25. .cssform input[type="text"] { /*width of text boxes. IE6 does not understand this attribute*/
  26. width: 180px;
  27. }
  28.  
  29. .cssform textarea {
  30. width: 250px;
  31. height: 150px;
  32. }
  33.  
  34. /*.threepxfix class below:
  35. Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
  36. to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
  37. */
  38. * html .threepxfix {
  39. margin-left: 3px;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <form id="myform" class="cssform" action="">
  45. <p>
  46. <label for="user">Name</label>
  47. <input type="text" id="user" value="" />
  48. </p>
  49. <p>
  50. <label for="emailaddress">Email Address:</label>
  51. <input type="text" id="emailaddress" value="" />
  52. </p>
  53. <p>
  54. <label for="comments">Feedback:</label>
  55. <textarea id="comments" rows="5" cols="25"></textarea>
  56. </p>
  57. <p>
  58. <label for="comments">Sex:</label>
  59. Male:
  60. <input type="radio" name="sex" /> Female:
  61. <input type="radio" name="sex" /><br />
  62. </p>
  63. <p>
  64. <label for="comments">Hobbies:</label>
  65. <input type="checkbox" name="hobby" /> Tennis<br />
  66. <input type="checkbox" name="hobby" class="threepxfix" /> Reading <br />
  67. <input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br />
  68. </p>
  69. <p>
  70. <label for="terms">Agree to Terms?</label>
  71. <input type="checkbox" id="terms" class="boxes" />
  72. </p>
  73. <div style="margin-left: 150px;">
  74. <input type="submit" value="Submit" />
  75. <input type="reset" value="reset" />
  76. </div>
  77. </form>
  78. </body>
  79. </html>

Report this snippet  

You need to login to post a comment.