BASEWEBMASTER

Brought To You By
Tomlin Ventures Ltd

HTML5 New Form Elements

Learn About The New Form Elements Available HTML5

In addition to the new type attributes that have been added in HTML5 forms have also benefited from some brand new elements. This article will give you a full explanation of these elements and show you how they can and should be incorporated into your web pages.

Some of these new elements are most functional when combined with javascript, in fact some were designed specifically for use with javascript. Although it is not necessary to know javascript to understand some of this tutorial a basic understanding may be beneficial.

A quick note on browsers, as always there is some inconsistency between browsers. The elements looked at within this tutorial are totally new there for if your browser does not support them it is very unlikely that you will see anything what so ever, if you are having difficulty seeing them Opera currently provides the fullest supports for them all.

HTML5's New Form Elements

Okay so now lets take at look at those new form elements I promised.

datalist

The datalist element is used to contain option elements much like the standard select element does. Unlike the select element it is only necessary to define a value for the options.

HTML5
<datalist>
	<option value='email@myemail.com'>
	<option value='you@yourdomain.com'>
	<option value='me@mydomain.com'>
</datalist>

The difference with the datalist is that its options do not display themselves directly within the form. As such it does not represent a form input field in itself. The datalist must be reference by an input element such as one of those mentioned above. This is done by giving the datalist a valid id value and then referencing it using the list attribute on the input element as shown here on an email input.

HTML5
Email: <input type='email' name='email' list='email_list'>
<datalist id='email_list'>
	<option value='email@myemail.com'>
	<option value='you@yourdomain.com'>
	<option value='me@mydomain.com'>
	<option value='this is not a valid email'>
</datalist>

The above code will result in the following input.

Email:

You will see when the focus in put onto the input element i.e. you move the cursor to appear within it, that the values given in the option elements will appear in a drop down list.

Options will only appear if they meet the various criteria of the input field in question. For example if you were to reference a datalist of email addresses and text strings to an email input then only the email addresses will display. This should be shown in the above example.

The datalist does not render the input unusable in any way, the user may still enter alternate text and ignore the datalist options completely. Also the datalist may be added to by the browser itself, often when you focus on an email field for example you may noticed that your browser has remembered you email address from a previous form and offers it as an option. This functionality will still be present whether or not a datalist is given, it is simply that the datalist adds common or expected values to the input field to aid the user.

meter

The meter element is used to show a quantity in relation to a defined range or max value. Alternatively you could think of a meter elements value as a fraction which could fall between zero and 1 or as a percentage which falls between zero and 100%. It is a way to visually represent a scale value as compared to some other pre defined value. For example you wish to separate a class of 50 students by gender, to display the results using meter elements would be done like this.

HTML5
<label><meter min='0' max='50' value='30'></meter> Male</label>
<label><meter min='0' max='50' value='20'></meter> Female</label>

So in the above example we have used the min and max attributes to define the range i.e. the points to which the direct comparisons can be made. There are 50 students in the class there fore the max value is set to 50 and the count of each gender is taken as a fraction of 50. The min value of the meter element is automatically set to zero by default and can be omitted if you wish to start from zero. The max value is very important as it will default to 1 or the value of the meter if this is larger than 1. In most cases this would result in the display losing all meaning and context.

low, high, optimum

Additionally the meter element may utilise the low, high, and optimum attributes. They are used to define specific values and ranges within the min - max spread, often creating a difference in the display bars appearance as shown below.

HTML5
<label><meter min='0' max='50' low='10' optimum='30' high='40' value='45'></meter> High</label>
<label><meter min='0' max='50' low='10' optimum='30' high='40' value='30'></meter> Optimum</label>
<label><meter min='0' max='50' low='10' optimum='30' high='40' value='5'></meter> Low</label>

The meter element may be used within normal page content just as it may be used within a form element. Its most obvious use would be to produce graphs and bar charts which until now has only been possible in a visual way and has not carried any semantic merit of any kind.

progress

The progress element provides a simple and effective way for a web designer to notify a user of their progress regarding a specified task. For example, when users are completing a series of sign up forms, you might want to notify them of their progress throughout the process.

HTML5
<label>Progress: <progress max='100' value='30'></progress></label>

The above example shows a static progress element which in this case is showing 30% complete. Much like the meter element the min and max values are by default set to 0 and 1 respectively.

A more likely scenario would be that the progress element would be updated during various stages contained within a single page. To change the value dynamically like this you would need to include some simple javascript to handle the updating, similar to that shown below.

Javascript
<script>
function upProgress(Value) {
  var prog = document.getElementById('progress_update');
  prog.value += Value;
}
</script>
HTML5
<label>Progress: <progress id='progress_update' max='100' value='0'></progress></label>
<button onclick='upProgress(10)'>click me</button>

Which would display like this.

Notice that when you hit the click me button the javascript will add 10 to the current value of the progress element. This will display as an ever increasing progress bar up until the max value which here is set to 100. At this point the progress bar will be full and the action associated with it should also be complete.

output

Another one of HTML5's new interactive features the output element has been designed specifically for use when outputted data or text is expected. As such the output element is not a form input of any kind. Whether it occurs as part of a form or not the output will not be submitted in a standard sense, along with other form data.

HTML5
<output></output>

The output element has no special appearance, it is simply used as a container for outputted data. A simple example for it's would be an auto calculating form to add two numbers together.

+ =

Enter numerical values in to either of the two number inputs and you should see the sum of the two figures automatically added together on the left of the sum, this value is contained within an output element.

HTML5
<form id='output_form' onsubmit='return false' oninput='upOutput()'>
 <p><input type='number' value='0'> + <input type='number' value='0'> = <output></output></p>
</form>
Javascript
<script>
function upOutput() {
 var outputForm = document.getElementById('output_form');
 var Value = 0;
 for(var i=0; i<=1; i++) {
  Value += outputForm.elements[i].valueAsNumber;
 }
 outputForm.elements[2].value = Value;
}
</script>

Much like the progress element shown previously in this article the dynamic changes to the output element are achieved used javascript as shown above.

Those were the all new form elements as defined in the HTML5 W3 working draft.

Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus