An Introduction to HTML5 Forms

Supported Browsers: IE none, Opera 10.5+, Firefox 4.0+, Safari 4.0+, Chrome 9.0+, iPhone 4.0+, Android none.

By Alexander Jones,

Introduction

Building a <form> is a very common web practise, a few <input type="text"> elements, along with an <input type="password"> and then a <input type="submit"> to finish it off. It is a difficult process to master, involving the right types of input methods and methods to validate important information, as well as making it look right. For some time, developers have been taking advantage of javaScript libraries and frameworks (such as jQueryUI or YUI) to make up for for lack of functionality in HTML, providing rich functionality albeit not natively, until now.
In December 2010, P. Lauke & C. Mills from Dev.Opera commented on this:

They're a workaround to compensate for the limited form controls available in HTML. They "fake" the more complex widgets (such as date pickers and sliders) by layering additional (not always semantic) markup and a slew of JavaScript on top of pages.

With HTML5, form elements and attributes provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required before. HTML5 defines many new input types, which provide numerous new features.

1. Browser Support

In the most modern browsers all the new form elements and attributes will perform correctly and provide most functionality, but with legacy browsers, the forms will still work and new input types will simply fall back to treating them as standard text inputs – albeit not as user-friendly and not to the full ‘standard’ of the modern browsers but all of the functions will still work and degrade gracefully in every browser, including even IE6.
In December 2010, P. Lauke and C.Mills from Dev.Opera also talked current browser support:

On the desktop, Opera currently has the most complete implementation of new input types and native client-side validation, but support is on the roadmap for all other major browsers as well, so it won't be long before we can take advantage of these new powerful tools in our projects.

Fall Back Options

It's important that there are fall back options for users with browsers that aren't quite up to speed with HTML5 forms. The fall back is there to provide an alternative to some of the form features that are missing, this is done by doing basic JavaScript-based feature-detection and, only if needed, proceed to load external JavaScript libraries to 'fake' the support for more complex form control widgets and validation.

This provides an alternative to users so that developers can use the newest HTML5 functionalities without limiting users because of their back-dated browser choice.

2. New Attributes and Controls

With forms being the main method of data input in web applications, along with having many different types of data being collected it's become nessessary to have forms with better, more complex ways of acquiring data. Which will allow for better error detection and validation, whilst also making it easier for the user.

Placeholder Text

The Placeholder attribute on <input> and <textarea> elements provides the ability to set placeholder text which gives the user a hint of what should or can be entered into a field.

Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears.

Here’s how you can include placeholder text in your own web forms (Browsers that don’t support the placeholder attribute will simply ignore it):

<form>
    <input name="q" placeholder="Search Bookmarks and History">
    <input type="submit" value="Search">
</form>

Autofocus Field

The autofocus attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by clicking a different control. Some websites use JavaScript to focus the first input field of a web form automatically.

One of the most commonly used sites that does this is Google, which will autofocus the input box so you can type your search keywords. This can have its advantages for people that want to quickly enter a search but it can be an inconvenience for some, as Mark Pilgrim discusses in his A Form of Madness Article:

It can be annoying for power users or people with special needs. If you press the space bar expecting to scroll the page, the page will not scroll because the focus is already in a form input field. If you focus a different input field while the page is still loading, the site's autofocus script may 'helpfully' move the focus back to the original input field, disrupting your flow and causing you to type in the wrong place.

To solve this problem the autofocus attribute that HTML5 introduces can be applied to all web form controls, as soon as the page loads; it moves the input focus to a particular input field. Because it's just mark-up instead of script, the behaviour is consistent across all web sites.
Here's how a form field can be set to autofocus:

<form>
    <input name="name" autofocus>
    <input type="submit" value="Search">
</form>

To make it work with browsers that don't support the autofocus attribute, just make two small changes. Add the autofocus attribute to your HTML markup and detect whether the browser supports the autofocus attribute, and only run your own autofocus script if the browser doesn’t support autofocus natively:

<form name="f">
    <input id="q" autofocus>
    <input type="submit" value="Go">
    </form>
<script>
    window.onload = function () {
	    if (!("autofocus" in document.createElement("input"))) {
	        document.getElementById("q").focus();
	    }
    }
</script>

The <input> Element

The <input> element has new values for the type attribute.

  • search: The element represents search entry field. Line breaks are automatically stripped from the input value, but no other syntax is enforced.
  • tel: The element represents a control for editing a telephone number. Line breaks are automatically stripped from the input value, but no other syntax is enforced, because telephone numbers vary widely internationally. You can use attributes such as pattern and maxlength to restrict values entered in the control.
  • url: The element represents a control for editing a URL. Line breaks and leading and trailing whitespaces are automatically stripped from the input value.
  • email: The element represents one email address. Line breaks are automatically stripped from the input value.

