Horje
What is HTML <meter> Tag

The <meter> HTML element represents either a scalar value within a known range or a fractional value.

Use the meter element to display a scalar value within a given range (a gauge):

Definition and Usage

The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.

Examples: Disk usage, the relevance of a query result, etc.

Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.

Tip: Always add the <label> tag for best accessibility practices!

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Attributes

Attribute Value Description
form form_id Specifies which form the <meter> element belongs to
high number Specifies the range that is considered to be a high value
low number Specifies the range that is considered to be a low value
max number Specifies the maximum value of the range
min number Specifies the minimum value of the range. Default value is 0
optimum number Specifies what value is the optimal value for the gauge
value number Required. Specifies the current value of the gauge

Global Attributes

The <meter> tag also supports the Global Attributes in HTML.


Event Attributes

The <meter> tag also supports the Event Attributes in HTML.


How to create HTML <meter> Tag

Use the meter element to display a scalar value within a given range (a gauge):

index.html
Example: HTML
 <label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>

<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter> 

Output should be:

How to create HTML <meter> Tag

What is HTML <meter> form Attribute

Definition and Usage

The form attribute specifies the form the <meter> tag belongs to.

The value of this attribute must be equal to the id attribute of a <meter> element in the same document. 


Browser Support

Syntax

<meter form="form_id">

Attribute Values

Value Description
form_id Specifies the form element the <meter> element belongs to. The value of this attribute must be the id attribute of a <form> element in the same document.

How to create HTML <meter> form Attribute

A <meter> element located outside a form (but still a part of the form):

index.html
Example: HTML
 <form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

<p><label for="anna">Anna's score:</label>
<meter id="anna" form="form1" name="anna" min="0" low="40" high="90" max="100" value="95"></meter></p> 

Output should be:

How to create HTML <meter> form Attribute

What is HTML <meter> high Attribute

Definition and Usage

The high attribute specifies the range where the gauge's value is considered to be a high value.

The high attribute value must be less than the max attribute value, and it also must be greater than the low and min attribute values.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<meter high="number">

Attribute Values

Value Description
number Specifies a floating point number that is considered to be a high value

How to create HTML <meter> high Attribute

A gauge with a current value and min, max, high, and low segments:

index.html
Example: HTML
 <p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>

<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>

<p><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p> 

Output should be:

How to create HTML <meter> high Attribute

What is HTML <meter> low Attribute

Definition and Usage

The low attribute specifies the range where the gauge's value is considered to be a low value.

The low attribute value must be greater than the min attribute value, and it also must be less than the high and max attribute values.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<meter low="number">

Attribute Values

Value Description
number Specifies a floating point number that is considered to be a low value

How to create HTML <meter> low Attribute

A gauge with a current value and min, max, high, and low segments:

index.html
Example: HTML
<p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>

<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>

<p><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p>

Output should be:

How to create HTML <meter> low Attribute

What is HTML <meter> max Attribute

Definition and Usage

The max attribute specifies the upper bound of the gauge.

The max attribute value must be greater than the min attribute value.

If unspecified, the default value is 1.

Tip: The max attribute, together with the min attribute, specifies the full range of the gauge.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<meter max="number">

Attribute Values

Value Description
number Specifies a floating point number that is the maximum value of the gauge. Default value is "1"

How to create HTML <meter> max Attribute

A gauge with a current value and min, max, high, and low segments:

index.html
Example: HTML
 <p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>

<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>

<p><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p> 

Output should be:

How to create HTML <meter> max Attribute

What is HTML <meter> min Attribute

Definition and Usage

The min attribute specifies the lower bound of the gauge.

The min attribute value must be less than the max attribute value.

If unspecified, the default value is 0.

Tip: The min attribute, together with the max attribute, specifies the full range of the gauge.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<meter min="number">

Attribute Values

Value Description
number Specifies a floating point number that is the minimum value of the gauge. Default value is 0

How to create HTML <meter> min Attribute

A gauge with a current value and min, max, high, and low segments:

index.html
Example: HTML
 <p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>

<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>

<p><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p> 

