Making Sense of HTML5

Collecting data

HTML was originally devised to be a language for creating hypertext documents. Over the years, the language has been enriched with layout capabilities and basic features to collect data. Writing input forms to collect data from users proved to be a nontrivial task. One thing is to collect plain text; it is quite another to collect a date, a number, or an email address.

For too many years, HTML has only offered input text fields completely unable to distinguish numbers, dates, and email addresses from plain text. Subsequently, page developers were responsible for preventing users from typing unwanted characters and for client validation of the entered text.

With HTML5, a lot of this work has been pushed to the browser side. This means that by simply using a slightly more sophisticated set of elements developers can achieve the same level of form validation in a faster and safer way.

Adjusting input fields

In HTML5, you still create an input form by using the same markup elements you used from earlier versions of the language. In other words, the following markup will still give you the opportunity to upload any typed content to the given server.

<form action="http://www.yourserver.com/upload">
   <span> Your name </span>
   <input type="text" value="" />
   <input type="submit" value="Save" />
</form>

The <input> element is the element that inserts a graphical element (such as, an input box or a drop-down list) to collect some input data. You also use the <input> element to add a push button to start the submission process to the server. In HTML5, the <input> element comes with more options for the type of input boxes. For example, you can have date pickers, sliders, and search boxes offered by the browser. At the same time, the browser provides free form validation for most common scenarios, such as when a field is required and can’t be left empty by the user.

New input types

If you look at the HTML5 syntax of the <input> element, the major difference with past versions is the list of values now allowed for the type attribute. Table 2-1 lists some of the new input types supported in HTML5.

Table 2-1 HTML5 specific values for the type attribute

Value	Description
Color	Meant to let the browser display any UI that allows entry of a color. Note: This input type is not supported on Internet Explorer 10.
date	Meant to let the browser display any UI that allows entry of a date.
email	Meant to let the browser display any UI that allows entry of an email address.
number	Meant to let the browser display any UI that allows entry of a numeric input.
range	Meant to let the browser display any UI that allows entry of a numeric input.
search	Meant to let the browser display any UI that allows entry of a text to be searched for.
tel	Meant to let the browser display any UI that allows entry of a telephone number.
time	Meant to let the browser display any UI that allows entry of a time.
url	Meant to let the browser display any UI that allows entry of a URL.

Note that the list in Table 2-1 is incomplete and limited to input types that you can really find supported today on some web browsers. Other input types (for example, week) are part of the current HTML5 draft but are not implemented anywhere. You might want to refer to http://www.w3schools.com/html5 for more details.

Making input fields auto-focusable

HTML5 provides the definitive solution to a couple of common problems that developers faced for years and solved using a bit of JavaScript code. The first of these problems relates to giving the input focus to an input field.

Using JavaScript, you can tell the browser to assign the input focus to a particular input field upon display of the page. In HTML5, you can use a new attribute for the <input> element—the autofocus attribute. Try placing the following code in the body of a new HTML page named autofocus.html.

<form>
      <input type="text" value="Dino" />
      <input type="text" autofocus />
      <br />
      <input type="submit" value="Save" />
</form>

Save the page and display it in Internet Explorer. As Figure 2-7 shows, the cursor that indicates input focus is on the second field.

Giving hints to users

Looking at Figure 2-7, it is quite hard to figure out which content goes in which field. Probably in a real-world page, one would use labels and a more sophisticated layout to make it easier for users to understand the expected content for each field. This is just the second problem I referred to a moment ago.

Recently, developers got into the groove of displaying a short text message in an input text field to instruct users. Before HTML5, this could only be accomplished by using a bit of JavaScript code. In HTML5, the new placeholder attribute makes it a lot easier and even more natural.

Create a new HTML page and save it as placeholder.html. Now edit the content of the body, as shown below:

<form>
      <input type="text" placeholder="First name" />
      <input type="text" placeholder="Last name" />
      <br />
      <input type="submit" value="Save" />
</form>

As Figure 2-8 shows, both empty fields now provide a hint to users about the expected content.

Form submission

