Tutorial: Introduction to HTML5 Forms

Hi everyone,

Today I am going to introduce you to HTML5 forms: I will discuss about the motivation that lead to HTML5 forms, the current limitations with forms before HTML5 and finally what are the cool and exciting new features using HTML5 forms.
Forms are used by Web Applications to gather information (input) from users. For instance, a form will allow users to:

Book a flight
Sign in or sign up on a web site
Leave a comment on a forum (you are more than welcome to leave a comment at the end of this article ;) )
Etc...

As a web developer, you might have face the need to gather the following information when creating a form:

Email
Date
Phone number
Url

Moreover, you might also want to provide the following functionalities in your Web Application:

Auto focus an element of the form
Give hints to end-users on what information they should give (or in which format)
Handle minimum/maximum values for some controls
Force users to enter a value on a form
Display error messages to end users
- When they do not provide the required information
- When the provided information is in the wrong format
Validate form on the client side to prevent from sending it to the server if there are errors on the form (Of course form validation must always happen on the server side)

Providing those controls and these functionalities without HTML5 is possible but it is really cumbersome.
HTML4 does not support natively some controls such as date picker, slider, color picker, etc...
HTML4 input types are very limited so the way developers provide these custom controls is by using third-party JavaScript libraries such as:

JQuery
DOJO
MooTools
Other JavaScript frameworks

Not that these frameworks are bad but it takes time to understand a new library or framework. Moreover it adds complexity to developers and maybe future developers that will maintain or improve the web application.

You do not need to use these framework if you have common inputs to handle (email, phone number or url) for instance. You can use <input type="text" name="email" id="email"/> and then you might want to check user input on the client side using JavaScript before sending the form to the server.

To do that, you would use regular expressions such as this one for instance, to check if a url is valid or not:

Code:


/^(((http|https|ftp):\/\/)?([[a-zA-Z0-9]\-\.])+(\.)([[a-zA-Z0-9]]){2,4}([[a-zA-Z0-9]\/+=%&_\.~?\-]*))*$/

Regular expressions for most of us developers are complex and error-prone (no I did not write this regular expression, I found it on the Web)

HTML5 forms come from a previous work of the WHAT WG (Web Hypertext Application Technology Working Group: An important group of people that are at the root of HTML5 as we know it now): Web Forms 2.0
HTML5 forms provides new input types (thirteen new types):

color: To choose a color. Below is an example of <input type="color"> on Blackberry:
date: To choose a date (year, month and day) with no timezone. Below is an example of <input type="date"> in Opera:
datetime: Same as choosing a date but include the time (hour, minute, second, fraction of second) but the user cannot change the time zone offset
datetime-local: Same as datetime except that the user can change the time zone offset
month: To choose only a date and a month
time: To choose a time (hour, minute, second, fraction of second)
week: To choose a year with a week number for this year
email: To enter an email
number: To enter a number. Can be combined with other attributes such as min to define min value, max to define max value and step to define the increment.
range: Displays a slider. Below is an example of <input type="range"> in Chrome:
search: No real difference with a text input except that the display might look different (rounded corners in Safari on the Mac)
tel: Looks like a text input except that the purpose is for entering phone number
url: Looks like a text input except that the purpose is for providing a URL

Safari mobile on iOS displays different types of keyboard depending on the input type. For instance, when a user enter information on a <input type="tel"> the dial pad is shown to the user.
Along with these new input types, HTML5 provides new attributes such as:

autofocus: Boolean that give automatically the focus on a control. There should be only one control focused per page
placeholder: This attribute allows developers to give a hint on a control to the users (might be an example value for instance)
required: Boolean that specify if a user input is mandatory on a control. If a user tries to submit a form that has an empty input for a control that have the required attribute, the browser will not allow the submission of the form
multiple: For instance, <input type="file" multiple> allows a user to send multiple files
pattern: A developer use mail type for email or url for URL input but what if a developer want something specific to his/her needs? pattern allows the developer to use a regular expression and value entered by a user will have to match this pattern
autocomplete: autocomplete have two values: on and off. Can be applied on the entire form (on by default) and on controls. It can be good to remember previous values entered by users. Developers should consider this attribute carefully (sensitive data such as credit card number should not be remembered => set to off).
min and max: Respectively define minimum and maximum values for controls. That works for number type but can also be applied to other input types such as date
step: Define the increment number for number input type
list: To reference a <datalist> element by its id attribute. the <datalist> element contains a list of values.

Let say I want to create a simplified form to recruit new technical writers on this kick-ass forum:

Code:


<form name="subscribe">
  <label for="form-firstname">Firstname:</label>
  <input type="text" name="form-firstname" id="form-firstname" placeholder="John" required/> </br>
  <label for="form-lastname">Lastname:</label>
  <input type="text" name="form-lastname" id="form-lastname" placeholder="Doe" required/> </br>
  <label for="form-birthdate">Birthdate:</label>
  <input type="date" name="form-date" id="form-birthdate"/> </br>
  <label for="form-email">Email:</label>
  <input type="email" name="form-email" id="form-email" placeholder="[email protected]" required/> </br>
  <label for="form-email">Website/Blog:</label>
  <input type="url" name="form-url" id="form-url" placeholder="http://www.thisisunknown.com/"/> </br>
  <script type="text/javascript">
     function updateExpdisplay(updatedValue) {
       var expValue=document.getElementById("expdisplay");
       expValue.innerHTML=updatedValue;
     }
   </script>
   <label for="form-explevel">Experience with Web Tech:</label>
   <input id="form-explevel" name="form-explevel" type="range" onchange="updateExpdisplay(this.value)" min="0" max="100" step="10" value="0">
   <span id="expdisplay">0</span>
   <span>%</span> </br>
   <input type="submit"/>
</form>

Here the input I want to be required are the firstname, the lastname and the email of a user. Know that CSS3 provides some pseudo classes that applies to form such as :required (I used that to paint the background in yellow for required input), :valid, :invalid, :focus and others you can find in the specification.

The state of implementation of HTML5 forms is different in each browsers, so far the one that has the most support is Opera:

You can see in the image that I get a nice error message if my email is not valid, but I don't see any placeholder taking place.

Here below in chrome, I can see my placeholder attributes taking place:

Different levels of implementation exist on the market but there is two nice things to know:

Browsers that do not support new input types provide fallback into: <input type="text">
Browsers that do not support new attributes just ignore them

There is also a good JavaScript library to detect features: Modernizr
Combining Modernizr and JQuery (or other JavaScript library) allows you to support all your users on different browsers (Yes, it adds complexity but browsers will support these features overtime and while it is not the case you do not let down users that have a legacy browser).

Thanks for reading!