Update elements example - date of birth

Fixes #412. Uses date example from GOV.UK elements.
alphagov · Sep 7, 2017 · f84f3de · f84f3de
1 parent 695e8d5
commit f84f3de
Showing 1 changed file with 12 additions and 14 deletions.
diff --git a/docs/views/examples/elements/forms.html b/docs/views/examples/elements/forms.html
@@ -38,28 +38,26 @@ <h1 class="form-title heading-large">
     <!-- Date of birth -->
     <div class="form-group">
       <fieldset>
-        <legend class="form-label-bold">Date of birth</legend>
-
+        <legend>
+          <span class="form-label-bold">
+            What is your date of birth?
+          </span>
+          <span class="form-hint">For example, 31 3 1980</span>
+        </legend>
         <div class="form-date">
-
-          <p class="form-hint">For example, 31 3 1980</p>
-
           <div class="form-group form-group-day">
-            <label for="dob-day">Day</label>
-            <input class="form-control" id="dob-day" type="number" pattern="[0-9]*" min="0" max="31">
+            <label class="form-label" for="dob-day">Day</label>
+            <input class="form-control" id="dob-day" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31">
           </div>
-
           <div class="form-group form-group-month">
-            <label for="dob-month">Month</label>
-            <input class="form-control" id="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
+            <label class="form-label" for="dob-month">Month</label>
+            <input class="form-control" id="dob-month" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
           </div>
-
           <div class="form-group form-group-year">
-            <label for="dob-year">Year</label>
-            <input class="form-control" id="dob-year" type="number" pattern="[0-9]*" min="0" max="2014">
+            <label class="form-label" for="dob-year">Year</label>
+            <input class="form-control" id="dob-year" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
           </div>
         </div>
-
       </fieldset>
     </div>