50 Chapter 3—Intelligent Forms
The rest of our example has nothing to do with new HTML5 techniques, but we
still want to explain it for the sake of completeness. The nested div elements
should also be filled with the percentage value. The idea behind this is simple:
A first div area is defined in HTML with a fixed width (here, 150px). Nested into
this element, another div element is displayed as filled with a green background
color along the width of the calculated percentage value—a simple yet very effec-
tive trick. To round things off, we also want to include the Google Chart API. To
use the online service, you have to specify the chart size (chs, in our case 200×125
pixels), the chart type (cht, here, gom, Google-O-Meter), and the chart data (chd,
here, the percentage value op.value):var google = document.getElementById("google");
google.src =
"http://chart.apis.google.com/chart?chs=200x125&cht=gom&chd=t:"+op.
value;
var gSrc = document.getElementById("googleSrc");
gSrc.innerHTML = google.src;3.3.2 Displaying the Progress of a Task with “progress”
progress works in a similar way as the meter element discussed previously ex-
cept that it represents the completion progress of a task. Such tasks could, for
example, be file uploads by the user or downloads of external libraries required
by an application.
To give you a quick example, we do not really want to upload any files or down-
load a lot of data; it is sufficient to set ourselves a task and fulfill it 100 percent.
Our following example defines ten input elements of the type checkbox, and as
soon as they are all activated, we want the progress bar to show 100 %:<h1>Please activate all the checkboxes</h1>
<form method=get>
<input type=checkbox onchange=updateProgress()>
<input type=checkbox onchange=updateProgress()>
<!-- and 8 more -->
<p>
Progress: <progress value=0 max=10 id=pb></progress>
</form>The progress element is initialized with a value of 0 and a maximum value of 10.
As soon as an input element is activated, it calls the function updateProgress(),
which looks like this:function updateProgress() {
var pb = document.getElementById("pb");
var ip = document.getElementsByTagName("input");