path: root/files/pt-br/web/html/element/input/time/index.html

---
title: <input type="time">
slug: Web/HTML/Element/Input/time
tags:
  - Formulário
  - Hora
  - tipo
translation_of: Web/HTML/Element/input/time
---
<div>{{HTMLRef("Input_types")}}</div>

<p><span class="seoSummary">Elementos <code>&lt;input&gt;</code> do tipo <strong><code>time</code></strong> (hora) criam campos de inserção que permitem que o usuário digite horários facilmente (horas e minutos e, opcionalmente, segundos).</span></p>

<p>A interface de usuário deste tipo de campo varia de navegador para navegador. A maioria dos navegadores modernos é compatível com ele exceto pelo Safari, o único grande navegador que ainda não o implementou; no Safari (e em qualquer outro navegador que ainda não suporte <code>&lt;time&gt;</code>), ele regride para <code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code>.</p>

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



<h2 id="Aparência">Aparência</h2>

<h3 id="Chrome_e_Opera">Chrome e Opera</h3>

<p>No Chrome/Opera, o campo de <code>time</code> é simples, com espaços onde o usuário pode inserir horas e minutos (no formato 24 horas), além de setas para cima e para baixo que servem para, respectivamente, incrementar e decrementar o componente atualmente selecionado. Um botão "X" também é apresentado para limpar o conteúdo do campo.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15399/chrome-time.png" style="display: block; height: 31px; margin: 0px auto; width: 82px;"></p>

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

<p>O campo de <code>time</code> do Firefox é bem parecido com o do Chrome, exceto pela ausência das setas para cima e para baixo e por estar no formato 12 horas (com um espaço adicional para inserir AM ou PM).</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15403/firefox-time.png" style="display: block; height: 29px; margin: 0px auto; width: 106px;"></p>

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

