Can you imagine what the web would be like if it were truly read-only? What if there were no way for a user to interact with a site by providing
personal data? With no way to input data, the Internet would be full of "brochure-ware" sites that could not engage in any real business exchanges. The
value of the Internet would be insignificant compared with what it is today.
So it goes without saying that a required factor for many successful websites is the ability to acquire data from a user. And because user interaction
plays such a key role in the overall web experience, it isn't surprising that among the many improvements found in HTML5 are feature enhancements to form input. In this article, I will introduce these new form features, exploring some of the new elements and
attributes, how to apply styles, and new ways to control validation in script. Rather than try to cover everything that is new, instead I will focus on
some practical aspects of HTML5 form development that you can start using today.
Examining a Simple HTML Form
To provide some context for the new features, let's first peer into a simple HTML form that doesn't use any of the new features, as shown in Figure 1.
With some Cascading Style Sheets (CSS) styles applied, the rendering of the simple form, shown in Figure 2, is a grouping of text boxes with a submit
button.
Figure 1: Simple HTML form
<form> <!-- action & method attributes supplied by developer -->
<label for="name">Name</label>
<input id="name" name="name" type="text" />
<label for="email">Email</label>
<input id="email" name="email" type="text" />
<label for="site">Site</label>
<input id="site" name="site" type="text" />
<label for="phone">Phone</label>
<input id="phone" name="phone" type="text" />
<input id="submit" name="submit" type="submit"
value="Send Data" />
</form>
Figure 2: Simple HTML form, rendered in a browser
The simple form is functional, but it poses some common data-collection challenges. For example, consider the same form containing data entered by a
user, as shown in Figure 3. When the user clicks the Send Data button, will the data entered be valid according to the requirements of the web
developer? In the simple HTML form, the data will be submitted as is.
Figure 3: Data entered into simple HTML form
As web developers, when we observe how users might use (or abuse) our forms, we should contemplate the following questions when developing an
application:
-
Are all fields required?
-
Does the user understand what data is being requested?
-
Will the data entered by the user adhere to format requirements?
-
If the user does not complete the form accurately, what should happen?
A consideration of these typical scenarios will help us to appreciate the addition of the new HTML5 form input features. In the remainder of this
article, I will discuss the advantages of "what's new" while walking through the process of upgrading the simple HTML form one feature at a time.
New Form Elements and Attributes
HTML5 supports most of the existing form inputs and elements, as well as new features to support data entry in the modern world. Figure 4 lists the
input types supported in HTML5.
Looking over the data being requested in the simple HTML form, we can see an obvious opportunity to explore three new input types: email, url, and tel.
What would be the advantage of using these new input types instead of text? The first advantage is semantics. Applying a more specific type than text
to form data gives parsing engines a better understanding of what the data means. The other advantages all lie in the power of the browser, which
raises a valid concern: What browsers support these new features?
To answer the "browser support" question, I will first acknowledge what browsers I used to support the examples in this article: Internet Explorer (IE)
10.0 (Platform Preview) and Google Chrome (14.0). Although other modern browsers also support many of the new form features, I wanted to keep the focus
primarily on the "what and how," not on the "where." As browsers (and standards) continue to evolve, we will have plenty of opportunities to learn
about varying implementations.