The input types in HTML5 form element
From a decade, HTML form has some common input types & some attributes for them. We widely used them in our applications & all browsers support them.
I just list out the input types available in HTML4 form element at here for a reference.
- Radio button
- Password field
- Drop-down list
- File selection
- Submit button
- Text field
We don’t need an explanation about these form inputs because we are regularly using them in our daily life. In our contact forms & online application pages, we are using these input types.
In HTML5, We have an improved Form element. Now we have more than a dozen new input types and too many new attributes for them. Today, I’m going to explore this new input types in HTML5 form element.
| ||To enter a URL, we can use |
| ||The |
|For entering email addresses. By default it will only take one, but if the multiple attribute is provided, a comma separated list of email addresses is valid.|
| ||A text input field styled in a way that is consistent with the platform’s search field.|
| ||For numeric input, can be any rational integer or float value. It support attribute like |
| ||It help us to pick a color and returns the color’s hexadecimal representation.|
| ||It is also used for number input, but unlike the number input type, the value is less important. It is displayed to the user as a slider control.|
| ||Used to enter a date and time value where the time zone is provided as GMT.|
| ||For entering a date and time value where the time zone provided is the local time zone.|
| ||For entering a date (only) with no time zone provided.|
| ||For entering a time (only) with no time zone provided.|
| ||For entering a date that consists of a week-year number and a week number, but no time zone.|
| ||For entering a date with a year and a month, but no time zone.|
The benefits of these new input types
This new input types give some hints to the web browser about what type of keyboard layout to display for on-screen keyboards.
Also the modern browsers can provide built-in validation for some input types like email and url. On other elements, we can indicate a valid input format by providing a regular expression in the the
Any way, these input types will help to make beautiful & user friendlier web forms in feature days. We want to play more with them to get our hands dirty.
Do you need any help on HTML5? I'm happy to help you.
- Get variation product data on selecting variation options - WooCommerce
- Add TinyMCE WYSIWYG (Rich text area) meta box - WordPress
- Reorder product tabs in single product page - WooCommerce
- Download webpage for offline reading - wget
- Remove product tabs in single product page - WooCommerce
Your Questions / Comments
If you found this article interesting, found errors, or just want to discuss about them, please get in touch.