Post on 17-Jan-2016
Copyright © Terry Felke-Morris
HTML5: EMAIL TEXT BOX <input>Accepts text information in e-mail address format
Common Attributes:◦ type=“email”◦ name◦ id◦ size◦ maxlength◦ value◦ placeholder◦ required
1
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/email.html
2
Copyright © Terry Felke-Morris
HTML5: URL TEXT BOX<input>Accepts text information in URL format
Common Attributes:◦ type=“url”◦ name◦ id◦ size◦ maxlength◦ value◦ placeholder◦ required
3
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/url.html
4
Copyright © Terry Felke-Morris
HTML5: TELEPHONE NUMBER TEXT BOX<input>Accepts text information in telephone number format
Common Attributes:◦ type=“tel”◦ name◦ id◦ size◦ maxlength◦ value◦ placeholder◦ required
5
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/tel.html
6
Copyright © Terry Felke-Morris
HTML5: SEARCH TEXT BOX
<input>Accepts search termsCommon Attributes:
◦ type=“search”◦ name◦ id◦ size◦ maxlength◦ value◦ placeholder◦ required
7
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/search.html
8
Copyright © Terry Felke-Morris
HTML5: DATALIST CONTROL <label for="color">Favorite Color:</label>
<input type="text" name="color" id="color" list="colors" >
<datalist id="colors">
<option value="red">
<option value="green">
<option value="blue">
<option value="yellow">
<option value="pink">
<option value="black">
</datalist>
9
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/list.html
10
Copyright © Terry Felke-Morris
HTML5: SLIDER CONTROL
<label for="myChoice">
Choose a number between 1 and 100:</label><br>
Low <input type="range" name="myChoice" id="myChoice" min="1" max="100"> High
11
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/range.html
12
Copyright © Terry Felke-Morris
HTML5: SPINNER CONTROL
<label for="myChoice">Choose a number between 1 and 10:</label><input type="number" name="myChoice" id="myChoice"
min="1" max="10">
13
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/spinner.html
14
Copyright © Terry Felke-Morris
HTML5: CALENDAR CONTROL
<label for="myDate">Choose a Date</label><input type="date" name="myDate" id="myDate">
15
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/date.html
16
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/color.html
17
Copyright © Terry Felke-Morris
PRACTICE WITH AN HTML5 FORM
The form display and functioning varies with browser support.
18
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 9.6 (PAGE 415) <input type="text" name="myName" id="myName"
required="required" placeholder="your first and last name">
chapter9/form6.html
19