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.
- Redirect single pages of post type in to post type archive page - WordPress
- Get details about available image sizes - WordPress
- Change shipping and billing address title - WooCommerce
- Add phone number to the output of the addresses on the "My Account" page - WooCommerce
- Conditional tags for order thank you page - WooCommerce
Your Questions / Comments
If you found this article interesting, found errors, or just want to discuss about them, please get in touch.