20

HTML5 Form Field Frenzy

Forms used to be pretty simple; you had your input boxes, textareas, selects, radio buttons, check boxes, and of course file inputs. For a long time this was pretty much it, they did their thing and did it well, but it was fairly limited. With HTML5 Forms, forms got a pretty big update, here we demonstrate some highlights (not all are standard).

Let's see here...

Spellcheck
Only accept image files (select multiple)
You must fill in this field!
Hassle free autocomplete with datalist
Let's choose a color!
Recognizes speech in English or Dutch (Chrome only)

Let's look under the hood then, shall we?

The examples above are just some highlights of what you can do with the HTML5 form elements. We've split up the in-depth explanation according to topic.

Spellcheck

Enabling spellcheck is easy as pie, you just add the spellcheck="true" attribute to your input element. You can opt to specify the language with the lang attribute like this:

<input type="text" spellcheck="true" lang="en">

Input accept/multiple files

The new and improved file selector does not only allow you to upload multiple files at once (by setting the multiple attribute), but it also allows you to restrict what types files can be selected with the accept attribute. The accept attribute can be set to one or more mime-types (including wildcards). Of course you'd have to validate this again on the server. To select multiple images, you use:

<input type="file" multiple="multiple" accept="image/*">

Required fields

Client-side validation that's baked right into your browser and you can style it, too! To tell the browser a field is required, we simple set the required attribute and the browser should validate that these fields are filled in before submitting. We can style required fields by selecting them with the :required CSS pseudoclass, and if validation failed we can style them with the :invalid pseudoclass.

<input type="text" required="required">

Datalist autocomplete

With datalist you can "upgrade" your text input boxes with autosuggestion data. This kind of works like a list of set options, with an "other" option that you can fill in yourself. It's pretty straightforward:

<input type="text" list="stars" id="input-star">
<datalist id="stars">
  <option value="Sun">
  <option value="Proxima Centauri">
  <option value="Barnard's Star">              
</datalist>

Input color

The nicest way to input colors is by using a color picker. Instead of using complex javascript libraries which could do that for us, we can use type="color". The color input type will pop-up a colorpicker to choose a color. As with all the new input types, the browser will fall back to a default text input box if type="color" is not supported.

<input type="color">

Webkit speech

Although speech input has not (yet) landed in any browser except Chrome, it's pretty cool. And there is an Editor's Draft of a Speech Input API spec which would allow us to do even cooler stuff, including speech synthesis. For now we can only use the x-webkit-speech attribute to add a microphone icon, which pops up to accept voice input. We can influence the recognition language by setting the lang attribute.

<input type="text" lang="en" x-webkit-speech="x-webkit-speech">

Useful? Check. Fun? Check.

All these new input types make building interactive forms a lot easier. Client-side validation or autocomplete functionality always required a lot of Javascript, and multiple-file selections with a filter required a Flash, Silverlight or (mother of god!) an Active-X control.

Great, but can I use it today?

Yes, you can! A lot of these features are enhancements that add extra usability to the existing form elements. Almost all of these features can also be polyfilled without too much trouble.

Show me the source!

Feel free to look around the differente source files we used for this example.