path: root/files/zh-cn/web/html/element/input/time/index.html

---
title: <input type="time">
slug: Web/HTML/Element/Input/time
tags:
  - HTML
  - HTML 表单
  - INPUT 元素
  - Input
  - Time
  - 元素
  - 表单
translation_of: Web/HTML/Element/input/time
---
<div>{{HTMLRef("Input_types")}}</div>

<p><span class="seoSummary">类型为 time 的输入元素{{htmlelement("input")}} ，旨在让用户轻松输入时间（小时和分钟，以及可选的秒）。</span></p>

<p>控件的用户界面因浏览器而异。在现代浏览器中，支持是很好的，因为 Safari 是唯一尚未实现的主要浏览器；在 Safari 和任何其他不支持<code>&lt;time&gt;</code>的浏览器中，它会优雅地降级为<code>&lt;input type=“text”&gt;</code>。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}</div>

<p class="hidden">这个交互式示例的源代码存储在 GitHub 存储库中。如果您想对交互式示例项目作出贡献，请克隆 https://github.com/mdn/interactive-examples 并向我们发送请求。</p>

<h2 id="Appearance">Appearance</h2>

<h3 id="Chrome_and_Opera">Chrome and Opera</h3>

<p>在 chrome/opera 中，选择时间很简单，根据操作系统区域设置，插槽以 12 或 24 小时格式输入小时和分钟，上下箭头用于递增和递减当前选定的组件。在某些版本中，会提供一个 “x” 按钮来清除控件的值。</p>

<p><img alt="12-hour Chrome time input" src="https://mdn.mozillademos.org/files/16417/chrome_time.PNG" style="height: 30px; width: 93px;"> 12-hour</p>

<p><img alt="24-hour Chrome time input" src="https://mdn.mozillademos.org/files/15399/chrome-time.png" style="height: 30px; width: 79px;"> 24-hour</p>

<h3 id="Firefox">Firefox</h3>

<p>火狐的时间选择和 Chrome 非常相似，只是它没有上下箭头。它还使用 12 或 24 小时格式输入时间，基于系统区域设置。提供 “X” 按钮以清除控件的值。</p>

<p><img alt="12-hour Firefox time input" src="https://mdn.mozillademos.org/files/15403/firefox-time.png" style="height: 29px; width: 106px;"> 12-hour</p>

<p><img alt="24-hour Firefox time input" src="https://mdn.mozillademos.org/files/16461/firefox-time-24.png" style="height: 29px; width: 80px;"> 24-hour</p>

<h3 id="Edge">Edge</h3>

<p>Edgede 时间选择有点复杂，打开一个小时和分钟的滚动区域。它和 chrome 一样，使用 12 或 24 小时格式输入时间，基于系统区域设置：</p>

<p><img alt="12-hour Edge time input" src="https://mdn.mozillademos.org/files/16418/edge_time.PNG" style="display: block; height: 290px; width: 188px;"> 12-hour</p>

<p><img alt="24-hour Edge time input" src="https://mdn.mozillademos.org/files/15401/edge-time.png" style="display: block; height: 290px; width: 129px;"> 24-hour</p>

