Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address...
-
Upload
marcia-barrett -
Category
Documents
-
view
220 -
download
1
Transcript of Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address...
![Page 1: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/1.jpg)
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
![Page 2: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/2.jpg)
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/email.html
2
![Page 3: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/3.jpg)
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
![Page 4: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/4.jpg)
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/url.html
4
![Page 5: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/5.jpg)
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
![Page 6: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/6.jpg)
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/tel.html
6
![Page 7: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/7.jpg)
Copyright © Terry Felke-Morris
HTML5: SEARCH TEXT BOX
<input>Accepts search termsCommon Attributes:
◦ type=“search”◦ name◦ id◦ size◦ maxlength◦ value◦ placeholder◦ required
7
![Page 8: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/8.jpg)
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/search.html
8
![Page 9: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/9.jpg)
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
![Page 10: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/10.jpg)
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/list.html
10
![Page 11: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/11.jpg)
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
![Page 12: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/12.jpg)
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/range.html
12
![Page 13: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/13.jpg)
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
![Page 14: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/14.jpg)
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/spinner.html
14
![Page 15: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/15.jpg)
Copyright © Terry Felke-Morris
HTML5: CALENDAR CONTROL
<label for="myDate">Choose a Date</label><input type="date" name="myDate" id="myDate">
15
![Page 16: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/16.jpg)
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/date.html
16
![Page 17: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/17.jpg)
Copyright © Terry Felke-Morris
EXAMPLE
chapter9/color.html
17
![Page 18: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/18.jpg)
Copyright © Terry Felke-Morris
PRACTICE WITH AN HTML5 FORM
The form display and functioning varies with browser support.
18
![Page 19: Copyright © Terry Felke-Morris HTML5: EMAIL TEXT BOX Accepts text information in e-mail address format Common Attributes: ◦ type=“email” ◦ name ◦ id ◦](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf8a1a28abf838c8a91f/html5/thumbnails/19.jpg)
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