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 element has long been the workhorse of all HTML forms. Whether you were looking for a name, an address, a date, an email, or any other kind of information that could be typed into a form field, the way to do that was to use .

With the introduction of HTML5 came a slew of new input types, allowing you to be more specific in the kind of information that should be entered into a form field. One of the new input types that HTML5 introduce is the element to capture time information.

Input Time Description

When using the element, the time will be collected with the hour, minutes, seconds, and fractions of seconds. No time zone will be set. Select browsers may actually display a clock or other date control input device to allow users to submit times more easily.

Web Browser Support

At this time, the current versions of Chrome, Safari, and Opera support. All other browsers (IE and Firefox) display a normal text box instead of any date selector. This is actually an important and helpful fallback for the browsers that do not yet support this HTML5 form type. This means that you can use this new input on your web forms to gather better data from the browsers that support this. 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.

The Benefits of New Input Types

While has served us well for many years, there are benefits to using more specific input types, like "time". Devices that understand these new fields can alter their keyboards to allow for easier entry. For instance, the new "number" type for HTML will open a keyboard with only numbers on it, instead of the default keyboard that includes letters that you cannot use.​

In the case of "time", a picker or clock is often shown, which makes it much easier to enter a time for a website form.

Input Time Attributes

Global attributes, event attributes, and the input tag attributes. 

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

 

INPUT Time Usage

Standard time input tag


 

See an example of a standard time input tag.

To use this form field in your Web page, the doctype must be set to the HTML5 doctype, like this:

 

More  Information

Edited by Jeremy Girard