<table class="properties">
 <tbody>
  <tr>
   <td><strong><a href="#value">Value</a></strong></td>
   <td>A {{domxref("DOMString")}} representing a time, or empty.</td>
  </tr>
  <tr>
   <td><strong>Events</strong></td>
   <td>{{event("change")}} and {{event("input")}}</td>
  </tr>
  <tr>
   <td><strong>Supported common attributes</strong></td>
   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("step", "input")}}</td>
  </tr>
  <tr>
   <td><strong>IDL attributes</strong></td>
   <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, and <code>list</code>.</td>
  </tr>
  <tr>
   <td><strong>Methods</strong></td>
   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, and {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td>
  </tr>
 </tbody>
</table>

<h2 id="Value">Value</h2>

<div id="value-sample1">
<p>A {{domxref("DOMString")}} containing the value of the time entered into the input. You can set a default value for the input by including a valid time in the {{htmlattrxref("value", "input")}} attribute when creating the <code>&lt;input&gt;</code> element, like so:</p>

<pre class="brush: html notranslate">&lt;label for="appt-time"&gt;Choose an appointment time: &lt;/label&gt;
&lt;input id="appt-time" type="time" name="appt-time" value="13:30"&gt;</pre>
</div>

<p>{{ EmbedLiveSample('value-sample1', 600, 60) }}</p>

<p>You can also get and set the date value in JavaScript using the {{domxref("HTMLInputElement.value")}} property, for example:</p>

<pre class="brush: js notranslate">var timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';</pre>

<h3 id="Time_value_format">Time value format</h3>

<p>The <code>value</code> of the <code>time</code> input is always in 24-hour format: <code>hh:mm</code>, regardless of the input format, which is likely to be selected based on the user's locale (or by the user agent). If the time includes seconds (see <a href="#using_the_step_attribute">Using the step attribute</a>), the format is always <code>hh:mm:ss</code>. You can learn more about the format of the time value used by this input type in {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Time strings")}}.</p>

<p>在此示例中，您可以通过输入时间并查看之后如何更改来查看时间输入的值。</p>

<p>首先，看一下 HTML。这很简单，带有我们之前看到的标签和输入，但添加了额外的元素<code>p</code>和<code>span</code>用来显示时间值</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;label for="startTime"&gt;Start time: &lt;/label&gt;
  &lt;input type="time" id="startTime"&gt;
  &lt;p&gt;
    Value of the &lt;code&gt;time&lt;/code&gt; input: &lt;code&gt;
            "&lt;span id="value"&gt;n/a&lt;/span&gt;"&lt;/code&gt;.
  &lt;/p&gt;
&lt;/form&gt;</pre>

<p>The JavaScript code adds code to the time input to watch for the {{event("input")}} event, which is triggered every time the contents of an input element change. When this happens, the contents of the <code>&lt;span&gt;</code> are replaced with the new value of the input element.</p>

<pre class="brush: js notranslate">var startTime = document.getElementById("startTime");
var valueSpan = document.getElementById("value");

startTime.addEventListener("input", function() {
  valueSpan.innerText = startTime.value;
}, false);</pre>

<p>{{EmbedLiveSample("Time_value_format", 600, 80)}}</p>

<p>When a form including a <code>time</code> input is submitted, the value is encoded before being included in the form's data. The form's data entry for a time input will always be in the form <code>name=hh%3Amm</code>, or <code>name=hh%3Amm%3ass</code> if seconds are included (see <a href="#using_the_step_attribute">Using the step attribute</a>).</p>

<h2 id="Additional_attributes">Additional attributes</h2>

<p>In addition to the attributes common to all {{HTMLElement("input")}} elements, <code>time</code> inputs offer the following attributes:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Attribute</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code><a href="#max">max</a></code></td>
   <td>The latest time to accept, in the syntax described under <a href="#time_value_format">Time value format</a></td>
  </tr>
  <tr>
   <td><code><a href="#min">min</a></code></td>
   <td>The earliest time to accept as a valid input</td>
  </tr>
  <tr>
   <td><code><a href="#readonly">readonly</a></code></td>
   <td>A Boolean attribute which, if present, indicates that the contents of the <code>time</code> input should not be user-editable</td>
  </tr>
  <tr>
   <td><code><a href="#step">step</a></code></td>
   <td>The stepping interval to use both for user interfaces purposes and during constraint validation</td>
  </tr>
 </tbody>
</table>

<div class="callout-box">Unlike many data types, time values have a <strong>periodic domain</strong>, meaning that the values reach the highest possible value, then wrap back around to the beginning again. For example, specifying a <code>min</code> of <code>14:00</code> and a <code>max</code> of <code>2:00</code> means that the permitted time values start at 2:00 PM, run through midnight to the next day, ending at 2:00 AM.</div>

<h3 id="max">max</h3>

<p>A string indicating the latest time to accept, specified in the same <a href="#time_value_format">time value format</a> as described above. If the specified string isn't a valid time, no maximum value is set.</p>

<h3 id="min">min</h3>

<p>A string specifying the earliest time to accept, given in the <a href="#time_value_format">time value format</a> described previously. If the value specified isn't a valid time string, no minimum value is set.</p>

<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>

<h3 id="step">step</h3>

<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p>

<p>For <code>time</code> inputs, the value of <code>step</code> is given in seconds, with a scaling factor of 1000 (since the underlying numeric value is in milliseconds). The default value of <code>step</code> is 60, indicating 60 seconds (or 1 minute, or 60,000 milliseconds).</p>

<p><em>At this time, it's unclear what a value of <code>any</code> means for <code>step</code> when used with <code>time</code> inputs. This will be updated as soon as that information is determined.</em></p>

<h2 id="Using_time_inputs">Using time inputs</h2>

<p>虽然 data 和 time 输入类型中的时间具有最广泛的浏览器支持，但它尚未接近普及，因此您可能需要提供一种替代方法来输入日期和时间，以便 Safari 用户（和用户）其他非支持浏览器）仍然可以轻松输入时间值。</p>

<p>We'll look at basic and more complex uses of <code>&lt;input type="time"&gt;</code>, then offer advice on mitigating the browser support issue later on (see <a href="#handling_browser_support">Handling browser support</a>).</p>

<h3 id="Basic_uses_of_time">Basic uses of time</h3>

<p>The simplest use of <code>&lt;input type="time"&gt;</code> involves a basic <code>&lt;input&gt;</code> and {{htmlelement("label")}} element combination, as seen below:</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;label for="appt-time"&gt;Choose an appointment time: &lt;/label&gt;
  &lt;input id="appt-time" type="time" name="appt-time"&gt;
&lt;/form&gt;</pre>

<p>{{EmbedLiveSample('Basic_uses_of_time', 600, 40)}}</p>

<h3 id="Controlling_input_size">Controlling input size</h3>

<p><code>&lt;input type="time"&gt;</code> doesn't support form sizing attributes such as {{htmlattrxref("size", "input")}}, since times are always about the same number of characters long. You'll have to resort to <a href="/en-US/docs/Web/CSS">CSS</a> for sizing needs.</p>

<h3 id="Using_the_step_attribute">Using the step attribute</h3>

<p>You can use the {{htmlattrxref("step", "input")}} attribute to vary the amount of time jumped whenever the time is incremented or decremented (for example, so the time moves by 10 minutes at a time when clicking the little arrow widgets).</p>

<div class="note">
<p>This property has some strange effects across browsers, so is not completely reliable.</p>
</div>

<p>It takes an integer value that equates to the number of seconds you want to increment by; the default value is 60 seconds, or one minute. If you specify a value of less than 60 seconds (1 minute), the <code>time</code> input will show a seconds input area alongside the hours and minutes:</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;label for="appt-time"&gt;Choose an appointment time: &lt;/label&gt;
  &lt;input id="appt-time" type="time" name="appt-time" step="2"&gt;
&lt;/form&gt;</pre>

<p>{{EmbedLiveSample('Using_the_step_attribute', 600, 40)}}</p>

<p>In Chrome and Opera, which are the only browsers to show up/down iteration arrows, clicking the arrows changes the seconds value by two seconds, but doesn't affect the hours or minutes. Minutes (or hours) can only be used for stepping when you specify a number of minutes (or hours) in seconds, such as 120 for 2 minutes, or 7200 for 2 hours).</p>

<p>In Firefox, there are no arrows, so the <code>step</code> value isn't used. However, providing it <em>does</em> add the seconds input area adjacent to the minutes section.</p>

<p>The steps value seems to have no effect in Edge.</p>

<div class="note">
<p>Using <code>step</code> seems to cause validation to not work properly (as seen in the next section).</p>
</div>

<h2 id="Validation">Validation</h2>

<p>By default, <code>&lt;input type="time"&gt;</code> does not apply any validation to entered values, other than the user agent's interface generally not allowing you to enter anything other than a time value. This is helpful (assuming the <code>time</code> input is fully supported by the user agent), but you can't entirely rely on the value to be a proper time string, since it might be an empty string (<code>""</code>), which is allowed. It's also possible for the value to look roughly like a valid time but not be correct, such as <code>25:05</code>.</p>

<h3 id="Setting_maximum_and_minimum_times">Setting maximum and minimum times</h3>

<p>You can use the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes to restrict the valid times that can be chosen by the user. In the following example we are setting a minimum time of <code>12:00</code> and a maximum time of <code>18:00</code>:</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;label for="appt-time"&gt;Choose an appointment time (opening hours 12:00 to 18:00): &lt;/label&gt;
  &lt;input id="appt-time" type="time" name="appt-time"
         min="12:00" max="18:00"&gt;
  &lt;span class="validity"&gt;&lt;/span&gt;
&lt;/form&gt;</pre>

<p>{{ EmbedLiveSample('Setting_maximum_and_minimum_times', 600, 40) }}</p>

<p>Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.</p>

<pre class="brush: css notranslate">div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}</pre>

<p>The result here is that:</p>

<ul>
 <li>Only times between 12:00 and 18:00 will be seen as valid; times outside that range will be denoted as invalid.</li>
 <li>Depending on what browser you're using, you might find that times outside the specified range might not even be selectable in the time picker (e.g. Edge).</li>
</ul>

<h3 id="Making_times_required">Making times required</h3>

<p>In addition, you can use the {{htmlattrxref("required", "input")}} attribute to make filling in the time mandatory. As a result, supporting browsers will display an error if you try to submit a time that is outside the set bounds, or an empty time field.</p>

<p>Let's look at an example; here we've set minimum and maximum times, and also made the field required:</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="appt-time"&gt;Choose an appointment time (opening hours 12:00 to 18:00): &lt;/label&gt;
    &lt;input id="appt-time" type="time" name="appt-time"
           min="12:00" max="18:00" required&gt;
    &lt;span class="validity"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;input type="submit" value="Submit form"&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>If you try to submit the form with an incomplete time (or with a time outside the set bounds), the browser displays an error. Try playing with the example now:</p>

<p>{{ EmbedLiveSample('Making_times_required', 600, 120) }}</p>

<p>Here's a screenshot for those of you who aren't using a browser that supports <code>time</code> inputs:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15405/firefox-validation-message.png" style="display: block; margin: 0 auto;"></p>

