advanced search

We Recommend

HTML: The Definitive Guide HTML: The Definitive Guide
They teach you that learning HTML is like learning any other language and that reading a book of rules can only take you so far. Readers begin writing what may be their first Web page just two pages into the book's second chapter. From there on, they provide a wide range of HTML coding to allow readers to learn from good examples. The book includes a handy "cheat sheet" of HTML codes for quick reference.

Posted By

maid450 on 09/12/07


Tagged

form css template html


Versions (?)


Who likes this?

7 people have marked this snippet as a favorite

maid450
robotoverlord
neuroasis
bbhack
vali29
brent-man
x-or


CSS Form Template

Published in: HTML 

an HTML template for form CSS styling


Plain TextExpand 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <head>
  6. <title>A CSS-based Form Template</title>
  7.  
  8. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  9.  
  10. <style type="text/css">
  11.  
  12. /* General styles */
  13. body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
  14. h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
  15. p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }
  16.  
  17. /* Form styles */
  18. div.form-container { margin: 10px; padding: 5px; background-color: #FFF; border: #EEE 1px solid; }
  19.  
  20. p.legend { margin-bottom: 1em; }
  21. p.legend em { color: #C00; font-style: normal; }
  22.  
  23. div.errors { margin: 0 0 10px 0; padding: 5px 10px; border: #FC6 1px solid; background-color: #FFC; }
  24. div.errors p { margin: 0; }
  25. div.errors p em { color: #C00; font-style: normal; font-weight: bold; }
  26.  
  27. div.form-container form p { margin: 0; }
  28. div.form-container form p.note { margin-left: 170px; font-size: 90%; color: #333; }
  29. div.form-container form fieldset { margin: 10px 0; padding: 10px; border: #DDD 1px solid; }
  30. div.form-container form legend { font-weight: bold; color: #666; }
  31. div.form-container form fieldset div { padding: 0.25em 0; }
  32. div.form-container label, 
  33. div.form-container span.label { margin-right: 10px; padding-right: 10px; width: 150px; display: block; float: left; text-align: right; position: relative; }
  34. div.form-container label.error, 
  35. div.form-container span.error { color: #C00; }
  36. div.form-container label em, 
  37. div.form-container span.label em { position: absolute; right: 0; font-size: 120%; font-style: normal; color: #C00; }
  38. div.form-container input.error { border-color: #C00; background-color: #FEF; }
  39. div.form-container input:focus,
  40. div.form-container input.error:focus, 
  41. div.form-container textarea:focus {	background-color: #FFC; border-color: #FC6; }
  42. div.form-container div.controlset label, 
  43. div.form-container div.controlset input { display: inline; float: none; }
  44. div.form-container div.controlset div { margin-left: 170px; }
  45. div.form-container div.buttonrow { margin-left: 180px; }
  46.  
  47. </style>
  48.  
  49. </head>
  50.  
  51. <body>
  52.  
  53. <div id="wrapper">
  54.  
  55. 	<h2>A CSS-based Form Template</h2>
  56.  
  57. 	<div class="form-container">
  58.  
  59. 	<p>More information about this template could be found in <a href="http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/" title="Nidahas: Forms markup and CSS - Revisited">this blog article</a>.</p>
  60.  
  61. 	<div class="errors">
  62. 		<p><em>Oops... the following errors were encountered:</em></p>
  63.  
  64. 		<ul>
  65. 			<li>Username cannot be empty</li>
  66. 			<li>Country cannot be empty</li>
  67. 		</ul>
  68. 		<p>Data has <strong>not</strong> been saved.</p>
  69. 	</div>
  70.  
  71. 	<form action="#" method="post">
  72.  
  73. 	<p class="legend"><strong>Note:</strong> Required fields are marked with an asterisk (<em>*</em>)</p>
  74.  
  75. 	<fieldset>
  76. 		<legend>User Details</legend>
  77. 			<div><label for="uname" class="error">Username <em>*</em></label> <input id="uname" type="text" name="uname" value="" class="error" /></div>
  78.  
  79. 			<div><label for="email">Email Address </label> <input id="email" type="text" name="email" value="" />
  80. 				<p class="note">We will never sell or disclose your email address to anyone. <strong>This is an example of a note for an input field.</strong></p>
  81. 			</div>
  82.  
  83. 			<div><label for="fname">First Name <em>*</em></label> <input id="fname" type="text" name="fname" value="" size="50" /></div>
  84. 			<div><label for="lname">Last Name </label> <input id="lname" type="text" name="lname" value="" size="50" /></div>
  85.  
  86. 	</fieldset>
  87.  
  88. 	<fieldset>
  89. 		<legend>Contact Information</legend>
  90. 			<div><label for="address1">Address 1 <em>*</em></label> <input id="address1" type="text" size="50" /></div>
  91. 			<div><label for="address2">Address 2</label> <input id="address2" type="text" size="50" /></div>
  92. 			<div><label for="country" class="error">Country <em>*</em></label> <input id="country" type="text" name="country" value="" class="error" size="12" />
  93.  
  94. 				<p class="note">Errors could be highlighted by giving an <code>error</code> class to the input field, as seen here.</p>
  95. 			</div>
  96. 			<div><label for="telephone">Telephone</label> <input id="telephone" type="text" size="3" /> - <input type="text" size="3" /> - <input type="text" size="4" />
  97. 				<p class="note">(###) - ### - ####</p>
  98.  
  99. 			</div>
  100. 	</fieldset>
  101.  
  102. 	<fieldset>
  103. 		<legend>Submission</legend>
  104. 			<div><label for="year">Year (YYYY) <em>*</em></label> <input id="year" type="text" name="year" value="" size="4" maxlength="4" /></div>
  105. 			<div><label for="date">Month (MM)</label> <input id="date" type="text" name="date" value="" size="4" maxlength="2" /></div>
  106.  
  107. 	</fieldset>
  108.  
  109. 	<fieldset>
  110. 		<legend>Preferences</legend>
  111. 			<div>
  112. 				<label for="type">Type <em>*</em></label>
  113. 				<select id="type">
  114. 					<optgroup label="Type of Whatever">
  115.  
  116. 						<option>Corporate</option>
  117. 						<option>Individual</option>
  118. 					</optgroup>
  119. 				</select>
  120. 			</div>
  121. 			<div class="controlset">
  122. 				<span class="label">User Status <em>*</em></span>
  123.  
  124. 				<input name="approved" id="approved" value="1" type="checkbox" /> <label for="approved">Approved</label>
  125. 				<input name="pending" id="pending" value="1" type="checkbox" /> <label for="pending">Pending Applications</label>
  126. 				<input name="actives" id="actives" value="1" type="checkbox" /> <label for="actives">Active Service</label>
  127. 			</div>			
  128.  
  129. 			<div class="controlset">
  130. 				<span class="label">Preferred Location</span>
  131.  
  132. 				<input name="radio1" id="radio1" value="1" type="radio" /> <label for="radio1">Option 1</label>
  133. 				<input name="radio1" id="radio2" value="1" type="radio" /> <label for="radio2">Option 2</label>
  134. 				<input name="radio1" id="radio3" value="1" type="radio" /> <label for="radio3">Option 3</label>
  135. 			</div>			
  136.  
  137. 			<div class="controlset">
  138. 				<span class="label">Something Else <em>*</em></span>
  139.  
  140. 				<div>
  141. 					<input name="approved" id="check1" value="1" type="checkbox" /> <label for="check1">Some Option 1</label> <br />
  142. 					<input name="pending" id="check2" value="1" type="checkbox" /> <label for="check2">Some Option 2</label> <br />
  143. 					<input name="actives" id="check3" value="1" type="checkbox" /> <label for="check3">Some Option 3</label> <br />
  144.  
  145. 				</div>
  146. 			</div>			
  147. 	</fieldset>
  148.  
  149. 	<fieldset>
  150. 		<legend>Profile</legend>
  151. 			<div>
  152. 				<label for="desc">Description <em>*</em></label>
  153. 				<textarea id="desc" name="desc" cols="30" rows="4"></textarea>
  154.  
  155. 			</div>
  156. 			<div>
  157. 				<label for="info">Additional Info </label>
  158. 				<textarea id="info" name="info" cols="40" rows="5"></textarea>
  159. 			</div>
  160. 	</fieldset>
  161.  
  162. 	<div class="buttonrow">
  163. 		<input type="submit" value="Save" class="button" />
  164.  
  165. 		<input type="button" value="Discard" class="button" />
  166. 	</div>
  167.  
  168. 	</form>
  169.  
  170. 	</div><!-- /form-container -->
  171.  
  172. 	<p id="copyright">Created by <a href="http://nidahas.com/">Prabhath Sirisena</a>. This stuff is in public domain.</p>
  173.  
  174. </div><!-- /wrapper -->
  175.  
  176. </body>
  177. </html>

Report this snippet 

You need to login to post a comment.