Conteúdo do Curso
Essenciais de HTML
Essenciais de HTML
Elementos de Entrada de Formulário e Rótulo
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 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 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 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 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.
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.
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.
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.
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.
Exemplo: Digite algo nos campos, e eles sugerirão várias opções. Não se preocupe; nenhum dado será coletado.
index
index
index
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:
No exemplo acima:
- Quando você clica no rótulo
Username:
, ele automaticamente foca no campo de entrada correspondente; - O
label
e oinput
estão vinculados juntos usando os atributosfor
eid
, respectivamente; - Ambos os atributos
for
eid
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:
index
index
index
Tutorial em Vídeo
Obrigado pelo seu feedback!