Os campos de entrada de formulário são a principal forma de os usuários inserirem informações. O HTML oferece diversos tipos de campos de entrada, dependendo dos dados necessários.

Tipos Comuns de Entrada

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

Campo de Senha

Utilizado para entrada de senha, onde os caracteres são mascarados para fins de segurança.

<input type="password" />

Campo 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 no formato de e-mail válido.

<input type="email" />

Campo de Telefone

Utilizado para coletar números de telefone dos usuários.

<input type="tel" />

Campo Numérico

Utilizado para coletar dados numéricos dos usuários. Exibe um teclado numérico em dispositivos móveis.

<input type="number" />

Caixa de Seleção (Checkbox)

Permite que os usuários selecionem uma ou mais opções de uma lista de escolhas. Adequado 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 os usuários selecionem uma opção de uma lista de escolhas mutuamente exclusivas. Adequado para cenários em que 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 enviem arquivos de seus dispositivos, selecionem a partir do sistema de arquivos local e os enviem junto com os dados do formulário. Este recurso é especialmente ú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 intuitivas para seleção de datas e horários.

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

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 que as labels vêm em nosso auxílio.