Advanced Search

CSS Form Template

/ Published in: HTML
Save to your folder(s)
an HTML template for form CSS styling

Expand | Embed | Plain Text

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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.