O HTML oferece vários elementos <input> que permitem capturar diferentes tipos de dados dos usuários. Vamos explorar alguns tipos de entrada comumente utilizados:

email e password

• type="email": utilizado para campos de entrada de e-mail que exigem um endereço de e-mail válido. O navegador valida automaticamente o endereço, solicitando ao usuário a correção de entradas inválidas;

• type="password": utilizado para campos de senha, onde o texto inserido é mascarado por segurança. Também é possível especificar os atributos minLength e maxLength para definir requisitos de comprimento da senha.

number

type="number": utilizado para entrada numérica. É possível definir um intervalo específico com os atributos min e max, além de configurar um valor de incremento com o atributo step.

telephone

type="tel": destinado à inserção de números de telefone, porém não realiza validação do valor inserido. A validação e garantia de um número válido ficam sob responsabilidade do desenvolvedor.

checkbox

type="checkbox": permite ao usuário selecionar uma ou mais opções entre escolhas predefinidas. O atributo checked deixa a caixa de seleção marcada por padrão.

radio

type="radio": cria um conjunto de opções onde apenas uma pode ser selecionada. Um botão de opção representa cada alternativa, e ao escolher uma, as demais são automaticamente desmarcadas. Cada botão de opção deve possuir um atributo value exclusivo para identificá-lo.

range

type="range": cria um controle deslizante que permite ao usuário selecionar um valor dentro de um intervalo específico. É possível aplicar os atributos min, max, step e value para definir seu comportamento.

Nota

JavaScript não é o foco deste curso, portanto a lógica relacionada será omitida.

data e hora

• type="date": permite que os usuários selecionem uma data em um calendário pop-up;

• type="time": permite que os usuários insiram um horário no formato 24 horas;

• type="datetime-local": combina os campos de data e hora.

Exemplo:

Nota

Para garantir uma aparência consistente em diferentes dispositivos, soluções prontas são frequentemente utilizadas para calendários pop-up e campos de entrada de horário.