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 <input type="text"> 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 <input type="text">.

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 <input type="time"> element to capture time information.

Input Time Description

When using the <input type="time"> element, the time will be collected with the hour, minutes, seconds, and fractions of seconds. No timezone 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<input type="time">. 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 <input type="text"> 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 <input type="text"> 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 number on it, instead 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

<form>
<input type="time" value="12:01:00;">
</form>

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:

 <!doctype html>

More  Information

Edited by Jeremy Girard