It’s a brand-new world for those of us working in the web industry. Browser vendors are ahead of the game, and are implementing HTML5 support before it becomes a W3C standard. Many web developers are already taking advantage of this by coding websites in HTML5. There’s the much ballyhooed video element, which allows you to serve streaming videos without Flash; there’s semantic document markup with elements like article and section. But what about HTML5 forms? What’s happening there?
At first glance, you may be disappointed with what HTML5 currently brings to web forms; each browser is implementing the new elements slightly differently, and the most impressive features are yet to be fully ready for prime time. However, if you dig a little deeper, there is untapped potential that you can use right away—and boy, doesn’t the future look bright for forms!
Let’s take a closer look at HTML5 forms, and uncover today’s practical applications while peering into tomorrow’s bounty. There’s something for everybody, with improved usability for mobile browsers, sweet CSS, and easier ways to drive everyday form functionality like placeholder text.
The current draft of the HTML5 specification brings with it 13 new input field types. Yes, thirteen brand-new, shiny ways of defining the good old input element, so make some room beside text inputs for the following:
emailfor email addresses, perfect to use immediatelytelfor telephone numbers (some browsers may strip whitespace), fine for immediate useurlfor web addresses, good to use nowcolorfor hexadecimal color values; here’s hoping we see OS-native color pickers in the future!numberfor whole numbers; some browsers provide up/down arrows next to the input field. You can also limit the number to a given range with theminandmaxattributes.rangefor a numeric input with a slider widget; like thenumberinput type, you can useminandmaxattributes to define the range. You can also use thestepattribute to control the increments in which the slider moves. This is ready for use, as browsers that don’t support it will simply display a text field—but be careful how you use this one. Regardless of how cool they may look, sliders are only good for certain tasks (such as price ranges); in most cases, a regular number field will be easier for your users.searchfor search keywords, so naturally just the tool for site searches. Be wary of the current Mac OS rendering: it looks just like the built-in Spotlight search, but there’s no overriding the styles if you need to display it differently. Take a look at the Apple website for an example of it in action.date,month,week,time,datetime, anddatetime-localfor date-related inputs. Several exciting new fields—now we just have to wait for all the browsers to implement it.
Take a look at all the new input types in your browser.
Remember: if you’re using HTML5 elements, you’ll need an HTML5 doctype. Fortunately, it’s short and sweet:
<!DOCTYPE html>
The people contributing to the HTML5 spec have come through with the goods for two common areas of functionality, which to date have been driven by JavaScript: autofocus and placeholder text.
Want to automatically focus a field in your form when the page loads? No longer do you have rely on JavaScript. You can now add a single attribute to your form field and the browser will do all the work:
<input type="text" autofocus="true" /> Okay, so not all browsers support it at the time of writing—but fear not, here’s a little jQuery to add backwards compatibility to older browsers:
inputEl = document.createElement('input');if !!('autofocus' in inputEl) { $('input[autofocus="true"').eq(0).focus();};This snippet creates an input field, and then checks if the autofocus attribute is supported by the field. If there’s no support, then it looks for the first field with an attribute of autofocus="true", and focuses.
You may wonder why you should replace one JavaScript snippet for another. Sure, we could continue to use the same old scripts to do the job, but with progressive enhancement, why not drive our industry forward, and provide a better experience for those on the cutting edge?
Have you ever had to add placeholder text to a field? Perhaps you used some JavaScript to achieve this. If so, you’ll love the new placeholder attribute. With a placeholder attribute you can take all the effort out with inline semantic HTML5 goodness.
Here’s an example for a postal code field:
<input type="text" name="postcode" id="postcode" placeholder="A1A 1A1" />Like autofocus, browser support is still weak for this attribute. The good news is that there’s already a jQuery plugin available to add support to those browsers.
If you’ve read Fancy Form Design, you’ll already know that you have a lot of responsibility when using a tool as powerful as placeholders. Be wary of overusing this attribute just because you can; placeholders are good for providing example input, but shouldn’t be used as a substitute for a field’s label.
Imagine client-side validation for a required email address as easy as:
<input type="email" name="sample-email" id="sample-email" required="true" />Now how about using a custom regular expression to validate an input like a postcode? That’s exactly what HTML5 promises to bring to the table.
Right now only Opera 10 includes validation support, with error text appearing below the first invalid field on submission. One catch is that the error message for a required field reads “You have to specify a value,” and the message for an invalid field reads, for example, “timATsitepoint is not a valid email address.” I’d love to see customizable error messages before discarding the trusty jQuery Validation plugin.
Validation is cool, but it works best when presented clearly and legibly to the user. Fortunately, HTML5 allows for some neat CSS targeting.
While it’s too early to use HTML5 validation, expect to see on-the-fly validation indicators driven by CSS pseudo-class selectors popping up at any moment now.
This one-liner will provide a visual clue to visitors if they make a mistake (the result is shown in Figure 1, “Using the :invalid pseudo-class to add an icon to invalid fields”):
:invalid { background: url(images/icon-error.gif) no-repeat 95% 50%;}
Indicators are all well and good, but what about when the visitor submits the form? Figure 2, “Validation messages in Opera 10.61” shows how Opera handles this (at the time of writing, Opera is the only browser with validation messages on submit).
Let’s hope they implement a way to override the styles for validation messages!
Wouldn’t it be great if you could add some flair to all email, phone, and URL fields across your forms without having to target ids? Thanks to attribute selectors, you can! Figure 3, “A spruced-up comment form” is an example of a comment form that uses some super-simple CSS to add some design flair.
And the CSS using attribute selectors to target text, email, and url fields plus an :invalid pseudo-class selector declaration block:
/* Icons */fieldset div input[type="text"] { background: url(images/icon-name.png) no-repeat left center;}fieldset div input[type="email"] { background: url(images/icon-email.png) no-repeat left center;}fieldset div input[type="url"] { background: url(images/icon-url.png) no-repeat left center;}/* Validation */:invalid { color: red;}Check out a live example of this comment form in action.
If all these drawcards were not enough, Mobile Safari visitors using HTML5 forms (by way of iPhone, iPod touch, and iPad) are automatically rewarded with tailored keyboards for numbers (including telephone), web addresses, and email addresses. Check out the keyboards for these different fields in Figure 4, “Mobile Safari keyboards”.
Are you struggling to get your hands on form code to upgrade your visitors’ experience to the latest and greatest? You might think that if you’re using a CMS that outputs forms automatically, you’re out of luck. Earlier in this article, we saw how a little JavaScript progressive enhancement came through with the goods and provided a way for us to use the autofocus and placeholder attributes today. Using the new field types should be no different, so here it is, some code to make it all possible. The code looks for validation rules applied with the jQuery Validation plugin, and when it finds a numerical or email validation rule, swaps out the underlying field for a new HTML5 input type:
/* * Hook into validation method to automatically upgrade fields to HTML 5 */$('input').each(function() { // Fetch validation rules for current input element var inputEl = this, rules = $(inputEl).rules(); // Stop right here if there are no rules applied to this element if (rules == undefined) { return $(this); } // Run through validation rules and upgrade fields to corresponding input types // Email if (rules.email == true) { inputEl.setAttribute('type','email'); } // Number else if (rules.digits == true) { inputEl.setAttribute('type','number'); // If there are validation rules for min and max length set the corresponding attributes if (rules.rangelength != undefined) { inputEl.setAttribute('min', rules.rangelength[0]); inputEl.setAttribute('min', rules.rangelength[1]); } else { if (rules.minlength != undefined) { inputEl.setAttribute('min', rules.minlength); } if (rules.maxlength != undefined) { inputEl.setAttribute('max', rules.maxlength); } } } // URL else if (rules.url == true) { inputEl.setAttribute('type','url'); }});Using this code, visitors on Mobile Safari will receive with a keyboard to match each field.
The code above is specifically targeting email and number fields. These were selected as they’re the most useful and well-supported input types.
It doesn’t end there—the future also holds native autocomplete, progress bars, and keygen for generating public–private key pairs. Keep an eye out!
Take a look at browser support for HTML5 forms over at Find Me By IP. For support in the browser you’re using right now, check out The HTML5 Test.
In the near future, you’ll no doubt see many more websites employing HTML5 forms to make coding forms easier and more robust. Visitors will benefit from sexier forms with more consistent elements and functionality. Jump on the bandwagon, and think about using some HTML5 for your next field!
Frequently Asked Questions about HTML5 Forms
What are the new form elements introduced in HTML5?
HTML5 introduced several new form elements to enhance the user experience and make form validation easier. These include ‘datalist’, which provides autocomplete functionality; ‘output’, which displays the result of a calculation; ‘progress’ and ‘meter’, which display progress bars and gauge-style indicators respectively; and ‘keygen’, which facilitates secure key-pair generation. These new elements allow for more interactive and user-friendly forms.
How does HTML5 improve form validation?
HTML5 has built-in form validation features, eliminating the need for JavaScript in many cases. It provides several new input types like ’email’, ‘url’, ‘tel’, ‘number’, ‘range’, ‘date’, ‘month’, ‘week’, ‘time’, ‘datetime’, ‘datetime-local’, and ‘color’. These input types automatically validate the input, ensuring it matches the specified type. For example, the ’email’ type checks if the input is a valid email address.
What are the new attributes for form elements in HTML5?
HTML5 introduced new attributes for form elements to enhance functionality and user experience. These include ‘placeholder’, ‘required’, ‘autofocus’, ‘autocomplete’, ‘novalidate’, and ‘form’. The ‘placeholder’ attribute provides a short hint that describes the expected value of an input field. The ‘required’ attribute specifies that an input field must be filled out before submitting the form.
How does the ‘datalist’ element work in HTML5?
The ‘datalist’ element in HTML5 provides an “autocomplete” feature on form elements. It contains a set of ‘option’ elements that represent the permissible or recommended options for the input field. The browser displays these options as a dropdown list, allowing the user to select rather than type their input.
How can I use the ‘output’ element in HTML5 forms?
The ‘output’ element in HTML5 is used to represent the result of a calculation. It is typically used with the ‘oninput’ event attribute to display the result of a calculation as soon as the user inputs or changes the value in the form.
What is the purpose of the ‘progress’ and ‘meter’ elements in HTML5?
The ‘progress’ and ‘meter’ elements in HTML5 are used to display progress bars and gauge-style indicators respectively. The ‘progress’ element represents the completion progress of a task, while the ‘meter’ element represents a scalar measurement within a known range.
How does the ‘keygen’ element work in HTML5?
The ‘keygen’ element in HTML5 facilitates the generation of a pair of cryptographic keys. The private key is stored locally, and the public key is sent to the server. This can be used for forms that require secure communication.
How can I use the ‘novalidate’ attribute in HTML5 forms?
The ‘novalidate’ attribute is a boolean attribute that, when present, specifies that the form-data should not be validated on submission. This can be useful in situations where you want to handle validation manually or through JavaScript.
What is the ‘form’ attribute in HTML5?
The ‘form’ attribute in HTML5 is used to associate an input, select, or textarea element with an existing form even if it is not nested within the form element. This can be useful in complex layouts where form elements are not logically grouped together.
How does the ‘autocomplete’ attribute work in HTML5 forms?
The ‘autocomplete’ attribute in HTML5 specifies whether a form or input field should have autocomplete enabled. When set to “on”, the browser automatically completes the input based on values that the user has entered before. This can be useful for forms that require repetitive information, such as address or credit card details.
Tim ConnellTim Connell lives and breathes the web and can often be found atop a soapbox talking about users, accessibility and sexy web technology. Tim is a technical consultant for Squiz, a leading enterprise content management company, and a developer with Fresh Interface. After hours he can be found in the company of good people at the local watering hole in Sydney, Australia
