Marca d’água no campo: o "Seu e-mail" que acaba gravado no banco

A gráfica olha a planilha de pedidos de orçamento do mês e encontra 37 linhas com o telefone "Seu telefone" e 12 com a empresa "Nome da empresa". Ninguém digitou isso. O formulário antigo usava uma marca d’água feita com o próprio value do campo, e quem não clicou no campo enviou a dica como se fosse dado. A resposta curta: dica nunca deve ser valor. Use label visível para dizer o que é o campo, placeholder nativo só para um exemplo de formato, e recuse no servidor qualquer valor igual a uma dica conhecida.

O problema do placeholder no lugar do rótulo, do ponto de vista de leitura e acessibilidade, está detalhado em placeholder não substitui o rótulo. Este guia trata do outro lado: a marca d’água que vira dado, como migrar o formulário antigo e como limpar o que já entrou.

Por que a dica acaba no banco

Antes do atributo placeholder existir em todos os navegadores, a técnica popular era esta: colocar o texto de dica no value, apagar quando o campo recebe foco e devolver quando ele perde o foco vazio.

<input type="text" name="telefone" value="Seu telefone"
       onfocus="if (this.value === 'Seu telefone') this.value = '';"
       onblur="if (this.value === '') this.value = 'Seu telefone';">

Para o navegador, aquilo não é dica. É o valor do campo. Se a pessoa nunca foca nele, porque pulou um campo opcional ou porque o preenchimento automático completou só os outros, o formulário envia "Seu telefone". Se o JavaScript falha ou carrega tarde, o comportamento some e o texto fica lá. E a validação de "campo obrigatório" no servidor não pega nada, porque o campo não está vazio.

O placeholder nativo resolve essa parte: ele é desenhado pelo navegador, nunca é enviado e some quando há valor. Mas ele cria outro problema quando usado sozinho. Assim que a pessoa digita, a única instrução do campo desaparece, e no meio do preenchimento ela já não sabe se aquele retângulo era e-mail ou usuário.

Como migrar o formulário antigo

1. Procure no código os padrões da marca d’água: onfocus e onblur que comparam o value, plugins de placeholder para navegadores antigos e campos com value preenchido no HTML sem motivo.
2. Tire o texto de dica do value. O campo começa vazio.
3. Coloque um label visível, ligado ao campo pelo for, com o nome do dado: "Telefone".
4. Se ajudar, use placeholder com um exemplo de formato, não com o nome do campo: "(11) 98888-7777".
5. Mova instruções importantes para um texto fixo abaixo do campo, ligado com aria-describedby.
6. Ajuste a cor do placeholder para ter contraste legível.
7. No servidor, trate valores iguais a dicas conhecidas como vazios.

O campo depois da migração

<label for="telefone">Telefone</label>
<input type="tel" id="telefone" name="telefone" autocomplete="tel-national"
       placeholder="(11) 98888-7777" aria-describedby="telefone-dica">
<p id="telefone-dica">Usamos só para tirar dúvidas sobre o orçamento.</p>

<label for="empresa">Empresa (opcional)</label>
<input type="text" id="empresa" name="empresa" autocomplete="organization">

input::placeholder {
  color: #767676;
  opacity: 1;
}

O cinza #767676 sobre fundo branco fica logo acima de 4,5 para 1, a razão de contraste que o WCAG pede para texto comum. O opacity: 1 existe porque alguns navegadores aplicam transparência no placeholder por padrão, o que clareia a cor que você escolheu. Repare que o campo "Empresa" não tem placeholder nenhum: nem todo campo precisa de exemplo, e "Nome da empresa" dentro dele não acrescenta nada ao rótulo.

O texto de apoio abaixo do telefone continua visível enquanto a pessoa digita e é lido pelo leitor de tela junto com o rótulo. É o lugar certo para instrução, finalidade do dado ou regra de formato. A finalidade, aliás, é a melhor forma de justificar um campo; veja campo a mais no formulário pede uma razão.

Rótulo flutuante é aceitável, com condições

O padrão em que o rótulo começa dentro do campo e sobe quando a pessoa digita só funciona se for um label de verdade, que continua visível depois de subir, com tamanho legível. Se ele é um placeholder animado que some, é a mesma marca d’água com outra roupa.

Como limpar os dados que gravaram a dica

Primeiro, meça. Liste as dicas que o formulário antigo usava e conte quantas linhas têm exatamente esses valores.

SELECT 'telefone' AS campo, COUNT(*) AS linhas FROM orcamentos WHERE telefone = 'Seu telefone'
UNION ALL
SELECT 'empresa', COUNT(*) FROM orcamentos WHERE empresa = 'Nome da empresa'
UNION ALL
SELECT 'email', COUNT(*) FROM orcamentos WHERE email = 'Seu e-mail';

Depois de um backup, troque esses valores por NULL, campo a campo, com o mesmo WHERE. Linhas em que o e-mail e o telefone eram ambos a dica não têm contato nenhum; decida com a equipe se valem algo antes de apagar. No servidor, impeça que volte:

<?php
const DICAS_ANTIGAS = ['Seu telefone', 'Nome da empresa', 'Seu e-mail', 'Seu nome'];

function valorOuVazio(?string $valor): string
{
    $valor = trim($valor ?? '');
    return in_array($valor, DICAS_ANTIGAS, true) ? '' : $valor;
}

$telefone = valorOuVazio($_POST['telefone'] ?? null);
$empresa = valorOuVazio($_POST['empresa'] ?? null);

A lista existe porque página antiga em cache, formulário copiado em outro site e robô que reenviava o HTML velho continuam mandando a dica por um tempo depois da migração.

Erros comuns

• Dica dentro do value. Quem não toca no campo envia a dica, e o cadastro fica cheio de "Seu telefone".
• Placeholder como único nome do campo. O nome desaparece na primeira letra e a pessoa preenche o campo errado.
• Placeholder com o nome do campo em vez de um exemplo. "E-mail" escrito em cinza dentro de um campo rotulado "E-mail" só repete, e ainda parece um valor já preenchido.
• Cinza claro demais. Abaixo de 4,5 para 1 de contraste, o exemplo fica ilegível para muita gente, principalmente no sol.
• Regra de formato só no placeholder. A instrução some enquanto a pessoa digita, exatamente quando ela precisava dela.
• Migrar o HTML e não limpar o banco. Relatórios e campanhas continuam usando "Nome da empresa" como cliente.

Checklist

• Nenhum campo tem texto de dica no value.
• Todo campo tem label visível ligado pelo for.
• O placeholder, quando existe, mostra um exemplo de formato.
• Instruções que importam ficam num texto fixo com aria-describedby.
• O placeholder tem contraste de pelo menos 4,5 para 1.
• O banco não tem linhas com as dicas antigas como valor.
• O servidor trata dica conhecida como campo vazio.

Preencha metade de um formulário do seu sistema, desvie o olhar por alguns segundos e volte. Você ainda sabe o que é cada campo sem apagar o que digitou? E quantas linhas no seu banco têm, como valor, a frase que deveria ser só uma dica?