1. HTML5 Form Types – Newer Available Fields
May or may not work in older browsers
HTML5

2. Input Types

3. Email Value automatically validated when form submitted
Some mobile devices change on-screen keyboard to and .com options
This is beyond the scope of what we will do in this course – but validation of form input is important in ensuring the safe and accurate collection of data from forms. Validation in this case means ensuring the is in appropriate format

4. URL Value automatically validated when form submitted
Mobile - changes on-screen keyboard to add .com options

5. Number Can set restrictions on number accepted Legal Range Legal Range
User may type number or use arrows to select values within range. If submit invalid, get message
User may type number or use arrows to select values within range. If submit invalid, get message

6. Range Value from range of numbers Displayed as a slider bar
Internet Explorer
Value from range of numbers
Displayed as a slider bar
Chrome

7. Attributes for Number and Range

8. Date Pickers Variations based on part of date you want
Defaults to current date and time
Use arrows to change or type value
Validates to ensure real date
Some variations shown next

9. Date (general)
min and max can be set for dates – use format “yyyy-mm-dd” for the values

10. Month

11. Time

12. Dates with Min/Max Attribute names: Values must take the format:
“yyyy-mm-dd”
Where yyyy is a 4-digit year
mm is a 2-digit month
dd is a 2-digit representation of day
Example:
<input type=“date” min=“ ” />
Would only accept dates on or after July 14, 1978

13. Placeholder Attribute
Places a “ghost” light gray example of what to enter in the box
can be used with anything that is textual type input