Output should be:

How to create HTML <meter> min Attribute

What is HTML <meter> optimum Attribute

Definition and Usage

The optimum attribute specifies the range where the gauge's value is considered to be an optimal value.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<meter optimum="number">

Attribute Values

Value Description
number Specifies a floating point number that is the optimal value of the gauge

How to create HTML <meter> optimum Attribute

A gauge with an optimal value of 0.5:

index.html
Example: HTML
 <p><label for="yinyang">Yin Yang:</label>
<meter id="yinyang" value="0.3" high="0.9" low="0.1" optimum="0.5"></meter></p> 

Output should be:

How to create HTML <meter> optimum Attribute

What is HTML <meter> value Attribute

Definition and Usage

The required value attribute specifies the current, or "measured", value of the gauge.

The value attribute must be between the min and max attribute values.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<meter value="number">

Attribute Values

Value Description
number Required. Specifies a floating point number that is the current value of the gauge

How to create HTML <meter> value Attribute

A gauge with a current value and min, max, high, and low segments:

index.html
Example: HTML
 <p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>

<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>

<p><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p> 

Output should be:

How to create HTML <meter> value Attribute




html tag

Related Articles
What is HTML <!--...--> Tag HTML Tag
What is HTML <!DOCTYPE> Declaration HTML Tag
What is HTML Elements and Doctypes HTML Tag
What is HTML <a> Tag HTML Tag
What is HTML <abbr> Tag HTML Tag
What is HTML <acronym> Tag HTML Tag
What is HTML <address> Tag HTML Tag
What is HTML <applet> Tag HTML Tag
What is HTML <area> Tag HTML Tag
What is HTML <article> Tag HTML Tag
What is HTML <aside> Tag HTML Tag
What is HTML <audio> Tag HTML Tag
What is HTML <b> Tag HTML Tag
What is HTML <base> Tag HTML Tag
What is HTML <basefont> Tag HTML Tag
What is HTML <bdi> Tag HTML Tag
What is HTML <bdo> Tag HTML Tag
What is HTML <big> Tag HTML Tag
What is HTML <blockquote> Tag HTML Tag
What is HTML <body> Tag HTML Tag
What is HTML <br> Tag HTML Tag
What is HTML <button> Tag HTML Tag
What is HTML <canvas> Tag HTML Tag
What is HTML <caption> Tag HTML Tag
What is HTML <center> Tag HTML Tag
What is HTML <cite> Tag HTML Tag
What is HTML <code> Tag HTML Tag
What is HTML <col> Tag HTML Tag
How to create HTML <colgroup> Tag HTML Tag
What is HTML <data> Tag HTML Tag
What is HTML <datalist> Tag HTML Tag
What is HTML <dd> Tag HTML Tag
What is HTML <del> Tag HTML Tag
What is HTML <details> Tag HTML Tag
What is HTML <dfn> Tag HTML Tag
What is HTML <dialog> Tag HTML Tag
What is HTML <dir> Tag HTML Tag
What is HTML <div> Tag HTML Tag
What is HTML <dl> Tag HTML Tag
What is HTML <dt> Tag HTML Tag
What is HTML <em> Tag HTML Tag
What is HTML <embed> Tag HTML Tag
What is HTML <fieldset> Tag HTML Tag
What is HTML <figcaption> Tag HTML Tag
What is HTML <figure> Tag HTML Tag
What is HTML <font> Tag HTML Tag
What is HTML <footer> Tag HTML Tag
What is HTML <form> Tag HTML Tag
What is HTML <frame> Tag HTML Tag
What is HTML <frameset> Tag HTML Tag
What is HTML <h1> to <h6> Tags HTML Tag
What is HTML <head> Tag HTML Tag
What is HTML <header> Tag HTML Tag
What is HTML <hgroup> Tag HTML Tag
What is HTML <hr> Tag HTML Tag
What is HTML <html> Tag HTML Tag
What is HTML <i> Tag HTML Tag
What is HTML <iframe> Tag HTML Tag
What is HTML <img> Tag HTML Tag
What is HTML <input> Tag HTML Tag
What is HTML <ins> Tag HTML Tag
What is HTML <kbd> Tag HTML Tag
What is HTML <label> Tag HTML Tag
What is HTML <legend> Tag HTML Tag
What is HTML <li> Tag HTML Tag
What is HTML <link> Tag HTML Tag
What is HTML <main> Tag HTML Tag
What is HTML <map> Tag HTML Tag
What is HTML <mark> Tag HTML Tag
What is HTML <menu> Tag HTML Tag
What is HTML <meta> Tag HTML Tag
What is HTML <meter> Tag HTML Tag
What is HTML <nav> Tag HTML Tag
What is HTML <noframes> Tag HTML Tag
What is HTML <noscript> Tag HTML Tag
What is HTML <object> Tag HTML Tag
What is HTML <ol> Tag HTML Tag
What is HTML <optgroup> Tag HTML Tag
What is HTML <option> Tag HTML Tag
What is HTML <output> Tag HTML Tag
What is HTML <p> Tag HTML Tag
What is HTML <param> Tag HTML Tag
What is HTML <picture> Tag HTML Tag
What is HTML <pre> Tag HTML Tag
What is HTML <progress> Tag HTML Tag
What is HTML <q> Tag HTML Tag
What is HTML <rp> Tag HTML Tag
What is HTML <rt> Tag HTML Tag
What is HTML <ruby> Tag HTML Tag
What is HTML <s> Tag HTML Tag
What is HTML <samp> Tag HTML Tag
What is HTML <script> Tag HTML Tag
What is HTML <search> Tag HTML Tag
What is HTML <section> Tag HTML Tag
What is HTML <select> Tag HTML Tag
What is HTML <small> Tag HTML Tag
What is HTML <source> Tag HTML Tag
What is HTML <span> Tag HTML Tag
What is HTML <strike> Tag HTML Tag
What is HTML <strong> Tag HTML Tag
What is HTML <style> Tag HTML Tag
What is HTML <sub> Tag HTML Tag
What is HTML <summary> Tag HTML Tag
What is HTML <sup> Tag HTML Tag
What is HTML <svg> Tag HTML Tag
What is HTML <table> Tag HTML Tag
What is HTML <tbody> Tag HTML Tag
What is HTML <td> Tag HTML Tag
What is HTML <template> Tag HTML Tag
What is HTML <textarea> Tag HTML Tag
What is HTML <tfoot> Tag HTML Tag
What is HTML <th> Tag HTML Tag
What is HTML <thead> Tag HTML Tag
What is HTML <time> Tag HTML Tag
What is HTML <title> Tag HTML Tag
What is HTML <tr> Tag HTML Tag
What is HTML <track> Tag HTML Tag
What is HTML <tt> Tag HTML Tag
What is HTML <u> Tag HTML Tag
What is HTML <ul> Tag HTML Tag
What is HTML <var> Tag HTML Tag
What is HTML <video> Tag HTML Tag
How to add HTML <wbr> Tag HTML Tag

Single Articles
How to create HTML <meter> TagHTML Tag
What is HTML <meter> form AttributeHTML Tag
How to create HTML <meter> form AttributeHTML Tag
What is HTML <meter> high AttributeHTML Tag
How to create HTML <meter> high AttributeHTML Tag
What is HTML <meter> low AttributeHTML Tag
How to create HTML <meter> low AttributeHTML Tag
What is HTML <meter> max AttributeHTML Tag
How to create HTML <meter> max AttributeHTML Tag
What is HTML <meter> min AttributeHTML Tag
How to create HTML <meter> min AttributeHTML Tag
What is HTML <meter> optimum AttributeHTML Tag
How to create HTML <meter> optimum AttributeHTML Tag
What is HTML <meter> value AttributeHTML Tag
How to create HTML <meter> value AttributeHTML Tag

Read Full:
HTML Tag
Type:
Develop
Category:
Web Tutorial
Sub Category:
HTML Tag
Uploaded by:
Admin
Views:
127


Reffered: https://www.w3schools.com/tags/tag_meter.asp