Aula 16 — Campos modernos de formulário (HTML5)

O HTML5 trouxe vários tipos de campos e atributos que facilitam a vida do usuário e ajudam a evitar erros comuns antes mesmo de enviar o formulário.

Nesta aula, vamos conhecer os campos modernos e a validação nativa do navegador.

Campos modernos de <input>

Além do text e password, o HTML5 introduziu novos tipos de campo:

• email — e-mail
• tel — telefones
• url — endereços de internet
• search — campos de busca
• number — números
• range — intervalos
• date — datas
• datetime — datas detalhadas
• month — meses
• week — semanas
• time — hora
• color — cores

 <input type="email"> <input type="number"> <input type="date"> 

Campo de e-mail — email

O tipo email é usado para endereços de e-mail. O navegador verifica automaticamente se o formato digitado é válido.

  <label for="email">E-mail</label> 
  <input type="email" id="email" placeholder="email@exemplo.com" required> 

Campo de telefone — tel

O tipo tel é usado para números de telefone. Ele não valida o formato automaticamente, mas adapta o teclado em dispositivos móveis.

 
  <label for="telefone">Telefone</label> 
  <input type="tel" id="telefone" placeholder="(11) 99999-9999"> 

Campo de URL — url

O tipo url é usado para endereços de sites. O navegador verifica se o valor digitado parece uma URL válida.

 
  <label for="site">Site</label> 
  <input type="url" id="site" placeholder="https://exemplo.com"> 

Campo de busca — search

O tipo search é usado para campos de pesquisa. Visualmente pode ser igual ao texto, mas semanticamente indica busca.

 
  <label for="busca">Buscar</label> 
  <input type="search" id="busca" placeholder="Digite sua busca"> 

Campo numérico — number

O tipo number permite apenas números e pode incluir controles de incremento.

 
  <label for="idade">Idade</label> 
  <input type="number" id="idade" min="0" max="120"> 

Controle deslizante — range

O tipo range cria um controle deslizante para escolher valores dentro de um intervalo.

 
  <label for="volume">Volume</label> 
  <input type="range" id="volume" min="0" max="100"> 

Data — date

O tipo date permite selecionar uma data usando um calendário.

 
  <label for="data">Data</label> 
  <input type="date" id="data"> 

Data e hora — datetime-local

O tipo datetime-local permite selecionar data e hora juntas, sem considerar fuso horário.

 
  <label for="evento">Data e hora</label> 
  <input type="datetime-local" id="evento"> 

Mês — month

O tipo month permite selecionar apenas mês e ano.

 
  <label for="mes">Mês</label> 
  <input type="month" id="mes"> 

Semana — week

O tipo week permite selecionar uma semana específica do ano.

 
  <label for="semana">Semana</label> 
  <input type="week" id="semana"> 

Hora — time

O tipo time permite selecionar apenas a hora, sem data.

 
  <label for="hora">Hora</label> 
  <input type="time" id="hora"> 

Cor — color

O tipo color exibe um seletor de cores nativo do navegador.

 
  <label for="cor">Escolha uma cor</label> 
  <input type="color" id="cor"> 

A imagem abaixo exibe um formulário contendo todos estes campos de entrada. Note que ele permite uma seleção facilitada para cada item, de acordo com sua estrutura.

Exemplo de formulário contendo diversos campos modernos do HTML5

O atributo required

O atributo required indica que o campo é obrigatório.

 <input type="email" required> 

Se o usuário tentar enviar o formulário sem preencher esse campo, o navegador exibirá uma mensagem automaticamente.

O atributo placeholder

O placeholder exibe um texto de exemplo dentro do campo.

 
  <input type="email" placeholder="Digite seu e-mail"> 

O código acima resultará na seguinte página sendo criada:

Combinando tudo em um formulário

 
  <form> 
  <label for="email">E-mail</label> 
  <input type="email" id="email" placeholder="email@exemplo.com" required >
  <br />  <br />
  <label for="idade">Idade  </label> 
  <input type="number" id="idade" required> 
  <br />  <br />
  <label for="nascimento">Data de nascimento  </label> 
  <input type="date" id="nascimento"> 
  <br />  <br />
  <input type="submit" value="Enviar"> 
  </form> 

O código acima resultará na seguinte página sendo criada:

Mesmo sem JavaScript, esse formulário já:

• Valida campos obrigatórios
• Verifica formato de e-mail
• Ajuda o usuário com dicas visuais

Validação nativa do navegador

A validação nativa:

• É automática
• É rápida de implementar
• Funciona sem JavaScript

Na próxima aula, vamos aprender sobre mídia no HTML5: áudio e vídeo direto no navegador 🎧🎬