HTML5 defines over a dozen new input types that you can use in your forms to allow better input control. We are about to know them today.
Email type is used to get email address and it is validated automatically when form is submitted. Browsers that don’t support type=”email” will treat it as type=”text” and render it as a plain text field.
Url type is for getting urls/ website addresses. Browsers render type=”url” like a regular text box, so users won’t even notice until they submit the form. Browsers that don’t support HTML5 will treat type=”url” exactly like type=”text”. It is validated when they submit form. It doesn’t allow spaces in the url. it should have an extention like .com, .org, etc.;
Number type is used to get a number, And you can even set attributes like min, max, step etc…
The attributes are
- type=”number” means that this is a number field.
- min=”0″ specifies the minimum acceptable value.
- max=”10″ is the maximum acceptable value.
- step=”2″ combined with the min value, defines the acceptable numbers in the range: 0, 2, 4, and so on, up to the max value.
- value=”6″ is the default value.
HTML5 also adds some more attributes.
- input.stepUp(n) increases the field’s value by n.
- input.stepDown(n) decreases the field’s value by n.
- input.valueAsNumber returns the current value as a floating point number. (The input.value property is always a string.)
Browsers that don’t support type=”number” will treat it as type=”text”. The default value will show up in the field, but the other attributes like min and max will be ignored.
Range input is used to get a number as slider. It supports all the attributes number type supports. The only difference is interface. It shows a slider instead of text box. The browsers that don’t support will render it as simple text field.
date, month, week, time, datetime, datetime-local
These are date pickers.
- date – Selects date, month and year
- month – Selects month and year
- week – Selects week and year
- time – Selects time (hour and minute)
- datetime – Selects time, date, month and year (UTC time)
- datetime-local – Selects time, date, month and year (local time)
Date pickers will be rendered as plain text boxes in browsers that don’t recognize type=”date” and others.
Search type is just a text type, used for search fields, like a site search, or Google search. When you type something then it shows a ‘X’ mark, by clicking it clears the text box.
Color type is a color picker, which lets you pick a color and returns the color’s hexadecimal representation. Opera supports the color type. The browsers which don’t support it will display a text filed.