This repository has been archived by the owner on Aug 17, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
/
validation-examples.html
123 lines (99 loc) · 4.17 KB
/
validation-examples.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
{% extends "layout.html" %}
{% block page_title %}
GOV.UK prototype kit
{% endblock %}
{% block content %}
<main id="content" role="main">
<div class="grid-row">
<div class="column-two-thirds">
<h1 class="heading-xlarge">Validation</h1>
<form>
<!-- Text inputs -->
<div class="form-group">
<fieldset data-required data-error="Cannot be blank">
<label class="form-label-bold" for="full-name">
Full name
<span class="form-hint">As shown on your birth certificate or passport</span>
</label>
<input id="full-name" class="form-control" name="full-name" type="text">
</fieldset>
</div>
<div class="form-group">
<fieldset>
<label class="form-label-bold" for="occupation">
Occupation
</label>
<input class="form-control" name="occupation" type="text">
</fieldset>
</div>
<!-- Date of birth -->
<div class="form-group">
<fieldset data-required data-error="Cannot be blank">
<legend class="form-label-bold">Date of birth</legend>
<p class="form-hint" id="dob-hint">For example, 31 3 1980</p>
<div class="form-date">
<div class="form-group form-group-day">
<label for="dob-day">Day</label>
<input class="form-control" id="dob-day" name="dob-day" type="text" pattern="[0-9]*" min="0" max="31" aria-describedby="dob-hint">
</div>
<div class="form-group form-group-month">
<label for="dob-month">Month</label>
<input class="form-control" id="dob-month" name="dob-month" type="text" 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" name="dob-year" type="text" pattern="[0-9]*" min="0" max="2016">
</div>
</div>
</fieldset>
</div>
<!-- Radio buttons -->
<div class="form-group">
<fieldset class="inline" data-required data-error="Choose yes or no">
<legend class="heading-medium">Do have a personal user account?</legend>
<label class="block-label" for="radio-inline-1">
<input id="radio-inline-1" type="radio" name="radio-inline-group" value="Yes">
Yes
</label>
<label class="block-label" for="radio-inline-2">
<input id="radio-inline-2" type="radio" name="radio-inline-group" value="No">
No
</label>
</fieldset>
</div>
<!-- Checkboxes -->
<div class="form-group">
<fieldset data-required data-error="Choose at least one option">
<legend class="heading-medium">Which documents do you have?</legend>
<label class="block-label" for="passport">
<input id="passport" name="doc-types" type="checkbox" value="passport">
Passport
</label>
<label class="block-label" for="driving-licence">
<input id="driving-licence" name="doc-types" type="checkbox" value="driving-licence">
Driving licence
</label>
<label class="block-label" for="birth-certificate">
<input id="birth-certificate" name="doc-types" type="checkbox" value="birth-certificate">
Birth certificate
</label>
</fieldset>
</div>
<!-- Textarea -->
<div class="form-group">
<fieldset data-required data-error="Cannot be blank">
<legend class="heading-medium">Do you have difficulty completing daily activities</legend>
<label class="form-label" for="circumstances">
Tell us about your circumstances
</label>
<textarea id="circumstances" rows="5" cols="30" class="form-control" name="circumstances"></textarea>
</fieldset>
</div>
<div class="form-group">
<input type="submit" class="button" value="Continue">
</div>
</form>
</div>
</div>
</main>
{% endblock %}