Tuesday, 13 August 2013

What you need to know about HTML5 forms

Get details on the new elements, attributes, and input types for HTML5 forms, along with code snippets to illustrate how they are used. 
What would a website be without a form? Exactly! At a minimum, your users need a way to communicate with your organization, and you need a way to glean information from your users. Forms are the “de facto” and simplest way for organizations to obtain user information, the simplest being a rudimentary contact form. In addition, HTML5 forms are making it easier than ever to create highly stylized and browser-based validation with the new elements, attributes, input types, FormData Object, and CSS3 styling. HTML5 also introduced thirteen input types which automatically fall back to text inputs when viewed in unsupported browsers. I will list the new input types and review several of the new form elements, attributes, and input attributes. I will also present code snippet examples of several.

HTML5 Input Types

The thirteen new HTML5 input types are listed below along with a short description of each; if the browser cannot detect the input type, it automatically falls back to a regular text field.
  • Color:  Allows you to select a color from a color picker dialog box or window.
  • Date: Allows the user to select a date and includes a dropdown calendar picker.
  • Datetime: The user can define a date and time with the time zone set to UTC.
  • Datetime-local: The user can enter a date and time with no time zone also provides a calendar dropdown.
  • Email: Enter either a single email address or a list of email addresses which is automatically validated.
  • Month: Allows entering a date with a month and a year, but no time zone, also provides a calendar dropdown.
  • Number: Used for input fields that should contain a numerical value.
  • Range: Allows the user to enter numerical input that should contain a value from a range of numbers.
  • Search: Defines a search field that the user can enter query text
  • Tel: Defines a field where a user can enter a telephone number.
  • Time: Allows the user to select a time value with hour, minute, seconds, and fractional seconds, but no time zone.
  • Url: Allows the user to enter  a single URL address which is also automatically validated upon form submittal
  • Week: Allows the user to select a week and a year, but no time zone, also provides a calendar dropdown.

HTML5 Form <form> attributes

Two HTML5 form attributes are autocomplete and novalidate. The autocomplete attribute specifies if an input field will include an autocomplete value and is set as either “on” or “off.” Novalidate is a Boolean attribute, which when present, specifies that form data should not be validated upon submit. Code snippets of these HTML5 form attributes are displayed below first with the autocomplete utilized in two instances and then novalidate for telephone and e-mail:
  <form action="component-select-file.xxx" autocomplete="on">
    First name:<input type="text" name="first_Name">
    Last name: <input type="text" name="last_Name">
    E-mail: <input type="eMail" name="user_eMail" autocomplete="off">
    <input type="submit">

<form action="component-select-file.xxx" novalidate>
    Telephone: <input type="tel" name="tel_Number">
    E-mail: <input type="eMail" name="user_eMail">
    <input type="submit">

HTML5 Input <input> attributes

Sixteen HTML form input attributes include autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height and width, list, min and max, multiple, pattern, placeholder, required, and step. I will review five of these attributes along with code snippets;some will include visual displays from Chrome browser Version 28.0.1500.95 m.
Autofocus directs the input on the named element when the page is loaded, and can be applied to a button, input, select, or a text area. Check out this piece for more details on the autofocus input attribute. A sample code snippet and display result with the autofocus attribute is shown below.
<input type="text" name="first_Name" autocomplete="on" autofocus>
<input type="text" name="first_Name" autocomplete="on" autofocus>

The formaction attribute specifies the URL of a file that will process the input upon form submittal, and it overrides the action attribute of the <form> element. The formaction attribute can be used for button and input elements.  A sample code snippet of the formaction attribute in use is shown below.
<form action="component-select-file.xxx"> 
 <label for="first_Name">First name:</label> 
 <input type="text" name="first_Name" autocomplete="on">
 <button class="submit" type="submit" formaction="file-1.xxx">Submit Form</button>
 <input type="submit" formaction="file-2.xxx" value="Submit as admin"></input>

The formenctype attribute defines how the form data should be encoded upon submittal to the server and is only used for forms with the method=”post”, in addition, it also overrides the “enctype” of the attribute of the <form> element. The formenctype attribute is supported for both button and input elements, and it can be used with type="submit" and type="image". Attribute values for the formenctype attribute include the three shown below:
  • application/x-www-form-urlencoded – Default setting where all characters will be encoded before sent
  • multipart/form-data – Where no characters are encoded, you would use this when have forms that require file upload control
  • text/plain - Spaces are converted to "+" symbols, but no characters are encoded
A sample code snippet of the formenctype attribute in use is shown below.
<form action="post-enctype.xxx" method="post">
  <label for="first_Name">First name:</label> 
  <input type="text" name="first_Name" autocomplete="on">
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data" value="Submit Multipart/form-data">

The formmethod attribute states the HTTP method for sending form data to the action URL and it overrides the method attribute of the <form> element, and is supported for both button and input elements , and it can be used with type="submit" and type="image". The form data can be sent as URL variables with the method=”get” value, or as an HTTP post transaction with the method=”post” value. A sample code snippet of the formmethod attribute in use is shown below.
<form action="component-select-file.xxx" method="get"> 
  <label for="first_Name">First name:</label> 
  <input type="text" name="first_Name" autocomplete="on" autofocus>
  <label for="last_Name">Last name:</label> 
  <input type="text" name="last_Name">  
  <input type="submit" formmethod="post" formaction="select-post.asp" value="Submit Post Method">

Height and width
The height and width attributes define the dimensions of the <input> element and can only be used for an input type equals image <input type="image">. The values are expressed in pixels. A sample code snippet of the height and width attribute in use and the resulting display is shown below.
 <input type="image" src="i/button.png" alt="Submit" width="48" height="48">


For more reading and reference on the HTML5 form elements, types, and attributes, check out these resources.
  • HTML5 Input Types: By W3Schools, lists the input types and provides examples and demonstrations for each.
  • HTML5 Form Attributes: By W3Schools, lists the form attributes and provides examples and demonstrations for each.
  • Common Input Element Attributes: By WhatWG.org, lists the specifications and standards for HTML5 input element attributes.
  • The Current State of HTML5 Forms: By Wufoo, this resource lists the input types, attributes, and elements and the browser support for Firefox, Safari, Safari Mobile, Chrome, Opera, IE, and Android. The page also provides sections on JavaScript and HTML5 Forms and CSS and HTML5 Forms.  A screen capture of the input types support matrix is displayed below.