-
Notifications
You must be signed in to change notification settings - Fork 64
/
example.html
186 lines (138 loc) · 6.31 KB
/
example.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta http-equiv="Content-Type" content=
"text/html; utf-8">
<title>html5Widgets Test Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- This CSS file is not necessary to use html5Widgets -->
<link type="text/css" rel="stylesheet" href="../../shared/css/useragentmanExample.css">
<link type="text/css" rel="stylesheet" href="css/basicForm.css" />
<!-- This style sheet can be used as a basis to create validation-state styles -->
<link type="text/css" rel="stylesheet" href="css/validity.css" />
<!-- Needed for Forms Feature Detection -->
<script type="text/javascript" src="../../shared/js/modernizr.com/Modernizr-2.5.3.forms.js">
</script>
<!-- Needed for Validation -->
<script type="text/javascript" src="../../shared/js/html5Forms.js" data-webforms2-support="all" data-webforms2-force-js-validation="true">
</script>
</head>
<body id="myExample" class="html5Widgets-debug">
<div id="exampleBlurb">
<p>The following shows a variety of HTML5 form elements, including
<code>color</code>. The form uses <code>HTML5Widgets</code> and
Weston Ruter's <code>webforms2</code> to add HTML5 Forms support to
browsers that don't currently support it. Browsers that partially
support the specification will use native functionality where applicable.
<a href="http://www.useragentman.com/blog/?p=1110">Back to User Agent Man HTML5 Forms article </a></p>
</div>
<form method="get" action="http://www.useragentman.com/testForm.php" >
<fieldset>
<legend>HTML5Widgets Test Form</legend>
<p>Form fields labelled <img src="images/asterisk_orange.png" alt="*"/> are mandatory.</p>
<table class="formTable">
<tbody>
<tr>
<th>Legal Name:</th>
<td><input type="text" name="name" value="" autofocus="autofocus" required="required" />
<div class="description">This field has focus when the page
first loads because it has it's <code>autofocus</code>
attribute set to <code>true</code>.
</td>
</tr>
<tr>
<th>Company Name:</th>
<td><input type="text" name="placeholderEl" value="" required="required"
placeholder="Leave blank if unemployed" />
<div class="description">This field has it's
<code>placeholder</code> attribute set to
<code>"Leave blank if unemployed"</code>
</td>
</tr>
<tr>
<th>Age:</th>
<td>
<output class="withRange" onforminput="this.value = parseInt(rangeEl.value)"
>-</output>
<input type="range" name="rangeEl" value=""
min="0" max="150" class="range" />
</td>
</tr>
<tr>
<th>Date/Time (Local)</th>
<td><input type="datetime-local" name="DateTimeLocalTest" required="required" value=
"">
<div class="description">The <code>datetime</code>,
<code>date</code>, <code>week</code> and <code>month</code>
input fields all show a calendar when clicked on. When
the user chooses a date, each input shows the date in
a slightly different format.
</div>
</td>
</tr>
<tr>
<th>Date/Time (UTC)</th>
<td><input type="datetime" name="DateTimeTest" required="required" value=
"">
<div class="description">The <code>datetime</code>,
<code>date</code>, <code>week</code> and <code>month</code>
input fields all show a calendar when clicked on. When
the user chooses a date, each input shows the date in
a slightly different format.
</div>
</td>
</tr>
<tr>
<th>Date</th>
<td><input type="date" name="DateTest" required="required" value=
""></td>
</tr>
<tr>
<th>Month</th>
<td><input type="month" name="MonthTest" required="required" value=
""></td>
</tr>
<tr>
<th>Week</th>
<td><input type="week" name="WeekTest" required="required" value=
""></td>
</tr>
<tr>
<th>Colour</th>
<td><input type="color" name="ColorTest" required="required" value=
"" ></td>
</tr>
<tr>
<th>Test validity</th>
<td><input type="text" name="safasfas" value="" pattern="[0-9]*" required="required" placeholder="Required Field"
data-errormessage="You must enter a number here." />
<div class="description">To test the <strong>required</strong> and <strong>pattern</strong>
attributes, this field only accepts numbers.</div>
</td>
</tr>
<tr>
<th>Terms and Conditions:</th>
<td>
I promise to give my first born to The Evil Corporation
in return for a free iPad.
<br />
<br />
<label><input type="checkbox" class="check" name="iAgree" value="yesDammitYes" required="required"
data-errormessage="Sorry, but you must submit to your new evil overlord in order to continue."/>I submit to my new evil overlord</label>
</td>
</tr>
<tr>
<th></th>
<td >
<input type="submit" name="submit me" value="Submit" />
</td>
</tr>
</tbody>
</table>
</fieldset>
</form>
<div id="supports">
</div>
</body>
</html>