Everybody knows about web forms, right? Well and might be aware of the fact that these days creating a form in not just about creating a few <input > elements, an <input type="password"> with an <input > button. The web has expanded and forms have become even more complex with them.
Let's face it – HTML forms have always been a pain. If there was a need for really sophisticated forms, the developers have to use JavaScript libraries and frameworks. I myself have widely used jQuery’s datepicker in forms because HTML 4 had no support for any input type that would take a date as input.
Developers have been using such certainly matured solutions for the overall functionality and look and feel of the forms.
HTML5 aims to standardize some of the most common rich form controls, making them render natively in the browser and obviating the need for these script-heavy workarounds.
Though I am pretty sure that almost everyone is aware of what an input type is, yet I would like to mention here that the INPUT element defines a form control for the user to enter input.
HTML5 has added a whole bunch of new values for the input element’s type attribute, making some big improvements in form creations.
Let us look at the input types that HTML 5 has come up with, there are nearly 23 input types support in HTML5 out of which 13 are new introduced, isn’t that great.
Not all browsers support all the new input types introduced in HTML5, but the good thing is that when viewed in a browser that doesn't support them, these input types fall back to text input.
Let's face it – HTML forms have always been a pain. If there was a need for really sophisticated forms, the developers have to use JavaScript libraries and frameworks. I myself have widely used jQuery’s datepicker in forms because HTML 4 had no support for any input type that would take a date as input.
Developers have been using such certainly matured solutions for the overall functionality and look and feel of the forms.
HTML5 aims to standardize some of the most common rich form controls, making them render natively in the browser and obviating the need for these script-heavy workarounds.
Though I am pretty sure that almost everyone is aware of what an input type is, yet I would like to mention here that the INPUT element defines a form control for the user to enter input.
HTML5 has added a whole bunch of new values for the input element’s type attribute, making some big improvements in form creations.
Let us look at the input types that HTML 5 has come up with, there are nearly 23 input types support in HTML5 out of which 13 are new introduced, isn’t that great.
Not all browsers support all the new input types introduced in HTML5, but the good thing is that when viewed in a browser that doesn't support them, these input types fall back to text input.
Input Types Supported in HTML5
input type | purpose | status |
---|---|---|
text | For entering one line plain text | |
password | For entering one line password | |
checkbox | For entering option that can be toggled | |
radio | For selection of one item from a list of items | |
button | Represents a simple button | |
submit | Represents a button for submitting a form. | |
reset | Represents a button for resetting a form. | |
file | let users include entire files from their system into a form submission | |
image | Creates an image control that, when clicked, causes the form to be immediately submitted. | |
hidden | Represents a value that is not intended to be examined or manipulated by the user | |
datetime | For entering a date and time with the time zone set to UTC. | new |
datetime-local | For entering a date and time with no time zone | new |
date | For entering a date with no time zone. | new |
month | For entering a date with a year and a month, but no time zone. | new |
time | For entering a time value with hour, minute, seconds, and fractional seconds, but no time zone. | new |
week | For entering a date that consists of a week-year number and a week number, but no time zone | new |
number | For numerical input. | new |
range | For numerical input, but unlike number, the actual is not important. | new |
For entering either a single email address or a list of email addresses. | new | |
url | For entering a single URL. | new |
search | To prompt users to enter text that they want to search for. | new |
tel | For entering a telephone number. | new |
color | For choosing color through a color well control. | new |
Also one important point to know is that an input element with no type attribute specified represents the same thing as an input element with its type attribute set to "text".
The good things about HTML 5 input types are not just finished with addition of over a dozen of them, but rather it’s much more than that…
Let us look at some really great attributes that HTML5 has come up with:
Placeholder texts
One big improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder is actually a hint to the user of what can be entered in the input field. As soon as the user click on (or tab to) the input field and start typing, the placeholder text disappears.
In HTML 4 this illusion of texts residing inside an empty HTML input type is done using scripts. But with HTML5 this has become so easy; this is how you can use a placeholder attribute:
Browsers that don’t support the placeholder attribute will simply ignore it.
This is how it appears in firefox
The good things about HTML 5 input types are not just finished with addition of over a dozen of them, but rather it’s much more than that…
Let us look at some really great attributes that HTML5 has come up with:
Placeholder texts
One big improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder is actually a hint to the user of what can be entered in the input field. As soon as the user click on (or tab to) the input field and start typing, the placeholder text disappears.
In HTML 4 this illusion of texts residing inside an empty HTML input type is done using scripts. But with HTML5 this has become so easy; this is how you can use a placeholder attribute:
<input name="q" placeholder="Go to a Website">
Browsers that don’t support the placeholder attribute will simply ignore it.
This is how it appears in firefox
Autofocus Fields
There is another great attribute of HTML5 that can help you save some time from writing script for delegating focus to a particular input type field as soon as the page loads.
HTML5 introduces an autofocus attribute on all web form controls.
Well what autofocus attribute does is as soon as the page loads, it moves the input focus to a particular input field. But because it’s just markup instead of script, the behavior will be consistent across all web sites.
Here is how you can set a form field to autofocus:
As not every browser available today do support autofocus attribute therefore the browsers that don’t support the autofocus attribute will simply ignore it.
Required Fields
What do you do if you have to specify that a certain field in your form is required and should not be left blank before submitting the form? Absolutely you use script for that, don’t you?
With HTML5 we do not have to do so!!!
Here is how you can do so using HTML5:
This is how it appears in Firefox if the user tries to submit the form without filling the field
There is another great attribute of HTML5 that can help you save some time from writing script for delegating focus to a particular input type field as soon as the page loads.
HTML5 introduces an autofocus attribute on all web form controls.
Well what autofocus attribute does is as soon as the page loads, it moves the input focus to a particular input field. But because it’s just markup instead of script, the behavior will be consistent across all web sites.
Here is how you can set a form field to autofocus:
<input name="q" autofocus>
As not every browser available today do support autofocus attribute therefore the browsers that don’t support the autofocus attribute will simply ignore it.
Required Fields
What do you do if you have to specify that a certain field in your form is required and should not be left blank before submitting the form? Absolutely you use script for that, don’t you?
With HTML5 we do not have to do so!!!
Here is how you can do so using HTML5:
<input name="q" required>
This is how it appears in Firefox if the user tries to submit the form without filling the field
Further Form Validation Support:
Now let us talk about the most exciting part of HTML 5 forms. This is the automatic input validation.
When you create your user interface you always provide a client side validation for the various input field, like if your form has a field for email then you need to make sure that user enters a correct pattern of email for it similarly for urls also or for any numeric field you have to make sure that user does not enter a non-numeric values etc. There are always such validations to be implemented.
For such validation you again have to write some scripts, don’t you have to? Even if you have created scripts with so much of toil yet there are chances that some of the visitors of the web page may have JavaScript disabled in their browsers.
But with HTML 5 new input types most modern browsers validate the type of input.
When you create your user interface you always provide a client side validation for the various input field, like if your form has a field for email then you need to make sure that user enters a correct pattern of email for it similarly for urls also or for any numeric field you have to make sure that user does not enter a non-numeric values etc. There are always such validations to be implemented.
For such validation you again have to write some scripts, don’t you have to? Even if you have created scripts with so much of toil yet there are chances that some of the visitors of the web page may have JavaScript disabled in their browsers.
But with HTML 5 new input types most modern browsers validate the type of input.
Example: if your form has <input type="email"> field, the browser automatically offers RFC compliant email validation.
The good thing is that this validation works even if scripting is disabled. Now you may get how useful is that.
Screenshots of email type validation and validation of numbers that take min-max attributes in Opera 11 is shown below:
The good thing is that this validation works even if scripting is disabled. Now you may get how useful is that.
Screenshots of email type validation and validation of numbers that take min-max attributes in Opera 11 is shown below:
This mark up validation is active in HTML 5 by default. However HTML 5 also allows that you can disable these validations.
All you have to do is to use the “novalidate” attribute with the form:
All you have to do is to use the “novalidate” attribute with the form:
<form novalidate>
<input type="email" id="addr">
<input type="email" id="addr">
<form>
<input type="email" id="addr">
<input type="email" id="addr">
<form>
That is all for now about the wonderful input types provided by HTML 5. Hope you too would have enjoyed exploring the good facts about HTML 5 input types.