Form Tips


HTML5 Input Validation Tutorial

Automatic validation is another way in which HTML5 reduces the amount of scripting needed to create dynamic websites. With several of the new HTML5 <input> types, the browser can validate the users’ inputs.  You no longer have to use scripts to instruct your users to enter the correct type of input. For example, with the input types, email and URL, the browser can automatically instruct the user to enter a valid email or a valid URL if they enter the wrong type of input.

All the examples in this tutorial use the Opera browser. Currently it is the only browser that supports all the new <input> types. You are encouraged to download the Opera browser to get a sense of what these examples really look like.

Here is what happens when you enter text other than an email in the <input> type Email.

Here is what happens when you enter text other than a URL in the <input> type url.

Prompting Required Fields
The new required attribute allows you to highlight mandatory inputs.
Full Name: <input type= “text” name= “” required= “required” />
The browser will prompt the user to fill the required field if the user tries to submit the form without filling out that section.

Validating Pattern

The input attribute pattern gives you the additional option of setting a specific pattern for the browser to validate. For example you can set the attribute to validate a three digit area code. In order to do this you would set the pattern attribute to accept the digits 0-9 in sets of 3. You can use the title attribute to give your users specific instructions.

The pattern attribute can be defined using “regular expressions.”  For a three digit code this would be [0-9] {3}
pattern= “[0-9] {3}”
title= “Three digit area code.”
Here is how it looks as markup.
Area Code: <input type= “text” name= “area_code” pattern= “[0-9] {3}”  title= “Three digit area code.”/>

Here is what happens when you enter the wrong text.

The pattern attribute can be used with <input> types, text, search, url, telephone, email, and password.

Prompting Number Values

The number attribute lets you specify the range of values that are acceptable and prompts the user to select the right range.

Number: <input type= “number” name= “five_steps” max= “30″ min= “0″ step= “5″ value= “10″ />

Here is what happens when a user enters a value greater than your specified max value 30.

Here is what happens when a user enters a value less than your specified min value 0.

Advertisements

One thought on “Form Tips

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s