<p>O campo de <code>time</code> do Edge é melhor elaborado, abrindo um seletor de hora e minuto com rolagem infinita. Assim como o Chrome, ele também adota o formato 24 horas:</p>

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

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("Value")}}</strong></td>
   <td>Uma {{domxref("DOMString")}} representando um horário, ou vazia.</td>
  </tr>
  <tr>
   <td><strong>Eventos</strong></td>
   <td>{{event("change")}} e {{event("input")}}.</td>
  </tr>
  <tr>
   <td><strong>Atributos comuns suportados</strong></td>
   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} e {{htmlattrxref("step", "input")}}.</td>
  </tr>
  <tr>
   <td><strong>Atributos IDL</strong></td>
   <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code> e <code>list</code>.</td>
  </tr>
  <tr>
   <td><strong>Métodos</strong></td>
   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}} e {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td>
  </tr>
 </tbody>
</table>

<h2 id="Valor">Valor</h2>

<div id="value-sample1">
<p>Uma {{domxref("DOMString")}} contendo o valor do horário inserido no campo. Você pode definir um valor padrão para o campo incluindo um horário válido no atributo {{htmlattrxref("value", "input")}} ao criar o elemento <code>&lt;input&gt;</code>, tipo assim:</p>

<pre class="brush: html">&lt;label for="hora-cons"&gt;Escolha o horário da consulta: &lt;/label&gt;
&lt;input id="hora-cons" type="time" name="hora-cons" value="13:30"&gt;</pre>
</div>

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

<p>Você também pode obter e definir o valor do campo via JavaScript usando a propriedade {{domxref("HTMLInputElement.value")}}, por exemplo:</p>

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

<h3 id="Formato_do_valor_do_horário">Formato do valor do horário</h3>

<p>O  <code>value</code> do campo de <code>time</code> está sempre no formato 24 horas: <code>"hh:mm"</code>, não importa o formato usado na inserção. Esse formato muitas vezes é escolhido baseado no idioma/local do usuário (ou mesmo pelo agente de usuário). Se o horário incluir segundos (veja {{anch("Usando o atributo step")}}), o formato sempre é <code>"hh:mm:ss"</code>.</p>

<p>No próximo exemplo, você pode ver o modo como o valor do campo de horário varia entre o que foi digitado e o que ele retorna.</p>

<p>Mas antes, vamos dar uma conferida no HTML. Ele é bem simpless, contando com label (rótulo) e input (campo) do jeito que já vimos antes, com a adição de um elemento {{HTMLElement("p")}} com um {{HTMLElement("span")}} que mostra o valor do campo de <code>time</code>:</p>

<pre class="brush: html">&lt;form&gt;
  &lt;label for="horaInicio"&gt;Hora de início: &lt;/label&gt;
  &lt;input type="time" id="horaInicio"&gt;
  &lt;p&gt;
    Valor do campo &lt;code&gt;time&lt;/code&gt;: &lt;code&gt;
            "&lt;span id="value"&gt;n/a&lt;/span&gt;"&lt;/code&gt;.
  &lt;/p&gt;
&lt;/form&gt;</pre>

<p>No código JavaScript, chamamos um método que monitora o evento {{event("input")}}, que é disparado sempre que o conteúdo de um elemento <code>&lt;input&gt;</code> muda. Toda vez que ele dispara, o conteúdo do <code>&lt;span&gt;</code> é substituído pelo novo valor do campo de horário.</p>

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

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

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

<p>Quando um formulário que inclui um campo de <code>time</code> é enviado, o valor é codificado antes de ser incluído nos dados do formulário. Nesse caso, o valor correspondente ao campo de horário sempre estará no formato <code>"name=hh%3Amm"</code>, ou <code>"name=hh%3Amm%3ass"</code> caso ele conte com segundos (veja {{anch("Usando o atributo step")}}).</p>

<h2 id="Usando_campos_de_horário">Usando campos de horário</h2>

<p>Apesar de que, entre os campos dos tipos data e horário, o de horário tenha a maior presença entre os navegadores, ele ainda não tem presença universal. Logo, é provável que você vá precisar fornecer uma maneira alternativa de se inserir data e hora, para que os usuários do Safari (e de outros navegadores sem suporte) ainda consigam inserir horários facilmente.</p>

<p>A seguir, vamos conferir casos de uso básicos e complexos do <code>&lt;input type="time"&gt;</code>, além de dar conselhos sobre como contornar a questão dos navegadores na seção (see {{anch("Lidando com navegadores sem suporte")}}).</p>

<h3 id="Usos_básicos_de_horário">Usos básicos de horário</h3>

<p>O caso de uso mais simples do <code>&lt;input type="time"&gt;</code> envolve uma combinação básica dos elementos <code>&lt;input&gt;</code> e {{htmlelement("label")}} como vemos abaixo:</p>

<pre class="brush: html">&lt;form&gt;
  &lt;label for="hora-cons"&gt;Escolha o horário da consulta: &lt;/label&gt;
  &lt;input id="hora-cons" type="time" name="hora-cons"&gt;
&lt;/form&gt;</pre>

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

<h3 id="Controlando_o_tamanho_do_campo">Controlando o tamanho do campo</h3>

<p>O elemento <code>&lt;input type="time"&gt;</code> não é compatível com atributos de dimensionamento de formulários tais como {{htmlattrxref("size", "input")}}, já que horários quase sempre tem o mesmo número de caracteres. Você terá que recorrer ao <a href="/en-US/docs/Web/CSS">CSS</a> para ajustar tamanhos.</p>

<h3 id="Usando_o_atributo_step">Usando o atributo step</h3>

<p>Você pode usar o atributo {{htmlattrxref("step", "input")}} para variar a quantidade de tempo pulada sempre que o horário for incrementado/decrementado (por exemplo, para fazer com que o horário avançe ou volte em 10 minutos ao clicar nas setinhas ao lado do campo).</p>

<div class="note">
<p>Esta propriedade pode se comportar de maneira inesperada em alguns navegadores. Por isso, ela não é 100% confiável.</p>
</div>

<p>O atributo recebe um valor igual ao número de segundos que você quer que o valor seja incrementado - o valor padrão é 60 segundos, ou 1 minuto. Se você especificar um valor menor que 60 segundos (1 minuto), o campo <code>time</code> vai mostrar uma área de inserção de segundos junto com as de hora e minuto:</p>

<pre class="brush: html">&lt;form&gt;
  &lt;label for="hora-cons"&gt;Escolha o horário da consulta: &lt;/label&gt;
  &lt;input id="hora-cons" type="time" name="hora-cons" step="2"&gt;
&lt;/form&gt;</pre>

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

<p>No Chrome e no Opera, que são os únicos navegadores que mostram botões de setas para aumentar/diminuir o valor, clicar nas setinhas muda o valor em dois segundos, mas não afeta as horas e minutos. Para poder usar essa funcionalidade com minutos e horas, você precisa especificar o número de minutos (ou horas) em segundos (por exemplo, 120 para 2 minutos, ou 7200 para 2 horas).</p>

<p>No Firefox, não são mostrados botões de setas; logo, o valor de <code>step</code> não é usado. No entanto, adicionar esse atributo <em>por si só</em> já adiciona a área de inserção de segundos ao lado da de minutos.</p>

<p>O valor de <code>step</code> parece não ter efeito no Edge.</p>

<div class="note">
<p>Ao que parece, usar o atributo <code>step</code> faz com que a validação não funcione adequadamente (como podemos ver na seção seguinte).</p>
</div>

<h2 id="Validação">Validação</h2>

<p>Por padrão, <code>&lt;input type="time"&gt;</code> não aplica nenhum tipo de validação nos valores inseridos (fora o próprio agente de usuário impedir que sejam inseridos valores diferentes de horários). Isso é útil (considerando que o agente de usuário seja completamente compatível com campos do tipo <code>time</code>), mas nem sempre devemos esperar que o valor desse campo seja realmente um horário, já que ele pode ser uma string vazia (<code>""</code>), o que é permitido. Também é possível que o valor se pareça com um horário válido, mas que esteja incorreto, como <code>"25:05"</code>.</p>

<h3 id="Definindo_horários_mínimo_e_máximo">Definindo horários mínimo e máximo</h3>

<p>Você pode usar os atributos {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir a faixa de horário válida que o usuário pode escolher. No seguinte exemplo, definimos <code>12:00</code> como o horário mínimo e <code>18:00</code> como o horário máximo:</p>

<pre class="brush: html">&lt;form&gt;
  &lt;label for="hora-cons"&gt;Escolha o horário da consulta (aberto das 12:00 às 18:00): &lt;/label&gt;
  &lt;input id="hora-cons" type="time" name="hora-cons"
         min="12:00" max="18:00"&gt;
  &lt;span class="validacao"&gt;&lt;/span&gt;
&lt;/form&gt;</pre>

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

<p>Aqui está o CSS usado no exemplo acima. Nele, fazemos uso das propriedades CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} para estilizar o campo com base na validade ou não do conteúdo atual dele. Tivemos que colocar os ícones em um {{htmlelement("span")}} ao lado do campo, e não no  campo em si, porque no Chrome o conteúdo gerado é colocado denteo do campo do formulário e não pode ser efetivamente mostrado ou estilizado.</p>

<pre class="brush: css">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>O resultado disso é que:</p>

<ul>
 <li>Apenas horários entre 12:00 e 18:00 serão vistos como válidos; horários fora dessa faixa serão tratados como inválidos.</li>
 <li>Dependendo do navegador usado, você pode perceber que os horários fora da faixa especificada não podem nem mesmo ser selecionados pelo seletor de hora (ex.: Edge).</li>
</ul>

<h3 id="Tornando_campos_de_horário_obrigatórios">Tornando campos de horário obrigatórios</h3>

<p>Além do mais, você pode usar o atributo {{htmlattrxref("required", "input")}} para tornar obrigatória a inserção de um horário. Como resultado, os navegadores compatíves irão mostrar um erro se você tentar enviar um horário fora da proporção adequada ou que esteja em branco.</p>

<p>Vamos ver um exemplo. Nele, colocamos um horário mínimo e um máximo, além de tornarmos o campo obrigatório.</p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="hora-cons"&gt;Escolha o horário da consulta (aberto das 12:00 às 18:00): &lt;/label&gt;
    &lt;input id="hora-cons" type="time" name="hora-cons"
           min="12:00" max="18:00" required&gt;
    &lt;span class="validacao"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;input type="submit" value="Enviar formulário"&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>Se você tentar enviar o formulário com um horário incompleto (ou com um horário fora da faixa válida), o navegador vai mostrar um erro. Experimente brincar com esse exemplo agora:</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">&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 dates, or incorrectly formatted dates 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">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">&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">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">// 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">Compatibilidade com navegadores</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="https://developer.mozilla.org/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>