<div class="warning">
<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).</p>
</div>

<h2 id="Handling_browser_support">Handling browser support</h2>

<p>As mentioned above, Safari and a few other, less common, browsers don't yet support time inputs natively. In general, otherwise, support is good — especially on mobile platforms, which tend to have very nice user interfaces for specifying a time value. For example, the <code>time</code> picker on Chrome for Android looks like this:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15407/chrome-android-time.png" style="display: block; margin: 0 auto;"></p>

<p>Browsers that don't support time inputs gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.</p>

<p>The second problem is the more serious; as mentioned previously, <code>time</code> inputs' values are always normalized to the format <code>hh:mm</code> or <code>hh:mm:ss</code>. With a text input, on the other hand, by default the browser has no idea of what format the time should be in, and there multiple ways in which people write times, such as:</p>

<ul>
 <li><code>3.00 pm</code></li>
 <li><code>3:00pm</code></li>
 <li><code>15:00</code></li>
 <li><code>3 o'clock in the afternoon</code></li>
 <li>etc.</li>
</ul>

<p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your <code>time</code> input. Even though the <code>time</code> input doesn't use it, the <code>text</code> input fallback will. For example, try viewing the following demo in a browser that doesn't support time inputs:</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="appt-time"&gt;Choose an appointment time (opening hours 12:00 to 18:00): &lt;/label&gt;
    &lt;input id="appt-time" type="time" name="appt-time"
           min="12:00" max="18:00" required
           pattern="[0-9]{2}:[0-9]{2}"&gt;
    &lt;span class="validity"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;input type="submit" value="Submit form"&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p>

<p>If you try submitting it, you'll see that non-supporting browsers now display an error message (and highlight the input as invalid) if your entry doesn't match the pattern <code>nn:nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid times, or incorrectly formatted times that follow the pattern.</p>

<p>Then there's the problem of the user having no idea exactly what format the time is expected to be in.</p>

<div class="hidden">
<pre class="brush: css notranslate">div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}</pre>
</div>

