Usando Entradas de Formulário

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

Tipos Comuns de Campos de Entrada

Campo 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. Fornece 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 usuários enviem arquivos de seus dispositivos, selecionando-os do sistema de arquivos local e enviando-os junto com os dados do formulário. Este recurso é especialmente útil para anexar documentos ou imagens.

<input type="file" />

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

Permite que usuários insiram datas, horários ou ambos. Oferece 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 etiquetas vêm em nosso auxílio.