All About <input type="time">

The HTML5 Input Type for "time"

input type=time in Opera
input type=time in Opera. Screen shot by J Kyrnin

The time input type lets a user enter a time. The hour and minute are both collected, as well as whether it's a.m. or p.m. There isn't a time zone selection.

Select browsers may actually display a clock or other date control input device to allow users to submit the time more easily.

How to Use the "time" Input Type

This is what the HTML code looks like for entering time:


 

You can also see what it looks like on a live web page over at JSFiddle.

It can be wrapped in a form like this, and text can be added for instructions:


 

  Enter a time:  

To preset a time and not allow the user to change it, do this, changing the last value to whatever time you want to be inserted into the fields:

 

Similar Input Types

This command lets a month, day, and year be chosen instead of a time:


 

Use this command to combine the date input type with the time from above:


 

You can see examples of both of these at JSFiddle.

Web Browser Support

Support for is scattered across every web browser including Chrome, Safari, Opera, Firefox, and Internet Explorer. Some show a regular text box where you have to type the time and toggle between a.m. and p.m. Others might include a date selector or won't show anything at all.

This is actually an important and helpful fallback for the browsers that do not yet support this HTML5 form type. You can use this new input on your web forms to gather better data from the browsers that support it.

Browsers that do not support this input type will simply default to what is essentially the standard field, which is what you would've used in the absence of the new time field anyway. 

If the data gathered in this field needs to conform to a certain date standard, you can use this input type and validate that the contents are a time with a script or CGI, which will also cover your bases for those older browsers and the way they fall back to a text input type.

Input Time Attributes

The following can be used with the time input type:

  • autocomplete
  • list
  • max
  • min
  • readonly
  • required
  • step
  • valueAsNumber
  • selectedOption
  • stepDown()
  • stepUp()