HTML5 makes many changes to the way pages are put together and the structured they should follow. It also brings with it some brand new elements and attributes to play around with. One area which seems to have been given the greatest over haul is that of the various form elements. This article will go some way to introducing you to the new type attribute states and there purpose.
The standard form input element has barely changed since forms first appeared on the web, now with the help of the type attribute you can easily add style and functionality to form inputs relevant to the data types they will accept.
A quick note on browsers, at the time of writing this alot of the things shown on this page are cutting edge (in terms of browsers anyway). Due to their nature most will revert to simple input fields when displayed within non-compliant browsers, if you are having difficulty seeing them Opera currently provides the fullest supports for them all.
So we all know the basic input element its one of the most fundamental building block of a form. It is also likely that at some point you've all use the different type values and know how they work.
Well HTML5 bring us a whole load more of these type states and it has to be said they are pretty cool and very useful.
The email state appears much like a standard text input. Used to enter a single email address or comma separated list of email addresses.
<label>e-mail: <input type='email' name='email' /></label>
User agents should recognize it as an email input and interact accordingly, mobile devices for example should change the onscreen keyboard layout for email entry. The input data will be checked against a regular expression defined to recognize email address. For those interested the regular expression looks like this
1*( atext / "." ) "@" ldh-str *( "." ldh-str )
If the data does not match an email address the form will fail to submit.
The tel state appears much like a standard text input. Used simply to take telephone numbers.
<label>telephone number: <input type='tel' name='tel' /></label>
There is no real validation check performed upon the tel state due to the variation in possible phone numbers around the word.
The url state appears much like a slightly extended text input. Used to enter a single web address url.
<label>url: <input type='url' name='url' /></label>
Urls can be entered with or without the http:// if without it will be automatically appended to the start of the data on form submission. The web address is checked as an absolute url if the data does not match an absolute address the form will fail to submit.
The number state appears much like a short text input with the addition of incremental increase and decrease buttons, used to increase or decrease the number value manually.
<label>number: <input type='number' name='number' /></label>
Users may enter a numerical value only, i.e. contains only numbers and optionally one minus symbol and/or one decimal point. Values outside these criteria will not stop the form submitting but the data will be cleared from the form.
min, max, step
In addition it is possible to limit the values that the number input will take, this is done as shown below by including the new min and/or max attributes. As their names suggest they can be used to define the maximum and minimum values that the input may take. By default the number will increase or decrease by 1 when the user clicks, on occasion you may want to vary this setp rate. This is done as shown below by using the step attribute.
<label>Choose an even number between 20-80: <input type='number' name='number' value='20' step='2' min='20' max='80'/> </label>
Notice that when you increase or decrease the number via the input arrows you will now be unable reach numbers outside the range defined by the min and max values.
The range state appears as a slide on a author defined bar of varying scale and increments. Used to enter a specific numerical value taken from between an upper and lower limit, a range.
<label>range: <input type='range' name='range' /></label>
Provides a safer way for numerical data to be submitted as the values are taken from within a strictly define range of values and increments.
min, max, step
Much like the number input you define the range of the range element by using the min and max attributes. Also as with the number input you may if you wish define a step rate other than the default rate of 1 by adding the step attribute.
<label>Choose an even number between 20-80: <input type='range' name='range' step='2' min='20' max='80' /></label>
By default will create a slider with a min of 0 and max of 100 and a step rate of 1.
The search state appears much like a shortened text input. Used to enter a search term.
<label>search: <input type='search' name='search' /></label>
Differences from a standard text field are purely stylistic at this point.
The color state opens in a small color pallet defaulting to an array of twenty set color and an other button which opens a full pallet.
<label>color: <input type='color' name='color' /></label>
It is possible to create a user defined pallet by referencing a valid datalist of colors as explained below.
date, month, week, time, datetime, datetime-local
The various date related states all open small calendar style date picker where it is possible to select any day, week or month you can think of. The various time related states all appear within a time formatted field with increase and decrease buttons.
<label>date: <input type='date' name='date' /></label> <label>week: <input type='week' name='week' /></label> <label>month: <input type='month' name='month' /></label> <label>time: <input type='time' name='time' /></label> <label>datetime: <input type='datetime' name='datetime' /></label> <label>datetime-local: <input type='datetime-local' name='datetime-local' /></label>
The date and time inputs allow the user to easily find and enter dates and times in the format below depending on the state asked for.
datetime requires the user enter a value relative to UTC whereas datetime-local requires a time value relative to the location of the user. If the user entered data is not compliant with the above format then the form will submit but the date and or time fields will be cleared and sent empty.
So there you have it, eight new input states to play around with. Although many of these states actually contain there own forms of validation it would be unwise to rely on this as the sole means of form validation.
As always if you spot any deliberate errors or need some more clarification leave us a comment below and we will take a look. Also check out part two of this article on the new HTML5 form elements.
Tools, Resources And Links
- Opera browser - Compliant browser with great support for the new HTML5 form element and attributes.
- W3 Dev - html5 forms - Anything and everything you could ever possibly want to know about creating a html5 forms.
blog comments powered by Disqus