<input type="time">
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since abril de 2021.
* Some parts of this feature may have varying levels of support.
Elementos <input> do tipo time (hora) criam campos de inserção que permitem que o usuário digite horários facilmente (horas e minutos e, opcionalmente, segundos).
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 <time>), ele regride para <input type="text">.
Experimente
<label for="appt">Choose a time for your meeting:</label>
<input type="time" id="appt" name="appt" min="09:00" max="18:00" required />
<small>Office hours are 9am to 6pm</small>
label {
display: block;
font:
1rem "Fira Sans",
sans-serif;
}
input,
label {
margin: 0.4rem 0;
}
Aparência
Chrome e Opera
No Chrome/Opera, o campo de time é 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.
Firefox
O campo de time 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).
Edge
O campo de time 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:
| Value |
Uma String representando um horário, ou vazia.
|
| Eventos | [`change`](/pt-BR/docs/Web/Events/change) e [`input`](/pt-BR/docs/Web/API/Element/input_event). |
| Atributos comuns suportados |
autocomplete,
list,
readonly e
step.
|
| Atributos IDL |
value, valueAsDate,
valueAsNumber e list.
|
| Métodos |
select(),
stepDown()
e stepUp().
|