Já me deparei, diversas vezes, com a necessidade de criar um formulário com campos de hora e data separados, ou seja, um campo para cada um. Com isso, poderia fazer com que os usuários inserissem informações para serem tratadas de forma mais precisa e específica, especialmente em casos em que é crucial distinguir entre a data e a hora.
Ao separar esses campos, desenvolvedores podem aplicar validações específicas para cada parte (data e hora) do formulário, garantindo assim a integridade e consistência dos dados inseridos.
Dica: clique aqui para ver mais posts sobre HTML.
input type=”time”
Para criar um campo de entrada de hora em HTML, podemos usar o elemento <input> com o atributo type="time".
<label for="hora">Escolha a hora:</label> <input type="time" id="hora" name="hora" required>
Esse é o resultado:
type="time": Indica que o campo de entrada aceitará apenas horas.id="hora": Identifica exclusivamente o campo. O valor do atributofordo<label>deve corresponder a esteid.name="hora": É o nome do campo que será enviado quando o formulário for submetido.required: Torna o campo obrigatório, forçando o usuário a selecionar uma hora.
input type=”detetime-local”
Bom, por mais que o título desse post fale de criar campos separados, por motivo de aprendizado, coloquei o atributo type="datetime-local" que permite aos usuários selecionar uma data e hora dentro do mesmo campo. Ele funciona em um formato local, ou seja, sem levar em consideração o fuso horário.
Ele cria um campo de entrada que combina seletores de data e hora em um único componente.
Vejamos um exemplo,
<label for="datahora">Escolhai data e hora:</label> <input type="datetime-local" id="dataHora" name="dataHora">
ficará assim: