Lição 31 de 50

Novos Tipos de Input no HTML5: Guia Completo | Web Academy

Antes do advento do HTML5, a coleta de dados na web era rudimentar: praticamente qualquer campo de formulário resumia-se ao genérico type="text" ou type="password". Se uma aplicação necessitava de um e-mail válido, de uma data de agendamento ou de um número de telefone, o desenvolvedor era obrigado a importar bibliotecas externas pesadas e criar scripts de validação complexos. O HTML5 revolucionou a experiência do usuário ao introduzir mais de 13 novos tipos semânticos de entrada para o elemento <input>. Além de validarem os dados nativamente no cliente, esses tipos instruem os navegadores de smartphones a abrir o teclado virtual mais adequado, reduzindo o atrito de digitação e aumentando as conversões.

📑 Índice do Conteúdo

1. O Fim do Input Genérico: Por Que Usar Tipos Específicos?

Utilizar o tipo correto de entrada não é apenas uma boa prática semântica; é uma exigência crítica de usabilidade móvel e acessibilidade:

Abertura de Teclados Especializados em Celulares: Ao tocar em um campo type="email", o teclado do smartphone exibe imediatamente as teclas @ e .com. Ao tocar em type="tel" ou type="number", o teclado numérico de discagem é ativado sem exigir que o usuário alterne manualmente entre telas de letras e números.
Validação Nativa sem JavaScript: O navegador impede o envio do formulário caso o dado digitado não coincida com o formato esperado (por exemplo, avisando: “Por favor, inclua um ‘@’ no endereço de e-mail”).
Controles Gráficos Integrados ao Sistema Operacional: Campos como type="date" e type="color" abrem calendários e paletas de cores nativas do iOS, Android e Windows sem a necessidade de plugins pesados.

2. Guia dos Principais Novos Tipos de Entrada

Conheça os comportamentos, validações e teclados acionados por cada tipo de entrada do HTML5:

Tipo de Entrada	Validação Nativa	Comportamento em Smartphones	Atributos Chave
`type="email"`	Exige formato de e-mail válido (usuário@domínio).	Abre teclado com as teclas `@` e `.` em destaque.	`multiple` (permite vários e-mails separados por vírgula).
`type="date"`	Garante o formato ISO 8601 (`AAAA-MM-DD`).	Abre a roleta de calendário nativa do sistema móvel.	`min`, `max` (bloqueia datas passadas ou futuras).
`type="tel"`	Sem regex rígido (aceita traços, parênteses e código de país).	Abre o teclado numérico de chamada telefônica.	`pattern="[0-9]{2} [0-9]{5}-[0-9]{4}"`.
`type="number"`	Bloqueia a inserção de letras; valida valores numéricos.	Abre o teclado de dígitos com pontos e vírgulas.	`min`, `max`, `step` (define o incremento).
`type="url"`	Exige protocolo completo (`https://` ou `http://`).	Abre teclado com atalhos de barra (`/`) e extensões (`.com`).	`placeholder="https://exemplo.com"`.
`type="color"`	Retorna um código hexadecimal de 6 dígitos (`#RRGGBB`).	Abre o seletor visual nativo de cores (Colorpicker).	`value="#0284c7"` (define a cor inicial).
`type="range"`	Retorna um valor dentro de um intervalo contínuo.	Exibe uma barra deslizante sensível ao toque (Slider).	`min="0"`, `max="100"`, `step="5"`.
`type="search"`	Campo otimizado para consultas.	Exibe o botão de “Buscar” no teclado e um ícone “X” para limpar o campo.	`autocomplete="on"`.
`type="time"`	Exige formato de horário (`HH:MM` de 24 horas).	Abre a roleta de seleção de horas e minutos.	`min="08:00"`, `max="18:00"`.

3. O Atributo Especial inputmode: Ajuste Fino para Telas Sensíveis ao Toque

Em alguns casos, usar type="number" pode ser inconveniente no desktop porque o navegador desenha setinhas de incremento (steppers) dentro do campo — algo indesejado para números de cartão de crédito, CEP ou CPF.

Para resolver isso, o HTML5 introduziu o atributo inputmode. Ele permite manter o campo como texto comum, mas forçar a abertura do teclado mobile desejado:

HTML5 — Uso de inputmode para Teclados Numéricos sem Setinhas
inputmode-exemplo.html

HTML 7 linhas

<!-- Campo de CEP: texto comum, mas abre teclado numérico no celular -->
<label for="cep">CEP de Entrega:</label>
<input type="text" id="cep" name="cep" inputmode="numeric" maxlength="9" placeholder="00000-000">
 
<!-- Campo de Código de Autenticação 2FA -->
<label for="token">Código de Segurança (6 dígitos):</label>
<input type="text" id="token" name="token" inputmode="numeric" pattern="[0-9]{6}" autocomplete="one-time-code">

<!-- Campo de CEP: texto comum, mas abre teclado numérico no celular -->
<label for="cep">CEP de Entrega:</label>
<input type="text" id="cep" name="cep" inputmode="numeric" maxlength="9" placeholder="00000-000">
<!-- Campo de Código de Autenticação 2FA -->
<label for="token">Código de Segurança (6 dígitos):</label>
<input type="text" id="token" name="token" inputmode="numeric" pattern="[0-9]{6}" autocomplete="one-time-code">

4. Estilizando Estados de Validação com Pseudo-Classes CSS

Quando você utiliza os novos tipos de entrada e atributos como required, o CSS permite aplicar estilos visuais imediatos conforme o usuário digita:

CSS3 — Feedback Visual Imediato com :valid e :invalid
validacao-estilos.css

CSS 10 linhas

/* Campo que foi preenchido de forma válida */
input:valid {
    border-color: #10b981; /* Verde esmeralda */
}
 
/* Campo que contém dados incorretos após a interação */
input:user-invalid {
    border-color: #ef4444; /* Vermelho rubi */
    background-color: rgba(239, 68, 68, 0.05);
}

/* Campo que foi preenchido de forma válida */
input:valid {
border-color: #10b981; /* Verde esmeralda */
}
/* Campo que contém dados incorretos após a interação */
input:user-invalid {
border-color: #ef4444; /* Vermelho rubi */
background-color: rgba(239, 68, 68, 0.05);
}

5. Exemplo Prático: Formulário Moderno de Agendamento no Playground IDE

O exemplo abaixo reúne múltiplos tipos de entrada do HTML5 em um formulário responsivo de agendamento de consultoria:

HTML5 + CSS3 — Formulário de Agendamento com Novos Tipos de Entrada
formulario-agendamento.html

HTML 126 linhas

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agendamento com Novos Inputs HTML5</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: #0f172a;
            color: #f8fafc;
            padding: 30px;
            margin: 0;
        }
 
        .card-form {
            max-width: 580px;
            margin: 0 auto;
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 16px;
            padding: 32px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        }
 
        .campo {
            margin-bottom: 20px;
        }
 
        label {
            display: block;
            font-size: 13px;
            font-weight: 700;
            color: #94a3b8;
            margin-bottom: 6px;
        }
 
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="date"],
        input[type="time"] {
            width: 100%;
            padding: 10px 14px;
            background: #0b1120;
            border: 1px solid #334155;
            border-radius: 8px;
            color: #f8fafc;
            font-size: 14px;
            box-sizing: border-box;
            transition: border-color 0.15s ease;
        }
 
        input:focus {
            outline: none;
            border-color: #38bdf8;
            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
        }
 
        .linha-dupla {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
 
        .btn-enviar {
            width: 100%;
            background: #0284c7;
            color: white;
            border: none;
            padding: 12px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-top: 10px;
        }
 
        .btn-enviar:hover {
            background: #0369a1;
            box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4);
        }
    </style>
