Ranges and the meter Element in HTML 5

Mastering HTML5 - Part 13

Forward: In this part of the series we shall talk about number ranges and the meter element in HTML 5.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 13 of my series, Mastering HTML5. I assume you have read the previous parts of the series before reaching here. In this part of the series we shall talk about number ranges and the meter element in HTML 5.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

The number State for an Input Control
An input control can have the number state; that is, an input control can have "number" as the value of the type attribute. In this case the input value has to be a number. The number can be an integer or a number with a decimal point. If something else is typed inside the control field that is not a number, the browser should issue an error message. However, not all browsers are able to distinguish between a number and a string (text) yet.

The min and max Attributes
You can indicate to the browser the possible minimum and/or maximum number that should go into the number control field. Consider the following code:

<input type="number" min="20" max="60">

For this input field, the number can be from 20 to 60. You can still use the default attribute to type the default value you want for the control. The default value should be between 20 and 60.

The step Attribute
When an input number control has the min and max attributes, the user can type any number within the range. It is possible to provide a kind of ladder for the range, so that allowed values should be in steps. Consider the following tag:

<input type="number" min="20" step="5" max="60">

For this tag the number typed in the control field can be from 20 to 60 in steps of 5. So the number typed in can be, 20 or 25 or 30 or 35 or 40 or 45 or 50 or 55 or 60.

The range State
The value of the type attribute for the input element can be “range”. This indicates that the user can type a number into the control field that is in a range. The following tag illustrates this:

    <input type="range" min="20" max="60">

Here the minimum number for the range is 20 and the maximum number is 60. The user effects of this tag can still be achieved with the following:

    <input type="number" min="20" max="60">

where the value of the type attribute is number. When you really want a range, with minimum and maximum, use the range value (state). With the range value (state), the browser accesses the number in the control’s field easier and faster than with the number value (state). You the user may not notice this, but that is what goes on. Also with the number value (state), neither the min nor the max attribute is obligatory.  However, with the range value (state), the min and max attributes are obligatory; if you do not type the min attribute and a value for it, the browser gives you zero for the min value. If you do not type the max attribute and a value for it, the browser gives you 100 for the max value.

You can also use the range state with the step attribute, as in:

    <input type="range" min="20" step="5" max="60">

The meter Element
The meter element is also known as a gauge. This element is like the meter indicator in your car or a meter that technicians and engineers use, or some other indicator. Consider the following tag.

    <input type="range" min="20" max="60" value="50">

This tag is for input that the user will type into the control field. When this tag is displayed, the user sees 50 in the field and he can change it. This is like a meter, but it is for input. All practical meters have a minimum value and a maximum value and a particular reading (value) under a test condition; imagine the speed indicator in your car. A meter element displays output to the user, and the user cannot change the value indicated (like 50 in the above tag).

You can also use the meter element for the result of survey or statistics. You can also use the meter element to show hard disk space usage. The browser displays the meter in the manner (shape) that it chooses. The meter element is a double tag element. Not all browsers may support the meter element. So, in between the tags of the meter, you should type something to indicate the reading in case the user’s browser does not support the meter element. Here is an example:

<meter min="20" max="60" value="50">50 within 20 and 60</meter>

Try the following code:

<!DOCTYPE HTML>
<html>
<head>
<title>Meter Illustration</title>
</head>
<body>
<meter min="20" max="60" value="50">50 within 20 and 60</meter>
</body>
</html>

Note the way the meter element has been typed in the above code.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Ranges and the meter Element in HTML 5

Mastering HTML5 - Part 13

Introduction

Related Links

Comments