<meter>
The meter element shows a value from the range of possible values. The min and max attributes set the bounds for the range.
These can be expressed using floating-point numbers. The display for the meter element can be broken into three segments: too low, too high, and just right.
The low attribute sets the value considered to be too low, and the high attribute sets the value considered to be too high. The optimum attribute specifies the not-too-high-not-too-low value.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<meter id="mymeter" value="90"
min="10" max="100" low="40" high="80" optimum="60"></meter>
<p>
<button type="button" value="30">30</button>
<button type="button" value="60">60</button>
<button type="button" value="90">90</button>
</p>
<script>
var buttons = document.getElementsByTagName('BUTTON');
var meter = document.getElementById('mymeter');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
meter.value = e.target.value;
};
}
</script>
</body>
</html>
Home
HTML CSS Book
HTML reference
HTML CSS Book
HTML reference
Tag:
- <a>
- <acronym>
- <address>
- <area>
- <article>
- <aside> for SideBar
- <audio>
- <b>
- <base>
- <bdi>
- <bdo>
- <blockquote>
- <body>
- <br>
- <button>
- <canvas>
- <caption>
- <cite>
- <code>
- <col>
- <colgroup>
- <dd>
- <del>
- <details> for expandable section
- <dfn>
- <div>
- <dl>
- <!DOCTYPE>
- <dt>
- <em>
- <embed>
- <fieldset>
- <figure> for content with caption
- <footer> for footers
- <form>
- <frame>
- <frameset>
- <head>
- <header> for headers
- <hgroup> for header grouping
- <hN>
- <hr>
- <html>
- <i>
- <iframe>
- <img>
- <input>
- <ins>
- <kbd>
- <keygen>
- <label>
- <legend>
- <li>
- <link>
- <mark> to highlight
- <map>
- <meta>
- <meter>
- <nav> for navigation
- <noscript>
- <object>
- <ol>
- <output>
- <optgroup>
- <option>
- <p>
- <param>
- <pre>
- <progress>
- <q>
- <ruby>, <rt>, and <rp> Elements
- <rt>
- <ruby>
- <samp>
- <script>
- <section> marks sections
- <select>
- <span>
- <strong>
- <style>
- <sub>
- <sup>
- <table>
- <tbody>
- <td>
- <textarea>
- <tfoot>
- <thead>
- <th>
- <time> for date and time
- <title>
- <tr>
- <ul>
- <var>
- <video>
Related: