Brain Food for Web Developers

HTML5 Logo

Writing HTML5 Forms

Although HTML5 is becoming more popular with coders, there are still those who are hesitant about adopting the latest markup for fear of the lack of support from older browsers. Some web developers are stuck coding with IE6 in mind (myself included) and are concerned that the javascript workarounds won’t be enough. Luckily, there are some cool new HTML5 form attributes that degrade gracefully in older browsers (even IE6!).

Please note that a lot of what I’ve learned about HTML5 form attributes comes from “Dive into HTML5” by Mark Pilgrim (Chapter 9: A Form of Madness) and that this post is only meant to summarize this chapter. If you want to read about HTML5 forms in greater detail or wish to learn about browser compatibility then I strongly recommend you read the chapter, it’s a very useful resource.

If, however, you’re only looking for a summary of the new form attributes then please read on.

Autofocus Field

Autofocus FieldAutofocus is when the browser automatically places the text cursor on a selected field. For example, Google makes sure that when you open their search page that the cursor is focused on the search field. This can be done with javascript with code like:
However, with HTML5 it’s now possible to do with a simple tag in your input element:
<input type=”text” autofocus>
(If you’re used to XHTML then you might be squirming with the lack of “/>” at the closing of the element, however with HTML5 this is not necessary.)
Now, when the page loads in supporting browsers, the text cursor will focus on the appropriate field. Browsers that do not support the new attribute will simply ignore it.

Placeholder Text

Placeholder text is fairly common for search fields, where they will hold some text such as “Enter search text here…” or something to that effect. When the user clicks in the search field, the placeholder text will usually disappear so that you can get typing. This nifty little feature can be achieved by javascript, but now HTML5 offers the placeholder attribute:
<input name=”search” placeholder=”Enter search text here…”>
Once again, this new attribute will be ignored by unsupported browsers so you have nothing to loose by adding it.

New Input Types

Normally when creating a form to collect an e-mail address, urls, or even a numbers, designers will often use the following input type:
<input type=”text”>
This is all very well since the these inputs are indeed made up of text, however, with HTML5 you can now be a little more specific:

Email: <input type=”email”>
URL: <intput type=”url’>
Number: <input type=”number”>
Number with restrictions: <input type=”number” min=”0” max=”45” step=”15” value=”0”>
(step is the interval between min and max. This might be used for collect a time where only 15 mins intervals are suitable. Value is the default value.)

These input types are valid in all browsers because those who don’t recognize them will just default to input type=”text”.

iPhone E-mail Keyboard

What are the benefits of these new input types? Well first of all there are mobile devices, such as the iPhone, to consider. With the iPhone’s touch screen keyboard there is a keyboard layout specific to emails that includes “.” and “@”. The ‘URL’ type will include keys such as “.com” and the ‘numbers’ type will use the numeric keyboard instead of the “qwerty” keyboard. If you use the new input types in your markup then your iPhone users will get the benefit of these dedicated keyboards. OK so maybe it’s not a life altering breakthrough, but it improves with usability and every little helps.

The other benefit comes with HTML5 form validation. Form validation is quite often accomplished through javascript (JQuery), PHP or a combination of the two. Now you can use HTML5. When using the new input types such as e-mail, URL and numbers, supporting browsers will automatically give you an error message when an incorrect input type is detected (even when javascript is disabled).

If, for some reason, you don’t want your form to validate automatically then you can turn it off:
<form novalidate>

Required Fields

In addition to validating user input, HTML5 can also deal with required fields:
<input id=”name” type=”text” required>
Now (in supported browsers) the input field with id “name” cannot be submitted without some content in it. Different browsers might display the error message differently.

Note that since HTML5 is not widely supported yet, it’s still wise to employ the javascript and/or PHP form valications.

If you’re interesting in these new the new attributes and want to learn about them in greater detail then I strongly recommend you read “Dive into HTML5” by Mark Pilgrim (Chapter 9: A Form of Madness).
You can also read about HTML5 forms from the W3 website.

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.

Comments are closed.