How to use min and max attributes in HTML?

HTML Web Development Front End Technology

The min and max properties in HTML are used to specify the <input> element's acceptable range of values. The max attribute sets the <input> element's maximum value, whereas the min attribute sets the <input> element's minimum value.

For input restriction, the min and max attributes are used with the number and date input types.

Syntax

Following is the syntax to use min and max attributes

<input type="number" min="min_value" max="max_value">

Let’s dive into the following examples to get a clear idea of how to use min and max attributes in HTML.

Using min &max Attribute

The min and max attribute in HTML is used to set the range of values for the <input> elements. The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute. The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute.

Example

In the following example we are using min and max attribute to set minimum and maximum values for a input.


<!DOCTYPE html>
<html>
<body>
   <form>
      <label for="min">Date Of Birth:</label>
      <input id="min" name="min" type="date" min="1995-12-31"><br><br>
      <label for="max">Age:</label>
      <input type="number" id="max" name="max" max="50">
      <input type="submit" value="Submit">
   </form>
</body>
</html>

On executing the above script, it will generate the output consisting of input fields for date of birth and age where the date of birth is set to a min value and the age is set to a max value, along with a submit button.

Using <form> action Attribute

The <form> action attribute in HTML is used to specify the URL of the file to process the input control when we submit the form.

Example

In the following example we are using min and max attribute along with <form> action and get method.


<!DOCTYPE html>
<html>
<body>
   <form action = "tutorialspoint/.com" method = "get">
      Select number between 1-50:
      <input type = "number" name="num" min = "1" max = "50"><br>
      <input type = "submit" value = "Submit">
   </form>
</body>
</html>