Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦

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


EXAMPLE

chapter9/email.html

2


HTML5: URL TEXT BOX<input>Accepts text information in URL format

Common Attributes:◦ type=“url”◦ name◦ id◦ size◦ maxlength◦ value◦ placeholder◦ required

3


EXAMPLE

chapter9/url.html

4


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


EXAMPLE

chapter9/tel.html

6


HTML5: SEARCH TEXT BOX

<input>Accepts search termsCommon Attributes:

◦ type=“search”◦ name◦ id◦ size◦ maxlength◦ value◦ placeholder◦ required

7


EXAMPLE

chapter9/search.html

8


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


EXAMPLE

chapter9/list.html

10


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


EXAMPLE

chapter9/range.html

12


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


EXAMPLE

chapter9/spinner.html

14


HTML5: CALENDAR CONTROL

<label for="myDate">Choose a Date</label><input type="date" name="myDate" id="myDate">

15


EXAMPLE

chapter9/date.html

16


EXAMPLE

chapter9/color.html

17


PRACTICE WITH AN HTML5 FORM

The form display and functioning varies with browser support.

18


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

Documents

Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