1. Web Development & Design Foundations with HTML5 8th Edition
Chapter 9 Key Concepts

2. HTML5: Email Text Box <input>
Accepts text information in address format
Common Attributes:
type="emai“
name id
size
maxlength
value
placeholder
required

3. Example
chapter9/ .html

4. HTML5: URL Text Box <input>
Accepts text information in URL format
Common Attributes:
type="url"
name id
size
maxlength
value
placeholder
required

5. Example
chapter9/url.html

6. HTML5: Telephone Number Text Box
<input>
Accepts text information in telephone number format
Common Attributes:
type="tel“
name id
size
maxlength
value
placeholder
required

7. HTML5: Search Text Box <input> Accepts search terms
Common Attributes:
type=“search”
name id
size
maxlength
value
placeholder
required

8. HTML5: Search Text Box <input> Accepts search terms
Common Attributes:
type="search"
name id
size
maxlength
value
placeholder
required

9. Example
chapter9/search.html

10. HTML5: Datalist Control
<label for="color">Favorite Color:</label> <input type="text" name="color" id="color" list="colors" > <datalist id="colors"> <option value="red" label="Red"> <option value="green" label="Green"> <option value="blue" label="Blue"> <option value="yellow" label=“Yellow"> <option value="pink" label="Pink"> <option value="black" label="Black"> </datalist>

11. Example
chapter9/list.html

12. 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

13. Example
chapter9/range.html

14. 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">

15. Example
chapter9/spinner.html

16. HTML5: Calendar Control
<label for="myDate">Choose a Date</label> <input type="date" name="myDate" id="myDate">

17. Example
chapter9/date.html
Works with Chrome.

18. HTML5: Color Well Control
<label for="myColor">Choose a color:</label> <input type="color" name="myColor" id="myColor">

19. Example
chapter9/color.html

20. Practice with an HTML5 Form
The form display and functioning varies with browser support.

21. Hands-on practice 9.6 (page 431-3)
<input type="text" name="myName" id="myName" required="required" placeholder="your first and last name">
chapter9/9.6/form.html