⚡ Curso de HTML • Web-ZoneWare

Novos Elementos de Formulário no HTML5 | Web Academy

Lição 32 de 50

Novos Elementos de Formulário no HTML5 | Web Academy

Além de revolucionar os campos de entrada com novos tipos de <input>, o HTML5 introduziu uma nova geração de elementos semânticos de suporte e exibição de dados para formulários. Componentes interativos que no passado exigiam dezenas de kilobytes de bibliotecas externas de JavaScript — como sugestões preditivas de autocompletar (autocomplete), mostradores dinâmicos de cálculos matemáticos, barras de progresso de upload e medidores escalares de capacidade — contam agora com suporte nativo através das tags <datalist>, <output>, <progress> e <meter>.

1. O Elemento <datalist>: Autocompletar Nativo sem JavaScript

O elemento <datalist> fornece uma lista suspensa de opções pré-definidas para um campo <input> convencional. A vinculação é estabelecida através do atributo list no input, apontando para o id do <datalist>:

HTML5 — Campo de Busca com Autocomplete Nativo
datalist-exemplo.html
HTML 11 linhas 
<label for="navegador">Escolha seu navegador preferido:</label>
<input type="text" id="navegador" name="navegador" list="lista-navegadores" placeholder="Digite para buscar...">
 
<datalist id="lista-navegadores">
    <option value="Google Chrome">
    <option value="Mozilla Firefox">
    <option value="Apple Safari">
    <option value="Microsoft Edge">
    <option value="Brave Browser">
    <option value="Opera">
</datalist>
💡

A Diferença Crucial entre <select> e <datalist>:

• No <select>, o usuário fica restrito estritamente às opções listadas; ele não pode digitar nada além do que está cadastrado.

• No <datalist>, o usuário é totalmente livre para digitar um valor inédito ou selecionar uma das sugestões que se filtram automaticamente conforme ele digita.

2. O Elemento <output>: Exibição de Resultados em Tempo Real

O elemento <output> representa semanticamente o resultado de um cálculo ou a resposta de uma interação do usuário dentro de um formulário. Ele aceita o atributo for (que lista os IDs dos inputs utilizados no cálculo) e se integra ao evento nativo oninput do formulário sem exigir frameworks:

HTML5 — Simulador com Cálculo em Tempo Real via output
calculadora-output.html
HTML 10 linhas 
<form oninput="resultado.value = parseInt(valor.value) * parseInt(quantidade.value)">
    <label for="valor">Preço Unitário (R$):</label>
    <input type="number" id="valor" value="50" min="1"> &times;
 
    <label for="quantidade">Quantidade:</label>
    <input type="number" id="quantidade" value="3" min="1"> =
 
    <strong>Total R$: </strong>
    <output id="resultado" name="resultado" for="valor quantidade">150</output>
</form>

3. O Elemento <progress>: Acompanhamento de Tarefas

O elemento <progress> serve para representar visualmente a conclusão de uma tarefa em andamento que possui um término previsto (como o percentual de um upload de arquivo, uma instalação ou as etapas de um assistente cadastral):

HTML5 — Barras de Progresso Determinadas e Indeterminadas
progress-exemplo.html
HTML 7 linhas 
<!-- 1. Progresso Determinado (70% concluído) -->
<label for="progresso-upload">Enviando arquivo:</label>
<progress id="progresso-upload" value="70" max="100">70%</progress>
 
<!-- 2. Progresso Indeterminado (sem atributo value - animação de carregamento) -->
<label for="processamento">Aguardando resposta do servidor:</label>
<progress id="processamento">Carregando...</progress>

4. O Elemento <meter>: Medição Escalar e Faixas Críticas

Ao contrário do <progress>, o elemento <meter> não representa uma tarefa em progresso, mas sim um valor escalar estático dentro de uma faixa conhecida, ou um valor fracionário (como uso de espaço em disco, porcentagem de bateria, força de uma senha ou pontuação em uma prova).

O recurso mais poderoso do <meter> é a capacidade de colorir automaticamente o indicador (Verde, Amarelo ou Vermelho) de acordo com limites definidos pelos atributos low, high e optimum:

HTML5 — Medidor de Capacidade com Alertas Coloridos Nativos
meter-exemplo.html
HTML 11 linhas 
<!-- Exemplo: Uso de Armazenamento do Servidor -->
<label for="disco">Espaço em Disco Utilizado (8.5 GB de 10 GB):</label>
<meter id="disco" 
       value="8.5" 
       min="0" 
       max="10" 
       low="5" 
       high="8" 
       optimum="3">
    85%
</meter>

No exemplo acima, como o valor ideal (optimum="3") é baixo e o valor atual (8.5) ultrapassou o limite superior (high="8"), o navegador renderiza o medidor em vermelho de alerta automaticamente.

5. Tabela Comparativa: <progress> vs <meter>

Utilize a tabela a seguir para nunca mais confundir os dois componentes visuais:

