Como vimos antes, o elemento mais poderoso de um formulário é o input. Este elemento espera dados do usuário. Vamos focar nele.

Tipos de Input

Input 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" />

Input de Senha

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

<input type="password" />

Input de Email

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

<input type="email" />

Input de Telefone

Usado para coletar números de telefone dos usuários. Permite que os usuários insiram números de telefone em vários formatos, incluindo números internacionais.

<input type="tel" />

Input de Número

Usado para coletar dados numéricos dos usuários. Fornece um teclado numérico em dispositivos móveis para facilitar a entrada.

<input type="number" />

Checkbox

Permite que os usuários selecionem uma ou mais opções de uma lista de escolhas. Adequado para cenários onde 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 Rádio

Permite que os usuários selecionem uma opção de uma lista de escolhas mutuamente exclusivas. Adequado para cenários onde apenas uma opção deve ser selecionada, como seleção de gênero ou escolha de método de pagamento.

<input type="radio" />

Entrada de Arquivo

Permite que os usuários façam upload de arquivos de seus dispositivos, escolham de seu sistema de arquivos local e os enviem com dados de formulário. Este recurso é particularmente útil ao anexar documentos ou imagens.

<input type="file" />

Entrada de Data, Entrada de Hora e Entrada de Data e Hora

Permite que os usuários insiram datas, horários ou ambos. Fornece interfaces amigáveis para seleção de datas e horários. Útil para capturar 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 você não entende o que está sendo solicitado em cada campo. É por isso que as etiquetas vêm em nosso auxílio.

Labels

Labels (<label>) são essenciais para vincular rótulos de texto com elementos de entrada de formulário, melhorando a acessibilidade e a facilidade de uso. É crucial 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:

• Quando você clica no rótulo Username:, ele automaticamente foca no campo de entrada correspondente;
• O label e o input estão vinculados juntos usando os atributos for e id, respectivamente;
• Ambos os atributos for e id têm o mesmo valor (username).

Vamos tornar o preenchimento do formulário mais fácil adicionando rótulos às entradas do exemplo anterior.
Exemplo:

Tutorial em Vídeo