Tipos de Input

O HTML oferece diversos 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 inserção de e-mail que exigem um endereço de e-mail válido. O navegador valida automaticamente o endereço de e-mail, solicitando ao usuário que corrija entradas inválidas;
• type="password": Utilizado para campos de senha onde o texto digitado é ocultado por segurança. Também podemos especificar os atributos minLength e maxLength para definir requisitos de comprimento da senha.

Exemplo:

number

type="number": Utilizado para entrada numérica. Podemos definir um intervalo específico com os atributos min e max e estabelecer um valor de passo específico com o atributo step.

Exemplo:

tel

type="tel": Destinado à inserção de números de telefone, mas não realiza qualquer validação na entrada de dados. Cabe ao desenvolvedor validar a entrada e garantir que seja um número de telefone válido.

Exemplo:

checkbox

type="checkbox": Permite que o usuário selecione uma ou mais opções entre escolhas predefinidas. O atributo checked faz com que uma caixa de seleção esteja marcada por padrão.

Exemplo:

radio

type="radio": Cria um conjunto de opções onde apenas uma opção pode ser selecionada. Um botão de opção representa cada opção, e escolher uma automaticamente desmarca as outras. Cada botão de opção deve ter um atributo value único para identificá-lo.

Exemplo:

range

type="range": Cria um controle deslizante que permite aos usuários selecionar um valor dentro de um intervalo específico. Podemos aplicar os atributos min, max, step e value para definir seu comportamento.

Exemplo:

Nota

Aprenderemos JavaScript nos cursos seguintes. Não é o contexto deste curso.

date e time

• type="date": Permite que os usuários selecionem uma data a partir de um calendário pop-up;
• type="time": Permite que os usuários insiram um horário no formato de 24 horas;
• type="datetime-local": Combina entradas de data e hora.

Exemplo:

Nota

Para garantir uma estilização consistente em diferentes dispositivos, soluções prontas são frequentemente utilizadas para calendários pop-up e entradas de hora.