Critério Elemento <progress> Elemento <meter>
Conceito Central Uma ação/tarefa dinâmica em andamento em direção a 100%. Uma medição estática de capacidade, cota ou nível.
Exemplo Típico Download de arquivo, etapas de checkout (1 de 4). Uso de memória RAM, nível de bateria, nota de avaliação.
Atributos Especiais Apenas value e max. min, max, low, high e optimum.
Estado Indeterminado? Sim (ao omitir o atributo value). Não (sempre exige um valor numérico válido).

6. Exemplo Prático: Painel Interativo no Playground IDE

O exemplo abaixo constrói um simulador financeiro combinando <datalist>, <output> reativo e indicadores de cota com <meter>:

HTML5 + CSS3 — Simulador Completo com Novos Elementos de Formulário
painel-financeiro.html
HTML 119 linhas 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Painel Interativo de Crédito Web Academy</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: #0f172a;
            color: #f8fafc;
            padding: 30px;
            margin: 0;
        }
 
        .card-painel {
            max-width: 600px;
            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: 22px;
        }
 
        label {
            display: block;
            font-size: 13px;
            font-weight: 700;
            color: #94a3b8;
            margin-bottom: 8px;
        }
 
        input[type="text"], input[type="range"] {
            width: 100%;
            box-sizing: border-box;
        }
 
        input[type="text"] {
            padding: 10px 14px;
            background: #0b1120;
            border: 1px solid #334155;
            border-radius: 8px;
            color: #f8fafc;
            font-size: 14px;
        }
 
        .resultado-destaque {
            background: #0284c7;
            padding: 16px;
            border-radius: 10px;
            text-align: center;
            font-size: 18px;
            margin-top: 10px;
        }
 
        output {
            font-weight: 800;
            font-size: 24px;
            color: #ffffff;
        }
 
        meter, progress {
            width: 100%;
            height: 18px;
            border-radius: 8px;
        }
    </style>
</head>
<body>
 
    <main class="card-painel">
        <header>
            <h2 style="margin-top:0; color:#38bdf8;">Simulador de Empréstimo Inteligente</h2>
            <p style="color:#94a3b8; font-size:14px;">Demonstração das tags datalist, output e meter em sincronia:</p>
        </header>
 
        <form oninput="parcela.value = (parseInt(valor.value) / parseInt(meses.value)).toFixed(2)">
            <!-- 1. Uso de Datalist -->
            <div class="campo">
                <label for="finalidade">Finalidade do Recurso (com Autocomplete):</label>
                <input type="text" id="finalidade" name="finalidade" list="opcoes-finalidade" placeholder="Digite ou escolha da lista...">
                <datalist id="opcoes-finalidade">
                    <option value="Expansão de Empresa">
                    <option value="Reforma de Imóvel">
                    <option value="Aquisição de Equipamentos">
                    <option value="Capital de Giro">
                </datalist>
            </div>
 
            <!-- 2. Sliders e Output -->
            <div class="campo">
                <label for="valor">Valor Desejado: R$ <span id="display-valor">10000</span></label>
                <input type="range" id="valor" name="valor" min="1000" max="50000" step="1000" value="10000" oninput="document.getElementById('display-valor').textContent = this.value">
            </div>
 
            <div class="campo">
                <label for="meses">Prazo em Meses: <span id="display-meses">12</span>x</label>
                <input type="range" id="meses" name="meses" min="6" max="48" step="6" value="12" oninput="document.getElementById('display-meses').textContent = this.value">
            </div>
 
            <div class="resultado-destaque">
                Valor da Parcela Estimada: R$&nbsp;<output id="parcela" name="parcela" for="valor meses">833.33</output>
            </div>
 
            <!-- 3. Uso de Meter -->
            <div class="campo" style="margin-top: 24px;">
                <label for="risco">Comprometimento do Limite de Crédito:</label>
                <meter id="risco" value="45" min="0" max="100" low="30" high="70" optimum="20">45%</meter>
            </div>
        </form>
    </main>
 
</body>
</html>
Teste este simulador interativo com Datalist e Output no Playground:
⚡ Testar no Playground IDE

7. Boas Práticas e Acessibilidade

  • Sempre Forneça Texto de Fallback Dentro das Tags: Dentro de <progress>70%</progress> e <meter>85%</meter>, escreva o percentual ou valor em texto bruto. Se o navegador do usuário for extremamente antigo ou for um sintetizador de voz sem suporte ao elemento, ele lerá o texto contido internamente.
  • Associe Labels a Todos os Componentes: Tanto o <progress> quanto o <meter> e o <output> devem possuir seus próprios elementos <label for="..."> explicativos.
  • Valide a Formatação Semântica: Para auditar se seus formulários possuem estrutura HTML5 rigorosa, utilize o HTML Cleaner & Formatador do Web-ZoneWare.
🚀

Próximo Passo Didático: Na Lição 33: Atributos de Validação de Form, exploraremos o arsenal nativo de validação do HTML5: required, pattern (expressões regulares no HTML), min, max, step, maxlength, minlength e como interceptar mensagens de erro personalizadas com a API de Constraint Validation.
Rolar para cima