Web forms — and the information exchange they enable — are core features of application development. HTML5′s significant improvements to form elements and input types are enabling better performance and faster development.

HTML5, which may be described as an umbrella covering a number of new and exciting web technologies, was born out of a desire to improve the web and aid in the transition from static web pages to fully functioning web-based applications.

In fact, according to Alexis Goldstein, Louis Lazaris, and Estelle Weyl, who recently co-authored the book HTML5 & CSS3 For the Real World, “HTML5 originally began as two different specifications: Web Forms 2.0 and Web Apps 1.0. Both were the result of the changed web landscape, and the need for faster, more efficient, maintainable web applications. Forms and app-like functionality are at the heart of web apps, so this was the natural direction for the HTML5 spec to take.”

HTML5 & CSS3 For the Real World is aimed at new web developers and designers, or at more experienced coders who were reluctant to part with the more tightly-structured XHTML standard. In terms of content, the book provides a nice history of HTML5 as a developing standard and includes some of the best examples and explanations of new HTML5 elements and APIs I have read.

In particular, HTML5 & CSS3 For the Real World does, in my opinion, an excellent job of describing HTML5 form elements and inputs types, so much so that it affected a form I was working on and inspired me to share some of those elements here.

HTML5 Form Syntax

To help convey some of what HTML5 & CSS3 For the Real World described about forms, it will be helpful to start with general changes in form syntax.

First, the HTML5 form element does not require an action attribute. Rather the browser will “behave as though the action was set to the current page.” This is an important improvement since it is common to use a single page to both serve and accept a form. Thus, this will save you a few keystrokes.

Next, HTML5 is more liberal regarding quotation marks and closed tags. For example, the following input tags are all acceptable in HTML5. Only the first one was valid in XHTML.

<input type="text" id="some-id" name="some-name"></input>
<input type=text id=some-id name=some-name>
<input type=text id=some-id class="class1 class2" name=some-name>

New HTML5 Input Types

HTML5 adds several new form input types. Taking a lead from the HTML5 & CSS3 For the Real World authors, here is a list of form input types that were available before HTML5.

• button
• checkbox
• file
• hidden
• image
• password
• radio
• reset
• submit
• text

Now for the new HTML5 input types.

• search
• email
• url
• tel
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color

Building an HTML5 Form

To demonstrate some of these new HTML5 input types and their associated attributes, I have put together a simple HTML5 form.

<form id=sign-up method=post>
<hgroup><h3>Sign Up for Some Reason</h3><h4>Trust us You'll love it.</h4></hgroup>
    <ul>
        <li>
            <label for=name>Your Name Please: </label>
            <input type=text id=name name=name required  aria-required=true  autofocus>
        </li>
        <li>
            <label for=email>Your Email Please: </label>
            <input type=email id=email name=email required aria-required=true>
        </li>
        <li>
            <label for=telephone>Your Telephone Number: </label>
            <input type=tel id=telephone name=telephone required aria-required=true >
        </li>
        <li>
            <label for=color>Your Favorite Color: </label>
            <input type=color id=color name=color required aria-required=true >
        </li>
    </ul>
</form>
<input type=submit id=submit form=sign-up value=Submit >

The example web form is rendered in Opera; CSS was employed to lay out the form.

As mentioned above, I do not need to set a form action if the form will be posting to the current page. I also do not need to wrap any attribute values in quotation marks, so long as those values included only one word.

<form id=sign-up method=post>

My individual form labels and inputs are included as list items in an unordered list.

For the name field, the input type is text, which should be familiar. In the example below, note that I am using the attribute required. The required attribute will prevent a user from submitting the form while this field is empty. In HTML5, we no longer have to provide a value — as in XHTML — for every attribute. This prevents some of the redundancy that was common to the earlier standard.

The aria-required attribute shown in the example is to help screen readers, which may inform visually-impaired users that a field is required. Lastly, the autofocus attribute means that this field will have an active cursor when the page loads.

<li>
    <label for=name>Your Name Please: </label>
    <input type=text id=name name=name required aria-required=true autofocus>
</li>

The email input type is new for HTML5. This input type validates the field value to ensure that it is in the general email format, i.e. “something@something.something.”

<li>
<label for=email>Your Email Please: </label>
    <input type=email id=email name=email required aria-required=true>
</li>

The HTML5 & CSS3 For the Real World authors also point out that in addition to the field validation, the email input type is very important for mobile users, since smartphones and tablets may load an email-optimized keyboard (which will typically include a big “@” key and a “.com” or “.net” key), rather than a standard keyboard for email fields with the email input type. These email-optimized keyboards vary from phone to phone, but can be a very nice feature for users.

<li>
    <label for=telephone>Your Telephone Number: </label>
    <input type=tel id=telephone name=telephone required aria-required=true >
</li>

The _tel_ input type is largely semantic, in that it does not validate for a particular telephone number format. But it can be used in conjunction with a _pattern_ attribute that will accept a regular expression. In this way, you can again insert browser field validation without any JavaScript or additional page overhead.

Finally, I also chose to add a color input type to my example.

<li>
<label for=color>Your Favorite Color: </label>
    <input type=color id=color name=color required aria-required=true >
</li>

At the time of writing, this input type is only recognized in the Opera browser. Other browsers will render it as a simple text field. When it is properly rendered, it provides a color picker. This input type, once more browser makers adopt it, might be helpful for ecommerce applications. For example, it could be used to choose shirt colors from a product detail page. Although you will need to limit the available colors.

The Opera browser renders a visual color picker in response to the color input type.

Next, notice that I purposefully placed the form’s submit button outside of the form itself. In this example, there is no good reason to do this other than to demonstrate the new HTML5 form attribute, which is not to be confused with the form element.

<input type=submit id=submit form=sign-up value=Submit >

In older versions of HTML or XHTML, all form components needed to be wrapped inside of a form element. In HTML5 forms, form elements may be anywhere on the page so long as those elements includes the form attribute, which should have a value identical to the parent form’s id.

Some Closing Analysis

In this example, I have given you some solid examples of what you can do with HTML5-powered forms. In HTML5 & CSS3 For the Real World, you find additional examples and suggestions.

As I mentioned above, this book is aimed at newer developers and designers, and for those that are playing a bit of catch up in HTML5. But it also has significant value as a reference. In fact, the web form section alone is worth the cost of the book.

Search Terms

HTML5 forms, HTML5

Related Articles

• 28 HTML5 Tutorials and Cheat Sheets
• Detect HTML5 Features Before You Use Them
• The CSS3 Age Has Begun