Como vimos anteriormente, o elemento mais poderoso de um formulário é o input. Este elemento espera receber dados do usuário. Vamos nos concentrar nele.

Tipos de Input

Entrada de Texto

Projetado para entrada de dados textuais curtos, como nomes de usuário, endereços de e-mail ou mensagens breves.

<input type="text" />

Entrada de Senha

Utilizado para entrada de senha, onde os caracteres são mascarados para fins de segurança. Garante privacidade ao ocultar os caracteres digitados.

<input type="password" />

Entrada de E-mail

Utilizado para coletar endereços de e-mail dos usuários. Realiza validação no lado do cliente para garantir que o valor inserido esteja em formato de e-mail válido.

<input type="email" />

Entrada de Telefone

Utilizada para coletar números de telefone dos usuários. Permite a inserção de números em vários formatos, incluindo números internacionais.

<input type="tel" />

Entrada Numérica

Utilizada para coletar dados numéricos dos usuários. Exibe um teclado numérico em dispositivos móveis para facilitar a inserção.

<input type="number" />

Caixa de Seleção (Checkbox)

Permite que os usuários selecionem uma ou mais opções de uma lista de escolhas. Adequada para cenários em que múltiplas seleções são permitidas, como selecionar vários itens de uma lista ou concordar com termos e condições.

<input type="checkbox" />

Botão de Opção (Radio Button)

Permite que o usuário selecione uma única opção em uma lista de escolhas mutuamente exclusivas. Adequado para situações em que apenas uma opção deve ser escolhida, como seleção de gênero ou escolha de método de pagamento.

<input type="radio" />

Entrada de Arquivo (File Input)

Permite que o usuário envie arquivos do seu dispositivo, escolha a partir do sistema de arquivos local e os envie junto com os dados do formulário. Este recurso é especialmente útil para anexar documentos ou imagens.

<input type="file" />

Entrada de Data, Hora e Data/Hora (Date Input, Time Input e DateTime Input)

Permite que o usuário insira datas, horários ou ambos. Fornece interfaces intuitivas para seleção de datas e horários. Útil para registrar datas de nascimento, horários de compromissos ou agendas de eventos.

<input type="date" />
<input type="time" />
<input type="datetime-local" />

Exemplo: Digite algo nos campos e eles sugerirão várias opções. Não se preocupe; nenhum dado será coletado.

Você pode ter notado que preencher o formulário não é muito conveniente quando não se entende o que está sendo solicitado em cada campo. Por isso, os rótulos vêm em nosso auxílio.

Rótulos

Rótulos (<label>) são essenciais para vincular textos descritivos aos elementos de entrada de formulário, aumentando a acessibilidade e a facilidade de uso. É fundamental que o atributo for da tag <label> corresponda ao atributo id do elemento input associado.
Exemplo:

<label for="username">Username:</label>
<input type="text" id="username" />

No exemplo acima:

• Ao clicar no rótulo Username:, o campo de entrada correspondente será automaticamente focado;
• O label e o input estão vinculados por meio dos atributos for e id, respectivamente;
• Ambos os atributos for e id possuem o mesmo valor (username).

Facilite o preenchimento do formulário adicionando rótulos aos campos de entrada do exemplo anterior.
Exemplo:

Tutorial em Vídeo