Java Reference
In-Depth Information
These six attributes map to properties of the same names. If a browser doesn't support the
<meter/>
element, the text between the opening and closing tag is displayed in the browser.
Note
IE9, IE10, and IE11 do not support the
<meter/>
element.
The
<progress/>
element represents the completion progress of a task, and as with the preceding
new elements, it consists of an opening and closing tag:
<progress max="100" value="40">40% done with what you're doing</progress>
It also has a
max
attribute that maps to the element object's
max
property, and the control's value
is contained within the value attribute/property. Like
<meter/>
, the text between the opening and
closing tags is displayed if the browser doesn't support the
<progress/>
element.
The <meter/> and <progress/> elements
trY it out
Let's use the
<meter/>
and
<progress/>
elements in an example. Open your text editor and type the
following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 11: Example 12</title>
</head>
<body>
<h2>Highway Speed Tracker</h2>
<form id="form1" name="form1">
<p>
<label for="driverName">Driver Name: </label>
<input type="text" id="driverName" name="driverName" />
</p>
<p>
<label for="speed">Speed (Miles/Hour): </label>
<input type="number" id="speed" name="speed" />
<meter id="speedMeter" value="0" low="55" optimum="75"
high="90" max="120"></meter>
</p>
<p>
<label for="vehicle">Vehicle Type: </label>
<input type="text" id="vehicle" name="vehicle" />
</p>
</form>
<p>
Form Completion Progress:
<progress id="completionProgress" max="3" value="0"></progress>
</p>
<script>
var myForm = document.form1;
