HTML5: How to specify the maximum value for an input element?

Last update on February 09 2024 12:52:45 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration specifying the document type -->
<html><!-- Opening tag for the root element of the HTML document -->
<head><!-- Opening tag for the document's header section -->
<meta charset="utf-8"><!-- Metadata tag specifying the character encoding of the document -->
<title>How to specify the maximum value for an input element</title><!-- Title of the HTML document -->
</head><!-- Closing tag for the document's header section -->
<body><!-- Opening tag for the document's body section -->
<form method="post" action="https://www.w3resource.com/html-css-exercise/basic/solution/input-max-answer-demo.php"><!-- Form element defining a form with method and action attributes -->
  Enter a date before 1985-01-01:
<input type="date" name="day_before" max="1984-12-31"><br><!-- Input field for entering a date before a specified maximum value -->
  Enter a date after 2010-01-01:
<input type="date" name="day_after" min="2010-01-02"><br><!-- Input field for entering a date after a specified minimum value -->
  Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br><!-- Input field for entering a number within a specified range -->
<input type="submit"><!-- Submit button for the form -->
</form><!-- Closing tag for the form -->
</body><!-- Closing tag for the document's body section -->
</html><!-- Closing tag for the root element of the HTML document -->

Explanation:

This HTML code demonstrates how to specify the maximum and minimum values for different types of input elements.
Three input fields are provided: one for entering a date before a specific maximum date, another for entering a date after a specific minimum date, and the third for entering a number within a specified range.

Live Demo :

See the Pen input-max-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page