Copyright © Terry Felke-Morris HTML5: TEXT BOX Accepts text information in address format Common Attributes: ◦ type=“ ” ◦ name ◦ id ◦ size ◦ maxlength ◦ value ◦ placeholder ◦ required 1
Copyright © Terry Felke-Morris EXAMPLE chapter9/ .html 2
Copyright © Terry Felke-Morris HTML5: URL TEXT BOX 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 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 Accepts search terms Common 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 Favorite Color: 9
Copyright © Terry Felke-Morris EXAMPLE chapter9/list.html 10
Copyright © Terry Felke-Morris HTML5: SLIDER CONTROL Choose a number between 1 and 100: Low High 11
Copyright © Terry Felke-Morris EXAMPLE chapter9/range.html 12
Copyright © Terry Felke-Morris HTML5: SPINNER CONTROL Choose a number between 1 and 10: <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 Choose a Date 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) chapter9/form6.html 19