HTML5 Input Types
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.
- url
- number
- range
- date
- month
- week
- time
- datetime
- datetime-local
- search
- color
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
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
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
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
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
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.
Share This Post!
