In this section, we will learn what the min attribute is and how to use it.
What is min Attribute in HTML <input> Tag?
<input> elements of type: number, range, date, datetime-local, month, time and week, take values within a range!
For example, by default, the range of an <input> element of type range is between 0 to 100. This means the minimum value that we can set for a range field is 0!
But with the help of the min attribute, we can change this minimum value to whatever value we want.
For example, if there’s an <input> field of type date and we want to change the minimum to a year like 2000 which means the minimum year users can select is 2000, we can use the min attribute and set its value to “2000-01-01”.
HTML min Attribute in <input> Tag Syntax:
<input type = “type” min = “value”>
<input> Tag min Attribute Values
Depending on the type of the <input> element, these are the possible values for this attribute:
Input Type |
Value |
number |
Any positive or negative number. |
range |
Any positive or negative number. |
date |
Any date with the following format (all in number): year-month-day |
datetime-local |
Any date with time that matches the following format (all in number): year-month-dayTHour:Minute Example: 2000-01-01T18:00 |
month |
Any date with the following format: year-month Example: 2020:01 |
time |
Any time with the following format: hour:minute Example: 21:00 |
week |
Any week with the following format: year-Wnumber Example: 2020-W18 which means the year 2020 and the week 18. |
Example: using min attribute in HTML <input> tag
See the Pen using min attribute in HTML <input> tag by Omid Dehghan (@odehghan) on CodePen.
In this example, the input field is of type date and the minimum year for this field is set to 2018. This means users can’t pick a year below 2018.