HTML <input> type="time"

The <input> tag with a type="time" attribute creates an input field that accepts a time value.

Inside this field is a clock icon. Clicking this icons opens a time picker.



An <input> element of type time>.
Clicking the clock icon opens a time picker. Alternatively, enter the time directly into the field.

Select time

<form action="/tutorial/action.html">
    <legend>Select time</legend>

    <input type="time" name="time"><br /><br />

    <input type="submit" value="Submit">

Using input type="time"

The <input type="time"> creates an input field for time.

Clicking the clock icon inside the control opens the time picker.

The UI of this control varies from browser to browser. In addition, browser support is spotty.

The time field also accepts manual entry which follows a time format.


<input type="time">

Browser support

Here is when type="time" support started for each browser:

20.0 Jun 2012
57.0 Nov 2017
12.0 Jul 2015
10.1 Jun 2009
Not Supported

You may also like

 Back to <input>

Author: Jack Poorte
Published: Jun 20 2021
Last Reviewed: Sep 30 2023

What's your favorite/least favorite part of Dofactory?