ptg16476052354 LESSON 12: Designing Forms
Displaying Updates with progress and meter
HTML5 adds two new tags to help you display and measure changes on your website:
progress and meter. With these elements, you can indicate changes in time on your web-
site. This is useful for web applications as well as web forms.
The progress tag is used to view the completion progress of a task. It is usually displayed
as a progress bar. It can define either indeterminate progress or a specific amount of progress
including a number from zero to a maximum with a fraction of that amount that has been
completed. At its most basic, a progress bar is just the progress tag with a value set:
<p>Progress task 1:
<progress id="prog1" value="0">0%</progress>
</p>While the value attribute is not required, it’s a good idea to set it explicitly as some
browsers default to 100% progress and some default to 0%. You should also set the max
attribute so that the browser has a measure and include the value of the progress inside
the progress tag so that browsers and screen readers that don’t support the tag can still
get the content. Figure 12.25 shows three progress bars at 0%, 45%, and 98%, written:Input ▼
<p>Progress task 1:
<progress id="prog1" value="0" max="100">0%</progress>
</p>
<p>Progress task 2:
<progress id="prog2" value="45" max="100">45%</progress>
</p>
<p>Progress task 3:
<progress id="prog3" value="98" max="100">98%</progress>
</p>Output ▼
FIGURE 12.25
Three progress
bars.