<p>The best way to deal with times in forms in a cross-browser way, for the time being, is to get the user to enter the hours and minutes (and seconds if required) in separate controls ({{htmlelement("select")}} elements are popular; see below for an example), or use JavaScript libraries such as the <a href="http://timepicker.co/">jQuery timepicker plugin</a>.</p>

<h2 id="Examples">Examples</h2>

<p>In this example, we create two sets of interface elements for choosing times: a native picker created with <code>&lt;input type="time"&gt;</code>, and a set of two {{htmlelement("select")}} elements for choosing hours/minutes in older browsers that don't support the native input.</p>

<p>{{ EmbedLiveSample('Examples', 600, 140) }}</p>

<p>The HTML looks like so:</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;div class="nativeTimePicker"&gt;
    &lt;label for="appt-time"&gt;Choose an appointment time (opening hours 12:00 to 18:00): &lt;/label&gt;
      &lt;input id="appt-time" type="time" name="appt-time"
             min="12:00" max="18:00" required&gt;
      &lt;span class="validity"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;p class="fallbackLabel"&gt;Choose an appointment time (opening hours 12:00 to 18:00):&lt;/p&gt;
  &lt;div class="fallbackTimePicker"&gt;
    &lt;div&gt;
      &lt;span&gt;
        &lt;label for="hour"&gt;Hour:&lt;/label&gt;
        &lt;select id="hour" name="hour"&gt;
        &lt;/select&gt;
      &lt;/span&gt;
      &lt;span&gt;
        &lt;label for="minute"&gt;Minute:&lt;/label&gt;
        &lt;select id="minute" name="minute"&gt;
        &lt;/select&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>The hour and minutes values for their <code>&lt;select&gt;</code> elements are dynamically generated.</p>

<div class="hidden">
<pre class="brush: css notranslate">div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}</pre>
</div>

<p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code>&lt;input type="time"&gt;</code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>time</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>time</code> type falls back to type <code>text</code>. If <code>&lt;input type="time"&gt;</code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}s) instead.</p>

<pre class="brush: js notranslate">// define variables
var nativePicker = document.querySelector('.nativeTimePicker');
var fallbackPicker = document.querySelector('.fallbackTimePicker');
var fallbackLabel = document.querySelector('.fallbackLabel');

var hourSelect = document.querySelector('#hour');
var minuteSelect = document.querySelector('#minute');

// hide fallback initially
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';

// test whether a new date input falls back to a text input or not
var test = document.createElement('input');
test.type = 'time';
// if it does, run the code inside the if() {} block
if(test.type === 'text') {
  // hide the native picker and show the fallback
  nativePicker.style.display = 'none';
  fallbackPicker.style.display = 'block';
  fallbackLabel.style.display = 'block';

  // populate the hours and minutes dynamically
  populateHours();
  populateMinutes();
}

function populateHours() {
  // populate the hours &lt;select&gt; with the 6 open hours of the day
  for(var i = 12; i &lt;= 18; i++) {
    var option = document.createElement('option');
    option.textContent = i;
    hourSelect.appendChild(option);
  }
}

function populateMinutes() {
  // populate the minutes &lt;select&gt; with the 60 hours of each minute
  for(var i = 0; i &lt;= 59; i++) {
    var option = document.createElement('option');
    option.textContent = (i &lt; 10) ? ("0" + i) : i;
    minuteSelect.appendChild(option);
  }
}

// make it so that if the hour is 18, the minutes value is set to 00
// — you can't select times past 18:00
 function setMinutesToZero() {
   if(hourSelect.value === '18') {
     minuteSelect.value = '00';
   }
 }

 hourSelect.onchange = setMinutesToZero;
 minuteSelect.onchange = setMinutesToZero;</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comments</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#time-state-(type=time)', '&lt;input type="time"&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("html.elements.input.input-time")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li>
 <li><a href="/en-US/docs/Web/HTML/Date_and_time_formats">Date and time formats used in HTML</a></li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li>
 <li><code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/date">&lt;input type="date"&gt;</a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/week">&lt;input type="week"&gt;</a></code>, and <code><a href="/en-US/docs/Web/HTML/Element/input/month">&lt;input type="month"&gt;</a></code></li>
</ul>