PROF. DAVID ROSSITER
MORE ON FORMS PROF. DAVID ROSSITER
1/17
AFTER THIS PRESENTATION You'll be able to differentiate between the many form elements
2/17
ELEMENTS WE WILL LOOK AT <select>
3/17
ATTRIBUTES WE WILL LOOK AT placeholder attribute value attribute autofocus attribute required attribute
4/17
A REMINDER
Please enter your text here
5/17
FORM INPUT ELEMENTS Submit button
Plain text
Checkbox
Radio button
Password field
6/17
TEXT, CHECKBOX & RADIO
Please enter your name.
Please select each of the following that you have.
Car
Teddy bear
Toothbrush
Please indicate your intelligence level.
High
Medium
Low
7/17
Please enter your name. Please select each of the following that you have. Car Teddy bear Toothbrush Please indicate your intelligence level. High Medium Low 8/17
PASSWORD
9/17
What is the secret password?
10/17
BE CAREFUL!
11/17
What is the secret password? Send
Select here to open the HTML file
12/17
SELECTING FROM A LIST
13/17
What city would you like to go to? Hong Kong
14/17
USEFUL ATTRIBUTES value="something" fixes what is shown at the start placeholder="something" shows useful text which disappears when the user enters something autofocus sets which field is given focus at the start required means this field must be completed
15/17
EXAMPLE
First name:
Last name:
Age:
16/17
Please fill in the following information: First name: Dave Last name: Your last name goes here Age:
Submit
17/17
1/17
AFTER THIS PRESENTATION You'll be able to differentiate between the many form elements
2/17
ELEMENTS WE WILL LOOK AT <select>
3/17
ATTRIBUTES WE WILL LOOK AT placeholder attribute value attribute autofocus attribute required attribute
4/17
A REMINDER
Please enter any feedback you have.
Please enter your text here
5/17
FORM INPUT ELEMENTS Submit button
Plain text
Checkbox
Radio button
Password field
6/17
TEXT, CHECKBOX & RADIO
Please enter your name.
Please select each of the following that you have.
Car
Teddy bear
Toothbrush
Please indicate your intelligence level.
High
Medium
Low
7/17
Please enter your name. Please select each of the following that you have. Car Teddy bear Toothbrush Please indicate your intelligence level. High Medium Low 8/17
PASSWORD
What is the secret password?
9/17
What is the secret password?
10/17
BE CAREFUL!
What is the secret password?
11/17
What is the secret password? Send
Select here to open the HTML file
12/17
SELECTING FROM A LIST
What city would you like to go to?
<select name="cities"> Hong Kong Vancouver San Francisco13/17
What city would you like to go to? Hong Kong
14/17
USEFUL ATTRIBUTES value="something" fixes what is shown at the start placeholder="something" shows useful text which disappears when the user enters something autofocus sets which field is given focus at the start required means this field must be completed
15/17
EXAMPLE
Please fill in the following information:
First name:
Last name:
Age:
16/17
Please fill in the following information: First name: Dave Last name: Your last name goes here Age:
Submit
17/17
