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.

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

Report this snippet  

You need to login to post a comment.