HTML input Tag min Attribute Tutorial

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.

Leave a Reply