HTML max Attribute

HTML max Attribute: This attribute defines the maximum value of an element. When this attribute is used by the <progress> element it specifies how much work the task requires in total.

HTML max Attribute

This attribute can be applied on <input>,<meter>,<progress> elements.

Attribute Values

It contains the value i.e number which specifies the maximum value of the gauge.

Syntax: <meter max=”number”>

Supported Browsers

Element	Chrome	Internet Explorer	Firefox	Safari	Opera
input	5.0	10.0	16.0	5.1	10.6
meter	8.0	Not supported	6.0	6.0	11.0
progress	8.0	10.0	16.0	6.0	11.0

Example: for using <input> element

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
  Enter a date before 1972-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2013-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5"><br>
  <input type="submit">
</form>
</body>
</html>

Output:

HTML max attribute

Example: for using <meter> element

<!DOCTYPE html>
<html>
<body>
<p>Displaying  gauge</p>
<p>A score: <meter min="0" low="40" high="90" max="100" value="95"></meter></p>
<p>P score: <meter min="0" low="40" high="90" max="100" value="65"></meter></p>
<p>L's score: <meter min="0" low="40" high="90" max="100" value="35"></meter></p>
</body>
</html>

Output:

HTML max attribute meter element

Example: for using <progress> element

<!DOCTYPE html>
<html>
<body>
Downloading....
<progress value="22" max="100">
</progress>
</body>
</html>

Output:

HTML progress element