This is part 8 of HTML Form series. You can read previous parts here. In this part you will learn about input type date and input type number control.
input type= “date”
The <input> element of type “date” generates an input field, which allows a user to input the date in a given format.
The resulting value includes the year, month, and day, but not the time.
The <input type="date"> defines a date picker.
A user can enter the date by text field or by date picker interface.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input type date example</title>
</head>
<body>
<form>
Select Start and End Date: <br><br>
Start date:<input type="date" name="Startdate"><br><br>
End date:<input type="date" name="Enddate">
<input type="submit">
</form>
</body>
</html>
max attributes
The latest date to accept in yyyy-mm-dd format.
min attributes
The earliest date to accept in yyyy-mm-dd format.
If both the max and min attributes are set, this value must be a date string later than or equal to the one in the min attribute.
input type= “number”
The <input> element type number creates input filed which allows a user to enter the numeric value. It includes built-in validation to reject non-numerical entries.
You can also restrict user to enter a minimum and maximum value using min and max attribute.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input type number example</title>
</head>
<body>
<form>
<label>Enter your age: </label>
<input type="number" name="num" min="50" max="80">
<input type="submit">
</form>
</body>
</html>
max attribute
The maximum value to accept for this input.
min attribute
The minimum value to accept for this input.
step attribute
It specifies the legal number intervals. When this is used if you use up or down arrow the value will increase or decrease according to step value. The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.