Advanced Search

Posted By

hotdiggity on 03/30/09

Tagged

Versions (?)

Last Edited at 03/30/09 11:15pm

Statistics

Viewed 854 times
Favorited by 1 user(s)

Related snippets

1357
CSS Form Template
938
CSS Form Labels
772
CSS - Hide form submit text value
2
form css
776
Form CSS for iPad
1
CSS Form

Tabless CSS Form

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.