Cheap VPS & Xen Server


Residential Proxy Network - Hourly & Monthly Packages

HTML Meter


HTML <meter> tag is used to measure data within a given range. It defines a scalar measurement with range. It is also known as a gause.

It should be used to display disk usage, voting population etc.

The HTML meter tag is new in HTML5 so you must use new browsers.


Attributes of HTML Meter Tag

HTML <meter> tag supports the global and event attributes as well as some specific attributes.

Attributes Description
value It is a mandatory attribute which is used to specify a value in numbers. The number may be integer or floating point number.
form It specifies one or more forms to which meter element belongs to.
high It specifies a range that is considered as high value.
low It specifies a range that is considered as low value.
max It specifies the maximum value defined in the range.
min It specifies the minimum value defined in the range.
optimum It specifies the optimum value for the gauge.It is an optional attribute.

HTML Meter Tag Example

Let’s see the progress example with min, max and value attributes.

  1. <p>Display a gauge:</p>
  2. <meter value=“30” min=“1” max=“100”>30 out of 100</meter><br>
  3. <meter value=“0.8”>80%</meter>

Output:

Styling Meter

You can apply CSS code on meter tag.

  1. meter{
  2.   width: 300px;
  3.   height: 30px;
  4. }

Test it Now

Output:

Supporting Browsers

Element chrome_browser Chrome ie_browser IE firefox_browser Firefox opera_browser Opera safari_browser Safari
<meter> Yes Yes Yes Yes Yes

 

Comments

comments