How to Build a Nifty HTML5 Form

After reading Introducing HTML5 by Bruce Lawson & Remy Sharp, a good read that lived up to its namesake by introducing the majority of HTML5 in a concise and humorous way, I decided to build a quick sample to play with a few of the new HTML5 Form features. In this post I’ll cover the HTML5 Form features I used.

Note: I’m using IE10 from the Windows 8 Developer Preview. You can view the sample here.

I tried to use as many of the HTML5 Form features as possible in this sample, which allows a user to enter their favorite recipe, and didn’t concern myself with styling. However, I do plan to write a follow-up post on using the new CSS3 selectors & properties to make it look professional. Again, everything in this sample was tested in IE10 from the Windows 8 DP so some of these features may not work or may work a little differently in another browser.

image

Input Types

HTML5 introduces a new set of input types that define the behavior/UX of the input element. The input type also helps with validation, which I’ll cover shortly. An example of an input type that does both is the slider control for Servings. To create the slider I used the range input type and set the min/max attributes, like so:

<input id=”servings” type=”range” min=”1″ max=”10″ value=”4″/>

I’ve also used the url (for Source) and number (for Prep Time and Cook Time) input types that behave as you’d expect.

Another nice addition in HTML5 is that by default an input element with no type defaults to text, which saves you some typing time.

Data Lists – Drop Down Options

In the screenshot you’ll notice that Dish Type has focus and has a static list of predefined options beneath it. This allows the user to either select one of the options or type in a new one. The static list of options was created using the new HTML5 <datalist> element. Tying the input field and data list together was as simple as setting the input element’s list attribute to the <datalist>’s id, like so:

<input id=”dishtype” list=”dishtypeopts” />
<datalist id=”dishtypeopts”>
<option value=”Appetizer” />
<option value=”Main” />
<option value=”Dessert” />
</datalist>

The nice thing about data lists is that they can be reused across the form so it keeps the HTML clean.

Placeholders

Another HTML5 form feature I used was placeholder text. Gone are the days of doing this manually with JavaScript or using the AJAX Control Toolkit’s Watermark control. Now you can provide a helpful hint to your users that appears/disappears based on focus & input. I set the placeholder attribute like so:

<input id=”source” type=”url” placeholder=”http://www.foobar.com” />

It’s simple and intuitive, and it also works on <textarea> elements!

Autofocus

A quick mention on the new HTML5 input attribute autofocus that does exactly what it implies. When set the browser will give focus to the control during page load.

<input id=”name” placeholder=”Recipe Name” autofocus />

Validation

Validation has finally arrived in HTML5 and makes JavaScript/JQuery plugins a thing of the past (in theory). This is hands down one my favorite HTML5 features since I’ve had to do a lot of work in the past for my own e-business to get form validation just right. By using the required attribute in your element definition you get browser based validation out of the box. Pair that with the input types and you’ve got some nifty validation that looks like this:
image

Which was achieved with this HTML:

<input id=”source” type=”url” required />

You can also go a  step further and customize the validation by supplying a regex pattern via the pattern attribute and a friendly error message using the  title attribute, which looks something like this:

<input id=”dishtype”required pattern=”[A-z]{0,50}” title=”Max 50 alpha chars” />

Note: I noticed that the url validation isn’t very strong. It seems to only check for the presence of ‘http:’ which must be a spec issue because FireFox behaves the same. Using pattern may be the better way to go. Also, it would have been great if pattern was implemented on textarea for multiline text.

Next Steps…

So that’s my step by step walkthrough of some of the new HTML5 Form elements and attributes. If you want to learn more about the HTML5 Forms you can read over the spec, or check out Introducing HTML5.

Both comments and pings are currently closed.

3 Responses to “How to Build a Nifty HTML5 Form”

  1. timheuer says:

    First official HTML ‘how to’ post — we officially dis-own you ;-)

  2. [...] my last post I covered how to build a nifty HTML5 form. I used as many of the new HTML5 form features as [...]