Arquivos inputmode mobile html5 - Web-Zoneware https://webzoneware.com/tag/inputmode-mobile-html5/ Mais do que apenas uma academia web. Wed, 21 Oct 2026 03:09:54 +0000 pt-BR hourly 1 https://webzoneware.com/wp-content/uploads/icon-webzoneware-150x150.png Arquivos inputmode mobile html5 - Web-Zoneware https://webzoneware.com/tag/inputmode-mobile-html5/ 32 32 Novos Tipos de Input no HTML5: Guia Completo | Web Academy https://webzoneware.com/web-academy/curso-html/novos-tipos-de-input-html5/ https://webzoneware.com/web-academy/curso-html/novos-tipos-de-input-html5/#respond Wed, 21 Oct 2026 03:09:54 +0000 https://webzoneware.com/?p=29324 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 […]

O post Novos Tipos de Input no HTML5: Guia Completo | Web Academy apareceu primeiro em Web-Zoneware.

]]> 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.

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">

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);
}

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="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.

O post Novos Tipos de Input no HTML5: Guia Completo | Web Academy apareceu primeiro em Web-Zoneware.

]]> https://webzoneware.com/web-academy/curso-html/novos-tipos-de-input-html5/feed/ 0