Mais tipos de input: number, date, tel, url e search

Além dos tipos básicos de input (text, password, email), o HTML5 introduziu uma série de novos tipos que trazem funcionalidades e validações nativas muito úteis. Eles melhoram a experiência do usuário, especialmente em dispositivos móveis, e ajudam na validação dos dados antes mesmo de serem enviados ao servidor.

Vamos explorar alguns desses tipos mais específicos.

type="number": números inteiros ou decimais

Este tipo de campo é projetado para coletar apenas valores numéricos.

Características principais:

• Controles de incremento/decremento: Em navegadores desktop, geralmente aparecem setas para cima e para baixo para ajustar o valor.
• Teclado numérico: Em dispositivos móveis, o teclado muda para um layout numérico, facilitando a digitação.
• Validação nativa: O navegador verifica se o valor digitado é um número.
• Atributos específicos:
  • min: Valor mínimo aceitável.
  • max: Valor máximo aceitável.
  • step: O valor pelo qual o número é incrementado ou decrementado (padrão é 1). Pode ser decimal (ex: step="0.01").

Exemplo:

<form>
  <label for="idade">Idade:</label><br>
  <input type="number" id="idade" name="idade_usuario" min="0" max="120" required><br><br>

  <label for="quantidade">Quantidade de Produtos:</label><br>
  <input type="number" id="quantidade" name="qtd_produtos" value="1" min="1" step="1"><br><br>

  <label for="preco">Preço (com decimais):</label><br>
  <input type="number" id="preco" name="preco_item" min="0.01" step="0.01">
</form>

type="date": seleção de data

Este tipo de campo permite ao usuário selecionar uma data.

Características principais:

• Seletor de calendário: Em navegadores modernos, um widget de calendário aparece quando o campo é focado, facilitando a seleção.
• Formato padronizado: O valor enviado ao servidor estará sempre no formato YYYY-MM-DD (ex: 2026-05-28), independentemente de como o usuário o visualiza.
• Atributos específicos:
  • min: Data mínima selecionável.
  • max: Data máxima selecionável.

Exemplo:

<form>
  <label for="nascimento">Data de Nascimento:</label><br>
  <input type="date" id="nascimento" name="data_nascimento" min="1900-01-01" max="2026-12-31" required><br><br>

  <label for="evento">Data do Evento:</label><br>
  <input type="date" id="evento" name="data_evento" min="2026-05-28">
</form>

type="tel": número de telefone

Este tipo de campo é projetado para coletar números de telefone.

Características principais:

• Teclado telefônico: Em dispositivos móveis, o teclado muda para um layout numérico com caracteres de telefone (ex: +, -, ()).
• Sem validação de formato: O navegador não valida o formato do número de telefone por padrão, pois existem muitos formatos diferentes no mundo. A validação deve ser feita no servidor ou com JavaScript (ou com o atributo pattern, que veremos mais tarde).

Exemplo:

<form>
  <label for="telefone">Telefone:</label><br>
  <input type="tel" id="telefone" name="telefone_contato" placeholder="(XX) XXXXX-XXXX" required>
</form>

type="url": endereço de URL

Este tipo de campo é para coletar endereços de websites (URLs).

Características principais:

• Validação nativa: O navegador tenta validar se o valor digitado tem o formato básico de uma URL (começa com http:// ou https://, contém um domínio).
• Teclado otimizado: Em dispositivos móveis, o teclado pode incluir caracteres comuns de URL (como /, .com).

Exemplo:

<form>
  <label for="website">Seu Website:</label><br>
  <input type="url" id="website" name="url_website" placeholder="https://www.seusite.com" required>
</form>

type="search": campo de busca

Este tipo de campo é otimizado para formulários de busca.

Características principais:

• Estilo visual: Em alguns navegadores, ele pode ter um estilo visual diferente (ex: um "x" para limpar o campo).
• Semântica: Sinaliza que o campo é para busca, o que pode ser útil para tecnologias assistivas e navegadores.

Exemplo:

<form action="/resultados-busca" method="get">
  <label for="busca">Buscar no site:</label><br>
  <input type="search" id="busca" name="termo_busca" placeholder="Digite sua busca...">
  <button type="submit">Pesquisar</button>
</form>

Resumindo

• type="number": Para números, com controles de incremento/decremento e teclado numérico em mobile. Suporta min, max, step.
• type="date": Para seleção de datas, com seletor de calendário e formato YYYY-MM-DD. Suporta min, max.
• type="tel": Para números de telefone, com teclado telefônico em mobile. Não valida o formato por padrão.
• type="url": Para endereços de URL, com validação nativa e teclado otimizado em mobile.
• type="search": Para campos de busca, com estilo visual e semântica específica.

O uso desses tipos específicos de input melhora a usabilidade, a acessibilidade e a validação inicial dos seus formulários.