advanced code snippet search

Posted By

nerdfiles on 08/13/09


Tagged

form css html html5


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

roccostorm
LeeRJohnson
tombryan
pgorrindo
berkleebassist
SpinZ


HTML5 Form Template (comprehensive, valid, semantic)

 / Published in: HTML
 

Most of the form elements have been accounted for. This form setup, I believe, is ideal for CSS, as it has sufficient generality (styling the file input based on its block and parent div) and many demarcations for flexibility and styling. I may update it over time. Eventually I will provide a list of the relevant CSS classes, etc.

Expand | Embed | Plain Text 
  1. <section class="html-5-form">
  2.  
  3. 	<section class="form-error-message-block">
  4. 		<p id="form-error-msg">Default error message.</p>
  5. 	</section>
  6. 	<!-- / form-error-message-block -->
  7.  
  8. 	<section class="form-block">
  9.  
  10. 		<form id="form-1" action="/" method="post" enctype="" dir="ltr" xml:lang="en">
  11.  
  12. 			<fieldset>
  13.  
  14. 				<legend>Form Legend Title</legend>
  15.  
  16. 				<div class="form-element-block input required">
  17. 					<div class="form-label">
  18. 						<label for="input-elem-1">Input Element 1*</label>
  19. 					</div>
  20. 					<div class="form-elem">
  21. 						<input id="input-elem-1" name="input-elem-1" type="text" size="20" value="" maxlength="40" autofocus required />
  22. 					</div>
  23. 				</div>
  24. 				<!-- / input (required) -->
  25.  
  26. 				<div class="form-element-block input">
  27. 					<div class="form-label">
  28. 						<label for="input-elem-11">Input Element 11</label>
  29. 					</div>
  30. 					<div class="form-elem">
  31. 						<input id="input-elem-11" name="input-elem-11" type="text" size="20" value="" maxlength="40" />
  32. 					</div>
  33. 				</div>
  34. 				<!-- / input -->
  35.  
  36. 				<div class="form-element-block email required">
  37. 					<div class="form-label">
  38. 						<label for="email-elem-12">E-mail Element 12*</label>
  39. 					</div>
  40. 					<div class="form-elem">
  41. 						<input id="email-elem-12" name="email-elem-12" type="email" size="20" required />
  42. 					</div>
  43. 				</div>
  44. 				<!-- / email -->
  45.  
  46. 				<div class="form-element-block url">
  47. 					<div class="form-label">
  48. 						<label for="url-elem-13">Web address Element 13</label>
  49. 					</div>
  50. 					<div class="form-elem">
  51. 						<input id="url-elem-13" name="url-elem-13" type="url" size="30" />
  52. 					</div>
  53. 				</div>
  54. 				<!-- / url -->
  55.  
  56. 				<div class="form-element-block date">
  57. 					<div class="form-label">
  58. 						<label for="date-elem-14">Date Element 14</label>
  59. 					</div>
  60. 					<div class="form-elem">
  61. 						<input id="date-elem-14" name="date-elem-14" type="date" />
  62. 					</div>
  63. 				</div>
  64. 				<!-- / date -->
  65.  
  66. 				<div class="form-element-block range">
  67. 					<div class="form-label">
  68. 						<label for="range-elem-15">Range Element 15</label>
  69. 					</div>
  70. 					<div class="form-elem">
  71. 						<input id="range-elem-15" name="range" type="range" min="1" max="10" value="0">
  72. 						<output name="range-elem-15-result" onforminput="value=range.value">0</output>
  73. 					</div>
  74. 				</div>
  75. 				<!-- / range -->
  76.  
  77. 				<div class="form-element-block datalist">
  78. 					<div class="form-label">
  79. 						<label for="datalist-elem-16">Datalist Element 16</label>
  80. 					</div>
  81. 					<div class="form-elem">
  82. 						<input id="datalist-elem-16" name="datalist-elem-16" list="datalist" type="text" size="30" />
  83. 						<datalist id="datalist">
  84. 							<option label="Data Item 1" value="Data Item 1">
  85. 							<option label="Data Item 2" value="Data Item 2">
  86. 							<option label="Data Item 3" value="Data Item 3">
  87. 						</datalist>
  88. 					</div>
  89. 				</div>
  90. 				<!-- / datalist -->
  91.  
  92. 				<div class="form-element-block number">
  93. 					<div class="form-label">
  94. 						<label for="number-elem-10">Number Element 10</label>
  95. 					</div>
  96. 					<div class="form-elem">
  97. 						<input id="number-elem-10" name="number-elem-10" type="number" size="20" min="18" max="25" />
  98. 					</div>
  99. 				</div>
  100. 				<!-- / number -->
  101.  
  102. 				<div class="form-element-block textarea">
  103. 					<div class="form-label">
  104. 						<label for="textarea-elem-2">Textarea Element 2</label>
  105. 					</div>
  106. 					<div class="form-elem">
  107. 						<textarea id="textarea-elem-2" name="textarea-elem-2" rows="5" cols="20"></textarea>
  108. 					</div>
  109. 				</div>
  110. 				<!-- / textarea -->
  111.  
  112. 				<div class="form-element-block file">
  113. 					<div class="form-elem">
  114. 						<input id="file-elem-9" name="file-elem-9" type="file" />
  115. 					</div>
  116. 				</div>
  117. 				<!-- / file -->
  118.  
  119. 				<div class="form-element-block radio">
  120. 					<div class="form-label">
  121. 						<label>Radio Element 3</label>
  122. 					</div>
  123. 					<div class="form-elem">
  124. 						<ul>
  125. 							<li>
  126. 								<input id="radio-elem-3-1" name="radio-elem-3" type="radio" value="radio-elem-3-1" checked="checked" />
  127. 								<label for="radio-elem-3-1">Radio Value 1</label></li>
  128. 							<li>
  129. 								<input id="radio-elem-3-2" name="radio-elem-3" type="radio" value="radio-elem-3-2" />
  130. 								<label for="radio-elem-3-2">Radio Value 2</label>
  131. 							</li>
  132. 						</ul>
  133. 					</div>
  134. 				</div>
  135. 				<!-- / radio -->
  136.  
  137. 				<div class="form-element-block checkbox">
  138. 					<div class="form-label">
  139. 						<label>Checkbox Element 8</label>
  140. 					</div>
  141. 					<div class="form-elem">
  142. 						<ul>
  143. 							<li>
  144. 								<input id="checkbox-elem-8-1" name="checkbox-elem-8" type="checkbox" value="checkbox-elem-8-1" checked="checked" />
  145. 								<label for="checkbox-elem-8-1">Checkbox Value 1</label>
  146. 							</li>
  147. 							<li>
  148. 								<input id="checkbox-elem-8-2" name="checkbox-elem-8" type="checkbox" value="checkbox-elem-8-2" />
  149. 								<label for="checkbox-elem-8-2">Checkbox Value 2</label>
  150. 							</li>
  151. 						</ul>
  152. 					</div>
  153. 				</div>
  154. 				<!-- / checkbox -->
  155.  
  156. 				<div class="form-element-block select">
  157. 					<div class="form-label">
  158. 						<label for="select-elem-4">Select Element 4</label>
  159. 					</div>
  160. 					<div class="form-elem">
  161. 						<select id="select-elem-4" name="select-elem-4" size="1">
  162. 							<option value="" selected="selected">Please select an item</option>
  163. 							<option value="1">Select Option 1</option>
  164. 							<option value="2">Select Option 2</option>
  165. 							<option value="3">Select Option 3</option>
  166. 						</select>
  167. 					</div>
  168. 				</div>
  169. 				<!-- / select -->
  170.  
  171. 				<div class="form-element-block select-static">
  172. 					<div class="form-label">
  173. 						<label for="select-static-elem-5">Select Static Element 5</label>
  174. 					</div>
  175. 					<div class="form-elem">
  176. 						<select id="select-static-elem-5" name="select-static-elem-5" size="3">
  177. 							<option value="1">Select Option 1</option>
  178. 							<option value="2">Select Option 2</option>
  179. 							<option value="3">Select Option 3</option>
  180. 							<option value="3">Select Option 4</option>
  181. 						</select>
  182. 					</div>
  183. 				</div>
  184. 				<!-- / select-static -->
  185.  
  186. 				<div class="form-element-block submit">
  187. 					<div class="form-elem">
  188. 						<button id="submit-elem-6" type="submit">Submit</button>
  189. 					</div>
  190. 				</div>
  191. 				<!-- / submit -->
  192.  
  193. 				<div class="form-element-block reset">
  194. 					<div class="form-elem">
  195. 						<input id="reset-elem-7" type="reset" value="Reset" />
  196. 					</div>
  197. 				</div>
  198. 				<!-- / reset -->
  199.  
  200. 			</fieldset>
  201.  
  202. 		</form>
  203.  
  204. 	</section>
  205. 	<!-- / form-block -->
  206.  
  207. 	<aside class="form-commentary-block">
  208. 		<h1>Form Commentary Block</h1>
  209. 		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in felis dui, eu iaculis ante.</p>
  210. 	</aside>
  211. 	<!-- / form-commentary-block -->
  212.  
  213. </section>

Report this snippet  

You need to login to post a comment.