Tutorial #49
HTML5 Form Input Elements Basic   2014-02-11

Introduction

The basic HTML Form Input elements Text, Textarea, Select, Checkbox, Radio Button and File Upload have served us well over the years. But in many cases we use JavaScript to extend them in order to validate user input and to make some choices more convenient. These include autocompletion and widgets such as color pickers and calendars.

HTML5 introduces a number of new input types that have some of this functionality built in to them. This is great as it allows users with little or no experience with JavaScript to create richer web sites using HTML alone.

Along with the input types are a number of Attributes that can be used with them to implement data validation in the browser.

The number of combinations of input types and attributes is a little daunting. So in this tutorial I will demonstrate the new input types in their basic operation. In a second tutorial I will demonstrate how the attributes are used in conjunction with them.

As of February 2014, only Google Chrome implements all the input types. Some of them are implemented in Firefox and Safari but you should test them in each target browser as they are being actively developed. one way to do this is to load this Test Page in each browser. If an input type is not supported then it will be rendered like a regular text input.

As a result, the demo is best viewed in Google Chrome and looks like this:

Demo 1 screenshot for this tutorial


Input Types

The first four types are really variants of the basic text input type. That still works in HTML5 as it always has done but the new types are intended to allow for data validation in the Client. But note that only certain types implement validation by default. I will cover that in more detail in the companion tutorial on form input attributes.

Users on mobile devices are likely to see the most benefit from this class of input as, for example, iOS can display a different keyboard depending on whether the input is for an email address or a phone number.

Image 1 for this tutorial

number

The number type is intended for Numberic Values (either integers or floats). The small up and down arrows control on the right of this input field can be clicked in order to raise or decrease the value of the field.

This input type does validate the input value when the page is submitted and will create a popup message by the input field.

Image 2 for this tutorial

This can be useful for things like a shopping cart or ticket reservation system, but I do a lot of numeric data entry and this feature is not very useful and, in fact, can be annoying if you accidentally click on the control. But you can always use the classic text input type, so you have the choice.

email

The email with suitable validation attributes allows you to check that the user has entered an email address in a correct format. The validation is applied when the form is submitted and looks for the basic email format something@something.something. It does not check that this the address is a real address, but it helps catch some errors while the user is still filling out the form.

Image 3 for this tutorial

tel

The tel input type does the same for phone numbers. The format for phone numbers varies around the world so there is no default validation for this type. Instead, you need to specify a regular expression pattern that the input is expected to match to. But along with this, you need a way to tell the user what a valid format is. You do this in the title attirbute which is displayed in the popup if the validation fails.

For example, the demo uses the pattern for a phone number in the US.

input type="tel" name="tel" pattern='\d{3}-\d{3}\-\d{4}' title='Format: XXX-XXX-XXXX'

Image 4 for this tutorial

url

The url input is the same class as those shown above, with basic validation by default. This requires that the URL has the form of http(s)://something.

Image 5 for this tutorial

search

The search input looks different from a regular text input field, with rounded corners, to make it resemble some of the search inputs that users are familar with on web pages and applications. In addition, once text has been entered, a small 'X' icon appears at the end of the field which will clear the text when clicked.

Image 6 for this tutorial


The second class of input types involve dates and times and these do offer convenience, even before validation, etc.

Image 7 for this tutorial

date

The date input allows the user to enter a Date, such as you might use to add an event to a calendar. The default format is the US format of mm/dd/yy (although this may be different in non-US locales). The input field is set up with those three components as separate fields that you can enter numeric values into and tab between. There is also an up-down arrow control that allows you to step values up and down by clicking. There is no validation, as such, but the user is unable to enter anyhting other than the desired format. For example, you cannot mistakenly enter text into this field.

The big convenience here is that if you click on the down arrow on the right of the input field, it brings up a calendar widget which allows you to navigate to the correct date and select it. This replaces all those JavaScript calendar widgets that many of us add to our pages to make date selection less painful. The trade off is that the look of the widget is determined by the browser, which may be an issue in some cases.

Image 8 for this tutorial

time

The time input allows you enter a time in the default format of HH:MM [AM|PM]. Values are entered from the keyboard or through the up-down arrow control. There is no equivalent to the calendar widget here. Note that although the default format in the input uses a AM/PM, the value passed to the server uses the 24 hour format, so 5:00 PM is transmitted as 17:00.

month

The month input is a convenient variant of the date input that allows you to specify the month and year, using either keyboard entry or the calendar widget.

week

Similarly the week input allows you to specify the numeric week in a year (1 though 52), using the same input methods.

datetime-local

datetime-local allows the user to enter a Date and Time combination, such as you might use to add an event to a calendar. The default format is dd/mm/yy, hh:mm [am|pm]. The input field is set up with those six components as separate fields that you can enter values into and tab between.

You will see references to a datetime input type but this is currently deprecated in favour of datetime-local.


The final two inputs don't fall into either of these classes

Image 9 for this tutorial

range

The range input allows a user to specify a numeric value simply by sliding the circle on the widget to the left or the right. You can specify minimum and maximum numeric values that limit the range using min and max attributes. The default values for these are 0 and 100, with the slider being set to 50 before user interaction, unless a value is supplied.

Like the calendar widget, this is a very useful component that can replace a JavaScript plugin with simple HTML, making it accessible to a wider range of page designers.

color

The color input provides similar convenience when you want the user to select a color. The input field shows the current color, black by default, and clicking on this brings up the color picker widget that is provided by the host computer system. On the Mac this provides several ways to choose the target color. Selecting one in the picker causes the input field to update. The chosen color is passed to the server on form submission as the six character hexadecimal RGB representation, such as #ff0000 in the case of red.

Image 10 for this tutorial


Understanding the Code

The demo implements all of these input types with no attributes (with one exception). The form associated with these sends the values to the server which simply echoes the values back in the form. In addition, the associated JavaScript code detects whenever a change is made to any of the inputs and displays the value as text to the right of the input.

The JS code sets up callback functions that are called whenever a change event is detected on any of the inputs. Note the use of the createCallback function that updates the result div with the current value of the input. If this were done directly as the function passed to the jQuery on call then the div that was updated would be the last one in the array, regardless of the real target. This is one of those issues with JavaScript closures that can confuse the unwary programmer - like Me!




More Information

Test for browser support

Can I use... - great site to view state of implementation of HTML5 and CSS features

W3C HTML reference


Code for this Tutorial


Share this tutorial



Comment on this Tutorial


comments powered by Disqus