HTML 5 EMAIL TEXT BOX input Accepts text
HTML 5: EMAIL TEXT BOX <input> Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦ size ◦ maxlength ◦ value ◦ placeholder ◦ required Copyright © Terry Felke-Morris 1
EXAMPLE chapter 9/email. html Copyright © Terry Felke-Morris 2
HTML 5: URL TEXT BOX <input> Accepts text information in URL format Common Attributes: ◦ type=“url” ◦ name ◦ id ◦ size ◦ maxlength ◦ value ◦ placeholder ◦ required Copyright © Terry Felke-Morris 3
EXAMPLE chapter 9/url. html Copyright © Terry Felke-Morris 4
HTML 5: TELEPHONE NUMBER TEXT BOX <input> Accepts text information in telephone number format Common Attributes: ◦ type=“tel” ◦ name ◦ id ◦ size ◦ maxlength ◦ value ◦ placeholder ◦ required Copyright © Terry Felke-Morris 5
EXAMPLE chapter 9/tel. html Copyright © Terry Felke-Morris 6
HTML 5: SEARCH TEXT BOX <input> Accepts search terms Common Attributes: ◦ type=“search” ◦ name ◦ id ◦ size ◦ maxlength ◦ value ◦ placeholder ◦ required Copyright © Terry Felke-Morris 7
EXAMPLE chapter 9/search. html Copyright © Terry Felke-Morris 8
HTML 5: 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> Copyright © Terry Felke-Morris 9
EXAMPLE chapter 9/list. html Copyright © Terry Felke-Morris 10
HTML 5: SLIDER CONTROL <label for="my. Choice"> Choose a number between 1 and 100: </label> Low <input type="range" name="my. Choice" id="my. Choice" min="1" max="100"> High Copyright © Terry Felke-Morris 11
EXAMPLE chapter 9/range. html Copyright © Terry Felke-Morris 12
HTML 5: SPINNER CONTROL <label for="my. Choice">Choose a number between 1 and 10: </label> <input type="number" name="my. Choice" id="my. Choice" min="1" max="10"> Copyright © Terry Felke-Morris 13
EXAMPLE chapter 9/spinner. html Copyright © Terry Felke-Morris 14
HTML 5: CALENDAR CONTROL <label for="my. Date">Choose a Date</label> <input type="date" name="my. Date" id="my. Date"> Copyright © Terry Felke-Morris 15
EXAMPLE chapter 9/date. html Copyright © Terry Felke-Morris 16
EXAMPLE chapter 9/color. html Copyright © Terry Felke-Morris 17
PRACTICE WITH AN HTML 5 FORM The form display and functioning varies with browser support. Copyright © Terry Felke-Morris 18
HANDS-ON PRACTICE 9. 6 (PAGE 415) <input type="text" name="my. Name" id="my. Name" required="required" placeholder="your first and last name"> chapter 9/form 6. html Copyright © Terry Felke-Morris 19
- Slides: 19
