Making Web Forms more useful with HTML5
HTML has been around for a long time, and for a long time it has stayed the same. That is either a good thing or a bad thing, depending on whom you ask.
Some might say it’s good to remain the same, because it will always work, while others will say staying the same will hold back progress.
Whichever side you may sway towards, HTML is changing, with the push towards HTML 5, which aims to cater to both points of view.
HTML 5 was a concept put together a few years ago, with the aim of updating HTML to become more compatible and usable with newer media and technologies, while retaining its simple mark-up structure, readability and compatibility with older technology.
Fast forward a few years, and HTML 5 is a big thing in the world of the web, and browser vendors, including Microsoft, are implementing many aspects of the developing specification.
One such aspect of HTML 5 is an update to web forms, which will be the focus of this small and simple article, and as such, this article assumes a basic grasp of HTML and HTML forms.
Web forms today offer users an opportunity to interact with any site, either to log in, send a comment, place and order or push out a tweet.
One of the main features of HTML 5 Web Forms is being able to validate some of the information you’re asking from the user, or at the very least ensuring they enter something in to a text box, rather than submitting a blank form.
As mentioned above, one of the aims of HTML 5 was its ability to remain compatible, and HTML 5 Web Forms honour that desire very well.
By default, a web browser will treat an HTML web form element as a “text input” element, unless it is told otherwise. This is a key aspect of how HTML 5 web forms are built, because they create new web form types that take over the “text input” field in a supporting browser.
If a web browser does not support a particular HTML 5 Web Form type, it will fallback to be a standard text element, which the user will be able to use easily.
The days of Internet Explorer 6 are gone, and with it, the days of no browser updates.
Google Chrome and Mozilla Firefox release new versions of their browser almost monthly, and Opera and Safari are fairly regular with their updates as well. While Internet Explorer still has around 2 years between major releases, these releases contain massive amounts of updates.
HTML 5 Web Forms are not fully supported by the majority of released web browsers at the moment, but that won’t take long to change, as browser vendors have committed to making HTML 5 a success.
By starting to use HTML Web Forms now, you can get an idea of what you can expect from them, and make a decision as to whether or not to use them when they become part of the HTML 5 specification.
As mentioned above, this article assumes basic knowledge of HTML, so hopefully, you’ll recognise the following HTML:
<input type="text" name="name">
The HTML above adds an input field to your page, and the key aspect is the “type” attribute. This is the attribute that gets changed to alter the way a web form element will behave, but if the new web form type isn’t supported, the element will just stay as a text element.
You’ve probably seen plenty of forms with filled in text already, such as the word “Search here” or “type your name or keyword here...”, which is usually used as a hint to the user as to what information the field is expecting.
HTML 5 Web Forms offer the dedicated attribute “placeholder” to take care of this, and allows you to add the “placeholder” text to the element, having it automatically disappear once the element is selected, and only re-appear if the element is left blank.
The text is usually different in presentation style from how regular text would look when typed in to the text field, highlighting that it’s something to notice.
You can add a “placeholder” to any text-like form field by including the “placeholder” attribute inside the <input> element and assigning it a value of text that you’d like to appear, for example:
<input type="text" name="name" placeholder="Your Name">
The above code would remain as a text field, but add the placeholder aspect of the web form to supporting web browsers, as shown in the screenshot below:
Browsers that don’t support the “placeholder” attribute simply ignore it.
Using the “autofocus” attribute, you can select a form element that you would like to automatically receive focus, i.e. which form element is ready to be used right away, without any user selection.
<input type="text" name="name" placeholder="Your Name" autofocus>
HTML 5 Web Forms allow you to set any input element as being “required”, in that the form won’t submit until a value has been entered into the field. To add this setting, you simply need to add the attribute “required” within the form element, for example:
<input type="text" name="name" required>
The form element mark-up is the same as with many other web forms, expect the single difference of the additional “required” attribute at the end. It doesn’t need a value, just the name of the attribute, and any supporting browser will ask the user to fill in this element before submitting the web form, as shown in the example screenshot below:
It’s a clear yet non-invasive method of alerting the user that they need to enter a value for this field. The screenshot above was taken from Google Chrome, but each web browser has its own style of highlighting the need for the form field to be filed in.
Many sites require you to tick a box to conform you’ve read and accepted the terms and conditions, or to opt in or out of a mailing list. You can set the “required” attribute on this type of element just as easily, as shown below:
<input type="checkbox" name="tick" required>
… which would ask the user to tick the box before submitting the form, as shown in the screenshot below:
You can set the “required” attribute on any HTML form element, including the ones listed below, but remember, you may not want to ask for all fields to be filled in, so it isn’t necessary to mark-up every element as required.
If you want to ask the user for their email address, you can set the form field type to “email”. This will activate the browsers well-formed email address feature, that will ensure that the user enters an email address that at least looks valid.
Whereas before you might have had:
<input type="text" name="email">
… simple change the type value from “text” to “email”:
<input type="email" name="email">
The form field will still be a text box, but if the user enters something that doesn’t look like an email address, the browser will inform them, as shown in the screenshot below:
If you don’t mark this as a “required” field, then the web browser will not pop-up an alert if the field is left blank. It will sill validate the email address if the user enters something in to the field.
Browsers that don’t support the type “email” will present a standard and usable text box.
When coming across this form field, devices with a touchscreen keyboard (such as PC monitors, tablets, smartphones, inc iPhone, iPad & iPod Touch) will present a slightly different onscreen keyboard, thus making the typing in of an email address slightly easier.
If you want to ask the user for their web site address, you can set the form field type to “url”. This will activate the browsers well-formed web address feature, that will ensure that the user enters a web address that looks like a web address.
Whereas before you might have had:
<input type="text" name="webaddr">
… simple change the type value from “text” to “url”:
<input type="url" name="webaddr">
The form field will still be a text box, but if the user enters something that doesn’t look like a web address, the browser will inform them, as shown in the screenshot below:
If you don’t want to mark this as a “required” field, then the web browser will not pop-up an alert if the field is left blank. It will sill validate the web address if the user enters something in to the field.
Browsers that don’t support the type “url” will present a standard and usable text box.
When coming across this form field, devices with a touchscreen keyboard (such as PC monitors, tablets, smartphones, inc iPhone, iPad & iPod Touch) will present a slightly different onscreen keyboard, thus making the typing in of a web address slightly easier.
You can offer the user a chance to select a number by way of a “spinner control”, which is a text box that includes the ability to scroll up or down the number sequence.
This is done using the “number” type, so if you were asking someone for their age, you might have:
<input type="text" name="age">
… and if you simply change the type value from “text” to “number”:
<input type="number" name="age">
… a supporting browser would offer the user a form element that is shown in the screenshot below:
The number type allows the use of three additional attributes, which are “min”, “max” and “step”. The “min” and “max” are perhaps quite obvious, in that they set the minimum selectable number and the maximum selectable number. If you wanted the user to select an age between 18 and 30, you could use the following code, and the user could not select a number higher than 30 or lower than 18:
<input type="number" name="age" min="18" max="30">
The user could manually enter a lower or higher number, but the browser would alert them to this mistake, as shown in the screenshot below:
The “step” attribute is used to set the sequence the numbers will scroll though. By default, this is “1” (so you get 18, 19, 20, 21, etc) but if you want to “step” though a different sequence, you can set that here.
Setting the “step” attribute to “2” would scroll though every two numbers, such as 18, 20, 22, 24, 26. Setting the “step” attribute to “5” would scroll though every five numbers, such as 18, 23, 28, 33, 38.
Browsers that don’t support the type “number” will present a standard and usable text box for the user to enter a number.
Another type of selection is the “range” type, that offers a slider bar that lets the user slide a bar to make their selection. It is similar to the “number” type, in that in contained a minimum and maximum range to select.
To create a slider bar (as shown in the screenshot above), use the “range” type in your web form, so rather than using:
<input type="text" name="rate">
… simple change the type value from “text” to “range”:
<input type="range" name="rate" min="1" max="10" value="5">
The “value” attribute sets the default value for the element.
Browsers that don’t support the type “range” will present a standard and usable text box for the user to enter a number.
When asking the user for a date and/or time, you can use the “date” and “time” form types. Supporting browsers will produce an easily selectable calendar to the user for the “date” form type and a selectable time element for the “time” form type.
Using the code:
<input type="time" name="time">
… supporting browsers would offer something like the example screenshot below:
While using the code:
<input type="date" name="date">
… supporting browsers would offer something like the example screenshot below:
You can make use of the “datetime” type, which will combine the “date” and “time” in to a single element, or split up the date in to three elements, using the types “day”, “month” and “year”.
Browsers that don’t support the type “date” and “time” will present a standard text box for the user to enter a date and time.
And there you have it, HTML 5 Web Forms that can make your standard web form a little more usable with little effort from you. Simply chance a form “types” and maybe add a “required” attribute here and there, and the supporting web browsers will take care of the rest.
Such changes are a good way for web sites that have no current form validation to add a little filter to their forms to ensure a more accurate and useful result. Not all features are supported by all browser, but if you don’t have any validation at the moment, the browsers that do support these features will use them to help your users fill in the form closer to how you’d like them to.
Sites that already include validation may want to remain with what they have for now, or do some testing before going live with HTML 5 Web Forms.
For important sites, server-side validation is still very important, so don’t consider this a replacement for that, merely an addition to it in aid of the user.
The HTML 5 spec is still under construction, so things might change. If you try out HTML5 Web Forms, check them every so often to see if things have changed.