HTML - max Attribute

The HTML max attribute is used to define the maximum value that is acceptable and valid for an input field.

The entered value must be less than or equal to the max value. If the form input field value is greater than the max attribute value, then it shows some warning while submitting the form.

Syntax

<input max="number|date">

Applies On

Below listed elements allow using of the HTML max attribute

Element	Description
<input>	HTML <input> tag is used accpect various types of input from user.
<progress>	HTML <progress> tag is used to display as an indicator showing the completion progress of a task
<meter>	HTML <meter> tag is used to render data within the given range.

Examples of HTML max Attribute

Below examples will illustrate the HTML low attribute, where and how we should use this attribute!

Set maximum value for number input

In the following example, we are using the max attribute with th input type=number to specify maximum value for number input is 5.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML max attribute</title>
</head>

<body>
   <form> 
      Enter Number: 
      <input type="number" max="5">
      <button>Submit</button>
   </form>
</body>

</html>

Set maximum value for date input

Considering the another scenario, where we are going to use the max attribute with the input type=date to set a maximum allowed vale for date input.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML max attribute</title>
</head>

<body>
   <form> Enter the date before 2021-02-02: 
   <br>
   <input type="date" max="2021-02-02">
      <button>Submit</button>
   </form>
</body>
</html>

Set max value for a progress bar

In the following example we define a progress bar and set it's max value as 100, so that current progress will be displayed in percentage.

<!DOCTYPE html>
<html>
<body>

<h1>The progress Bar</h1>

<label for="file">
   Loading progress:
</label>
<progress id="file" 
          value="32" 
          max="100"> 
</progress>

</body>
</html>

Set max value for meter element

In the following example, we will create a meter element and set a max value as 100 inorder to show percentge progress.

<!DOCTYPE html>
<html lang="en">
<body>
      <h3>HTML low Attribute</h3>
      <label for="server-load">
         Room 1: Server Load
      </label> 
      <meter id="server-load" 
             value="40" 
             min="0" 
             max="100" 
             low="50" 
             high="90" 
             optimum="0.5">
      </meter>
</body>

</html>

Supported Browsers

Attribute
max	Yes 5.0	Yes 10.0	Yes 16.0	Yes 5.1	Yes 10.6

html_attributes_reference.htm

Print Page