Sometimes developers have no other option besides writing the same boilerplate code over and over again, no matter how annoying it is. A good example of boilerplate code that it would be great to stop writing is validation of input forms in HTML pages. Any data collected from an HTML input form should be carefully validated on the server before being used for some business tasks. However, some basic validation tasks can be easily delegated to the browser and commanded by the developers using markup instead of JavaScript code.

HTML5 helps reduce the amount of boilerplate code requested to build effective input forms. I’ve already mentioned the newest attributes of the HTML5 <input> element; the next step is to take a look at other attributes you can leverage to control the whole process of form submission, including ways to ensure that the user has not left required fields blank, and that the user input matches expected patterns. For example, if you ask for a phone number, the user shouldn’t be allowed to enter something that couldn’t possibly be a valid phone number.

Detecting required fields

By adding the required attribute to a <input> element, you tell the browser that the input field cannot be blank when the form that contains the input element is submitted. You use the required attribute only if the field is not considered optional.

Consider the following content of an HTML page named required.html:

<body>
<form>
      <input type="text" placeholder="Your PIN" required />
      <br />
      <input type="submit" value="Enter" />
</form>
</body>

When the user pushes the submit button and the text field is empty, the browser automatically denies the post and displays an error message. The specific content, form, and shape of the error message may change according to the browser; the overall behavior, though, is similar on all HTML5-compliant browsers. Figure 2-9 shows how Internet Explorer 10 deals with required fields left empty.

HTML5 browsers allow you to customize the error message by using the oninvalid attribute, as shown below:

<form>
      <input type="text" placeholder="Your PIN" required
             oninvalid="this.setCustomValidity('PIN is mandatory')" />
      <br />
      <input type="submit" value="Enter" />
</form>

Validating against regular expressions

Table 2-1 lists popular new types of input fields supported by HTML5-compliant browsers. If your page is expected to collect a date, then you can use an input date field; likewise, you can use a numeric input field if you need to collect a number and so forth. But what if you intend to collect data formatted in a specific way that none of the predefined input types can guarantee? For example, what if you need users to enter a string with two letters followed by exactly six digits?

In HTML5, you can use the pattern attribute, as shown in the example below:

<form>
      <input type="text"
             placeholder="Your PIN"
             title="2 letters + 6 digits"
             pattern="[a-zA-Z]{2}\d{6}" />
      <br />
      <input type="submit" value="Enter" />
</form>

When you use the pattern attribute, Internet Explorer 10 requires that you also indicate the title attribute—usually used to add a tooltip to most HTML elements. The text of the title attribute is combined with a default static message to produce some feedback to the user when the content of the field is invalid.

Figure 2-10 shows how Internet Explorer 10 deals with patterns when the submitted content is invalid.

The value of the pattern attribute has to be a regular expression. Regular expressions can get very complex; in fact, they’re a topic worthy of a complete book, but learning the basics of regular expression use isn’t too difficult. For more information on regular expressions, you can check out http://www.regular-expressions.info.

Forms and input validation

Each HTML form should contain a submit button; when the submit button is pushed the browser collects the content of the input fields and prepares to post it to the specified URL. Up until HTML5, the browser was not responsible for validating the content of the form. Developers, though, could hook up validation to the process using a bit of JavaScript code.

Validating a form entails checking that each input field in the form contains valid content. Although the HTML5 standard doesn’t mandate browsers to validate the content of a form, this is indeed what happens by default with most browsers. HTML5 browsers give you a chance to disable validation on the entire form, but not on individual fields. You can disable form validation by using the novalidate attribute, as shown below in the file novalidate.htm:

<form novalidate>
      <input type="text" placeholder="Your PIN"
             title="2 letters + 6 digits"
             pattern="[a-zA-Z]{2}\d{6}" />
      <br />
      <input type="submit" value="Enter" />
</form>

In this case, the content of the form is submitted to the server regardless of the data held by input fields.

If the form contains multiple submit buttons, you can enable or disable validation on a per-button basis so that validation occurs if users, say, click the first button but not the second. To disable validation when the form is submitted via a particular submit button, you add the formnovalidate attribute as follows:

<input type="submit" value="..." formnovalidate />