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

Input Types

Email Value automatically validated when form submitted Some mobile devices change on-screen keyboard to add @ 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 email is in appropriate email format

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

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

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

Attributes for Number and Range

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

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

Month

Time

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=“1978-07-14” /> Would only accept dates on or after July 14, 1978

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