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...
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.
Enabling spellcheck is easy as pie, you just add the
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
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/*">
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
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
<input type="text" required="required">
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>
The nicest way to input colors is by using a color picker. Instead of using complex
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
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
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
<input type="text" lang="en" x-webkit-speech="x-webkit-speech">
Useful? Check. Fun? Check.
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.