The <input> element also has new attributes.

  • list : The ID of a <datalist> element whose content, <option> elements, are to be used as hints and are displayed as proposals in the suggestion area of the input field
  • pattern : A regular expression that the control's value is checked against, which can be used with type values of text, tel, search, url, and email.
  • formmethod : A string indicating which HTTP method (GET or POST) should be used when submitting; it overrides the method of the <form> element, if defined. The formmethod only applies when the type is image or submit.

The <form> Element

One of the most exciting parts of HTML5 forms is automatic input validation. Usually upon entering an email address into a web form, there is some client-side validation in javaScript followed by some some server-side validation. HTML5 will never replace the server-side validation but it may well replace the client side validation, when validating email addresses in javaScript, there are two big problems:

  • javaScript could be turned off (duh).
  • It’s extremely complicated to determine whether a random string of characters is a valid email address.

Form validation is an important part of data inputting, both from a user point of view and the server. It helps users to avoid and correct mistakes when filling out a form and also helps to stop malicious users submitting data that could cause damage to a web application.

There is no mark-up required to activate HTML5 form validation; it is on by default. Luckily, with HTML5 the <form> element has a new attribute called novalidate, which prevents the form from being validated before submission:

<form novalidate>
    <input type="email" id="addr">
    <input type="submit" value="Subscribe">
</form>

Mark Pilgrim discusses in his A Form of Madness Article: Browsers are slowly implementing support for HTML5 form validation. Firefox 4 will have complete support. Unfortunately, Safari and Chrome have shipped an incomplete implementation that may trip you up: they validate form controls, but they don’t offer any visible feedback when a form field fails validation.

This means that if an invalid entry into a form, safari and chrome will not submit the form, but they will also not say why the form wasn’t submitted, unlike opera and firefox 4 which provide a message.

Required Fields

HTML5 form validation isn’t limited to the type of each field. You can also specify that certain fields are required. Required fields must have a value before you can submit the form. The markup for required fields is as simple as can be:

<form>
    <input id="q" required>
    <input type="submit" value="Search">
</form>

Test <input required> in your own browser over at jsbin. Browsers may alter the default appearance of required fields. For example, this is what a required field looks like in Mozilla Firefox 4.0:

Form Required Input Image
A required field

Furthermore, if you attempt to submit the form without filling in the required value, Firefox will pop up an infobar telling you that the field is mandatory and can not be left blank.

Email and Web Addresses

One of the new input types provided by HTML5 is for email addresses which looks like this:

<form>
    <input type="email">
    <input type="submit" value="Go">
</form>

One of the most interesting things is that all browsers support this, meaning that you can use type="email" on any form in any browser right now, this doesn’t mean that they will provide a functionality for it, they may not recognise it, and just treat it as type="text" which is okay, the browser doesn’t mind and just treats it as a plain text field.

If browsers do support type="email", it means different things depending on the browser in use, the HTML5 specification doesn’t mandate any particular user interface for the different input types, for example, opera styles the form field with a small email icon.

This is particularly useful for phone browsers, because most, don’t have a physical keyboard, all typing is done by tapping the on-screen keyboard that pops up. The current iphone browser recognises several of the HTML5 input types and the on-screen keyboard dynamically changes to suit the type of input.

For email addresses a @ and . character is added to the keyboard. Web addresses or URLs, like email addresses, are another type of specialised text, and when <input type="url"> is used a . and / character is added to the keyboard along with a .com button.

Form validation is an important part of data inputting, both from a user point of view and the server. It helps users to avoid and correct mistakes when filling out a form and also helps to stop malicious users submitting data that could cause damage to a web application.

3. Conclusion

From what I can see, there is no reason to not using HTML5 forms input types and features, they degrade nicely in older browsers including IE6, where they degrade usually to normal text inputs.

There are some great advantages of the new form features that can be used including the mentioned iPhone keyboard that modifies itself to suit the input. Although some browsers are behind at the moment, especially with the validation attributes, they are quickly developing and there’s no reason not to start using these new elements.

The Next Step

The next step is to go out and develop! Try different things and experiment with forms, there's a huge wealth of features to get stuck into not to mention CSS3 styling that can applied to give even more functionality, for more information on HTML5 forms, be sure to get check out these great resources: