-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathInputControls.html
More file actions
325 lines (275 loc) · 12.5 KB
/
InputControls.html
File metadata and controls
325 lines (275 loc) · 12.5 KB
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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
<!DOCTYPE html>
<html>
<head lang="en-US">
<title>Input Controls</title>
</head>
<body>
<h1>Input Controls</h1>
<p>
To build a form in HTML you can use a variety of input elements. Each input element offers options that allow you to control features such as validation or watermarks.<br />
</p>
<h2><form> element</h2>
The <strong>form</strong> element is used to create an HTML form for user input.<br />
It can contain one or more of the following elements: <input>, <textarea>, <select>, <button>, <option>, <optgroup>, <fieldset>, <label>.
<h3>Example</h3>
Here is a basic form that captures First name and Last name:
<p>
<form action="/action_page.php" method="get"><br />
<fieldset><br />
<legend>Here is a basic form that captures First name and Last name</legend><br />
<label for="fname">First name:</label><br />
<input type="text" id="fname" name="fname"><br><br><br />
<label for="lname">Last name:</label><br />
<input type="text" id="lname" name="lname"><br><br><br />
<input type="submit" value="Submit"><br />
</fieldset><br />
</form><br />
</p>
<form action="/action_page.php" method="get">
<fieldset>
<legend>First name and Last name</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br /><br />
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br /><br />
<input type="submit" value="Submit">
</fieldset>
</form>
<hr />
<h2><input> element</h2>
The <strong>input</strong> element is the most basic form element in HTML. It can be used to capture a wide variety of input including text and numeric values. This element has a type attribute that allows you to provide additional metadata about a specific input field. For example, you can designate a field to capture e-mail or URLs. The behavior of the web page may change depending on the browser or client device. For example, a mobile device may display a specific keyboard for URL input.
<h3>Example</h3>
Here is a basic form that captures a name and e-mail address:
<p>
<form ...><br />
Username: <input type="text" name="username" /><br />
E-mail Address: <input type="email" name="emailaddress" /><br />
</form><br />
</p>
<form ...>
Username: <input type="text" name="username" />
E-mail Address: <input type="email" name="emailaddress" />
</form>
<h3>Input Types</h3>
There are a wide variety of types that can be used with the input element.
<p>
This table shows the types and their respective functionality:
</p>
<table>
<tr>
<th>Type</th>
<th>Functionality</th>
</tr>
<tr>
<td>button</td>
<td>This renders a button that is typically used with JavaScript frameworks (such as Angular or Knockout)</td>
</tr>
<tr>
<td>checkbox</td>
<td>This renders a checkbox that can be independently clicked. The checkbox has a value of on or off</td>
</tr>
<tr>
<td>file</td>
<td>This renders a field for file selection and a Browse button to select the file on the client device</td>
</tr>
<tr>
<td>hidden</td>
<td>This does not render anything but it will store a value. This can be used to store values that need to be sent to the server when the form is saved</td>
</tr>
<tr>
<td>image</td>
<td>This renders an image that functions as a submit button (click on image to save form)</td>
</tr>
<tr>
<td>password</td>
<td>This renders a text input where the characters are masked for privacy.</td>
</tr>
<tr>
<td>radio</td>
<td>This renders a radio button that can be selected as part of a group of radio buttons.</td>
</tr>
<tr>
<td>text</td>
<td>This renders a basic text input field.</td>
</tr>
<tr>
<td>submit</td>
<td>This renders a button that submits the HTML form.</td>
</tr>
</table>
<hr />
<h2><textarea> element</h2>
<p>
The <strong>textarea</strong> element renders a multi-line text input control. This control allows the user to enter large quantities of text that may wrap and span across multiple lines.<br />
</p>
<h3>Example</h3>
<p>
In this example, we pre-populated the textarea element with text from the intro to Microsoft courses on edX.<br />
</p>
<p>
<textarea rows="3" cols="30"><br />
We live in a mobile-first and cloud-first world. Computing is ubiquitous, and experiences span devices and exhibit ambient intelligence.<br />
</textarea>
</p>
<textarea rows="3" cols="30">We live in a mobile-first and cloud-first world. Computing is ubiquitous, and experiences span devices and exhibit ambient intelligence.
</textarea>
<hr />
<h2><select> element</h2>
<p>
The <strong>select</strong> element renders a drop-down list with multiple options. A user can select one of the options. This element contains child option elements that allow you to designate (for each option) a value to be shown to the user and a value to be saved when the form is saved.
</p>
<h3>Example</h3>
<p>
In this example, we have listed some of the courses available on edX from Microsoft. The value attribute for each option element annotates the data that will be saved to the server when this form is saved. The content of the option element is displayed to the user.
</p>
<p>
<select><br />
<option value="DAT202x">Processing Big Data with Azure HDInsight</option><br />
<option value="DAT204x">Introduction to R Programming</option><br />
<option value="CLD203x">Office 365: Managing Identities and Services</option><br />
<option value="DEV208x">Introduction to jQuery</option><br />
</select><br />
</p>
<select>
<option value="DAT202x">Processing Big Data with Azure HDInsight</option>
<option value="DAT204x">Introduction to R Programming</option>
<option value="CLD203x">Office 365: Managing Identities and Services</option>
<option value="DEV208x">Introduction to jQuery</option>
</select>
<p>
Alternatively you can use the optgroup element to group related options:
</p>
<p>
<select><br />
<optgroup label="Data Platform"><br />
<option value="DAT202x">Processing Big Data with Azure HDInsight</option><br />
<option value="DAT204x">Introduction to R Programming</option><br />
</optgroup><br />
<optgroup label="Cloud"><br />
<option value="CLD203x">Office 365: Managing Identities and Services</option><br />
</optgroup><br />
<optgroup label="Development"><br />
<option value="DEV208x">Introduction to jQuery</option><br />
</optgroup><br />
</select><br />
</p>
<select>
<optgroup label="Data Platform">
<option value="DAT202x">Processing Big Data with Azure HDInsight</option>
<option value="DAT204x">Introduction to R Programming</option>
</optgroup>
<optgroup label="Cloud">
<option value="CLD203x">Office 365: Managing Identities and Services</option>
</optgroup>
<optgroup label="Development">
<option value="DEV208x">Introduction to jQuery</option>
</optgroup>
</select>
<hr />
<h2><button> element</h2>
This special <strog>button</strong> element functions similarly to an input element of type button but it also allows you to render custom content within the button.
Example
In this example, we render the Microsoft logo within a button.
<p>
<button type="button"><br />
<img src="images/microsoft.png" alt="Microsoft" /><br />
<br /><br />
Apply to Microsoft!<br />
</button>
</p>
<button type="button">
<img src="images/microsoft.png" alt="Microsoft" />
<br />
Apply to Microsoft!
</button>
<hr />
<h2><option> element</h2>
<p>
The option element defines an option in a (drop-down) select list. <br />
The option elements go inside a <select> element.
</p>
<select>
<option value="DAT202x">Processing Big Data with Azure HDInsight</option>
<option value="DAT204x">Introduction to R Programming</option>
<option value="CLD203x">Office 365: Managing Identities and Services</option>
<option value="DEV208x">Introduction to jQuery</option>
</select>
<hr />
<h2><optgroup> element</h2>
<p>
The optgroup is used to group related options in a drop-down list. <br />
If you have a long list of options, groups of related options are easier to handle for a user.
</p>
<select>
<optgroup label="Data Platform">
<option value="DAT202x">Processing Big Data with Azure HDInsight</option>
<option value="DAT204x">Introduction to R Programming</option>
</optgroup>
<optgroup label="Cloud">
<option value="CLD203x">Office 365: Managing Identities and Services</option>
</optgroup>
<optgroup label="Development">
<option value="DEV208x">Introduction to jQuery</option>
</optgroup>
</select>
<hr />
<h2><fieldset> element</h2>
<fieldset>The <fieldset> tag is used to group related elements in a <form>. It draws a box around the related elements. <br />
The <legend> <legend>Caption</legend> tag defines a <strong>Caption</strong> for the <fieldset> element.</fieldset>
<hr />
<h2><label> element</h2>
<p>
The <label> tag defines a label for a <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea> element. It does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control. The <em>for</em> attribute of the <label> tag should be equal to the <em>id</em> attribute of the related element to bind them together.
</p>
<p>
<form action="handler.php"><br />
<p><b>Lorem ipsum dolor sit amet...</b></p><br />
<input type="checkbox" id="check1"><label for="check1">Lorem</label><br /><br />
<input type="checkbox" id="check2"><label for="check2">Ipsum</label><br /><br />
<input type="checkbox" id="check3"><label for="check3">Dolor</label><br /><br />
<input type="checkbox" id="check4"><label for="check4">Sit amet</label><br />
</form><br />
</p>
<form action="handler.php">
<p><b>Lorem ipsum dolor sit amet...</b></p>
<input type="checkbox" id="check1"><label for="check1">Lorem</label><br />
<input type="checkbox" id="check2"><label for="check2">Ipsum</label><br />
<input type="checkbox" id="check3"><label for="check3">Dolor</label><br />
<input type="checkbox" id="check4"><label for="check4">Sit amet</label>
</form>
<form action="handler.php">
<p><b>Lorem ipsum dolor sit amet...</b></p>
<input type="checkbox" id="check1">Lorem<br />
<input type="checkbox" id="check2">Ipsum<br />
<input type="checkbox" id="check3">Dolor<br />
<input type="checkbox" id="check4">Sit amet
</form>
<hr />
<h2><meter> element</h2>
<p>
The <strong>meter</strong> element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate. This is also known as a gauge.
</p>
Use the meter element to measure data within a given range (a gauge):<br />
<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br />
<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter>
<hr />
<h2><output> element</h2>
The HTML <strong>output</strong> element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="b" name="b" value="50" /> +
<input type="number" id="a" name="a" value="10" /> =
<output name="result" for="a b">60</output>
</form>
<br />
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b">100</output>
</form>
<hr />
<h2><progress> element</h2>
<hr />
</body>
</html>