HTML5 Form features you should know

Introduction

In the past few articles (Introduction to HTML5 for ASP.NET Developers, Using HTML5 input types in ASP.NET and Working with HTML5 Canvas) I discussed HTML5 features that every ASP.NET developer should be aware of. In this article I will focus on HTML Forms and discuss some enhancements that make your life easy. Merely using various <input> types is just one part of the story. You should also know HTML5 features that are applicable to the form as a whole. This article illustrates some such features. All the examples use Chrome as a browser but many can be tested in Safari, Opera and others.

Dealing with Required Fields

Many data entry forms expect that some value must be entered in textboxes. To enforce this requirement, ASP.NET developers often use RequiredFieldValidator control. HTML5 includes an easy alternative to indicate mandatory data entry fields. Consider the following markup:

<input id="firstName" type="text" name="firstName" required/>

Noticed that "required" at the end of <input> element? This is how HTML5 specifies that the given field is mandatory. If you don't supply any value for the firstName textbox, browser will show an error message and refuse to submit the form even if you have not written any validation script. The following figure shows how Chrome shows the error message:

You can also customize the default appearance of required fields. For example, many times developers show * mark to indicate required fields. To customize the appearance, you need to add a CSS class like this:

input:required
{
    border: 1px red solid;
    background-color: #FFFF00;
}

Now your required form fields will be displayed as shown below:

Setting Autofocus

HTML5 autofocus attribute sets the initial focus to a field marked with autofocus attribute. Autofocus attribute is used as follows:

<input id="lastName" type="text" name="lastName" required size="50" autofocus />

The following figure shows how lastName field gets the initial focus instead of firstName due to autofocus attribute:

Displaying "watermark" text using Placeholders

Many times you want to specify to the user what kind of data is to be entered in a field. For example, if you want the user to enter a telephone number, you may consider giving an example phone number that shows the format in which the number is to be entered. Normally, developers use separate Labels to specify this information. More elegant approach is, however, HTML5 placeholder that allows you to specify such help text. Consider the following form:

Notice how First Name field shows some text as a "watermark". When the textbox gets the focus the text disappears automatically. This is done using placeholder as shown below:

<input id="firstName" type="text" name="firstName" 
placeholder="Must be min. 3 characters. Only alpha allowed."  
required 
size="50"/>

Notice how Placeholder attribute specifies a string that appears in the textbox. 

Pattern Matching

New input types of HTML5 take care of many of the formats reducing the need to explicitly validate the firlds but at times you need to some custom format. For example, you may want to accept currency values in a specific format. That is where Pattern attribute of HTML5 comes into picture. It takes any regular expression and validates entered value against it. The following example shows how the pattern attribute is used:

<input id="firstName" type="text" name="firstName" 
required pattern="^\s*([a-zA-Z]+)\s*$"/>

Notice how the regular expression specified by the pattern attribute ensures that only alphabets are allowed. If you try to enter number in the firstName field the browser will give an error as shown below:

Setting Form Action and Form Method via Button

Normally, you would set action and method attributes of a form element to indicate the action URL and form submission method (GET/POST). HTML5 allows you to set these values from an input type submit or button. The following markup shows how: 

<input id="Submit1" type="submit" value="Submit" 
formaction="/home/index2" formmethod="post" />

The above markup is taken from an ASP.NET MVC view named Index. By default the form submits to Index() action method. Using formaction attribute of the Submit button you changed it to Index2() action method. You can also set formmethod attribute to set form method. The two action methods are shown below:

[HttpPost]
public ActionResult Index(string firstName,string lastName)
{
    ViewBag.Message = "Welcome " + firstName + " " + lastName;
    return View();
}

[HttpPost]
public ActionResult Index2(string firstName, string lastName)
{
    ViewBag.Message = "Hello " + firstName + " " + lastName;
    return View("Index");
}

As you can see they do almost the same trivial job of displaying a message with a minor difference. The Index() method sets "Welcome" message in the ViewBag whereas Index2() action method sets "Hello" message in the ViewBag. If you don't set formaction attribute on the submit button, the form is submitted to the Index() action method. However, if you set the formaction attribute, Index2() action method is called.

Turning the validation off

HTML5 provides various validation mechanisms in the form of input types, required attribute and pattern attribute. At times, however, you may want to skip the validation mechanisms. For example, let's say you have "Cancel" button or "Help" button that does a post back but since it doesn't have any impact on your data it is alright to bypass the validation. You can turn the validation off either at form level or at field level. At form level, novalidate attribute does the trick whereas at field level formnovalidate attribute does the job. The following markup shows how both of these attributes are used:

<form method="post" novalidate="novalidate">

<input id="Submit2" type="submit" value="Cancel" 
formaction="/home/index3" 
formnovalidate="formnovalidate" />

Turning the autocomplete off

Most of the browsers try to help users fill data entry forms with the help of autocomplete feature. At times, however, you may want to disable this feature for a form or a field. The autocomplete attribute of HTML5 allows you to do just that. The following markup shows how it is used at form level as well as field level:

<form method="post"  autocomplete="off">

<input id="firstName" type="text" ... autocomplete="off"/>

Notice how the autocomplete attribute is set to off to turn the autocomplete feature off. If you want to enable autocomplete for a specific field you can set autocomplete attribute to on. The following figures show firstName textbox with and without autocomplete.

Summary

HTML5 provides many enhancements to <form> element and <input> element. These enhancements help developers validate data entry forms with ease without writing any client side script. Currently, not all the browsers support all of these enhancements and developers may still require to use JavaScript as a fallback mechanism. However, as HTML5 matures and becomes widely accepted this need will reduce. These enhancements are certainly a welcome addition to new websites being developed using latest web technologies.