</head>
<body>
 
    <main class="card-form">
        <header>
            <h2 style="margin-top:0; color:#38bdf8;">Agendar Consultoria Web</h2>
            <p style="color:#94a3b8; font-size:14px; margin-bottom:24px;">Preencha os dados com suporte aos validadores nativos do HTML5:</p>
        </header>
 
        <form action="#" method="POST">
            <div class="campo">
                <label for="nome">Nome Completo:</label>
                <input type="text" id="nome" name="nome" required placeholder="Digite seu nome">
            </div>
 
            <div class="campo">
                <label for="email">E-mail Corporativo:</label>
                <input type="email" id="email" name="email" required placeholder="[email protected]">
            </div>
 
            <div class="linha-dupla">
                <div class="campo">
                    <label for="data">Data Desejada:</label>
                    <input type="date" id="data" name="data" required min="2026-10-21">
                </div>
                <div class="campo">
                    <label for="horario">Horário:</label>
                    <input type="time" id="horario" name="horario" required min="09:00" max="18:00">
                </div>
            </div>
 
            <div class="campo">
                <label for="telefone">WhatsApp / Celular:</label>
                <input type="tel" id="telefone" name="telefone" inputmode="tel" placeholder="(11) 99999-9999">
            </div>
 
            <button type="submit" class="btn-enviar">Confirmar Agendamento</button>
        </form>
    </main>
 
</body>
</html>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agendamento com Novos Inputs HTML5</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #0f172a;
color: #f8fafc;
padding: 30px;
margin: 0;
}
.card-form {
max-width: 580px;
margin: 0 auto;
background: #1e293b;
border: 1px solid #334155;
border-radius: 16px;
padding: 32px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.campo {
margin-bottom: 20px;
}
label {
display: block;
font-size: 13px;
font-weight: 700;
color: #94a3b8;
margin-bottom: 6px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"] {
width: 100%;
padding: 10px 14px;
background: #0b1120;
border: 1px solid #334155;
border-radius: 8px;
color: #f8fafc;
font-size: 14px;
box-sizing: border-box;
transition: border-color 0.15s ease;
}
input:focus {
outline: none;
border-color: #38bdf8;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}
.linha-dupla {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.btn-enviar {
width: 100%;
background: #0284c7;
color: white;
border: none;
padding: 12px;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 10px;
}
.btn-enviar:hover {
background: #0369a1;
box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4);
}
</style>
</head>
<body>
<main class="card-form">
<header>
<h2 style="margin-top:0; color:#38bdf8;">Agendar Consultoria Web</h2>
<p style="color:#94a3b8; font-size:14px; margin-bottom:24px;">Preencha os dados com suporte aos validadores nativos do HTML5:</p>
</header>
<form action="#" method="POST">
<div class="campo">
<label for="nome">Nome Completo:</label>
<input type="text" id="nome" name="nome" required placeholder="Digite seu nome">
</div>
<div class="campo">
<label for="email">E-mail Corporativo:</label>
<input type="email" id="email" name="email" required placeholder="seu@empresa.com">
</div>
<div class="linha-dupla">
<div class="campo">
<label for="data">Data Desejada:</label>
<input type="date" id="data" name="data" required min="2026-10-21">
</div>
<div class="campo">
<label for="horario">Horário:</label>
<input type="time" id="horario" name="horario" required min="09:00" max="18:00">
</div>
</div>
<div class="campo">
<label for="telefone">WhatsApp / Celular:</label>
<input type="tel" id="telefone" name="telefone" inputmode="tel" placeholder="(11) 99999-9999">
</div>
<button type="submit" class="btn-enviar">Confirmar Agendamento</button>
</form>
</main>
</body>
</html>

Teste este formulário interativo e experimente as validações nativas:
⚡ Testar no Playground IDE

6. Boas Práticas de Engenharia e Segurança

Validação no Cliente Nunca Substitui o Backend: A validação nativa do HTML5 serve para proporcionar uma experiência fluida ao usuário. No entanto, usuários maliciosos podem desativá-la facilmente via DevTools ou enviar dados via cURL. Sempre valide e sanitize todos os dados novamente no servidor (PHP, Node.js, Python).
Sempre Defina o Atributo name: Campos sem o atributo name não são incluídos no pacote de dados enviado na requisição HTTP.
Formatadores de Código: Para manter a sintaxe de seus formulários limpa e sem tags mal-fechadas, utilize o HTML Cleaner & Formatador do Web-ZoneWare.

🚀

Próximo Passo Didático: Na Lição 32: Novos Elementos de Formulário, conheceremos as tags estruturais que acompanham os inputs: <datalist> (autocompletar nativo sem JavaScript), <output> para cálculos dinâmicos, <progress> para barras de carregamento e <meter> para indicadores de nível e capacidade.