advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

damarev on 01/09/07


Tagged


Versions (?)


Who likes this?

27 people have marked this snippet as a favorite

samuraicoder
basicmagic
tavo
fantomex
mountchuck
fayans
gt
zingo
twoandtwo
Quizosde
fael
JaimalChohan
bbhack
vali29
pagetoscreen
jfherring
visuallyspun
seekup00
wbowers
dkypuros
adamsimms
markor
gAmUssA
jamarama
rareyman
blackabee
section31


A CSS-based Form Template

Published in: CSS 

URL: http://nidahas.com/sandbox/form_template.html

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.