Curso de HTML / Adicionar uma indicação aos campos com placeholder

Para exibir uma breve dica dentro de um campo de formulário HTML vazio, use o atributo placeholder. Use label para o nome do campo e value para um valor inicial real. Separar as dicas dos valores evita que o texto de exemplo seja enviado como dados do usuário.

A diferença entre label, placeholder e value

Um label identifica um campo, como "E-mail" ou "Mensagem". Um placeholder é uma pequena dica exibida em um campo quando seu valor está vazio. O atributo value em um input define seu valor inicial.

Por exemplo, "E-mail" funciona como rótulo do campo, enquanto "ex. alex@example.com" funciona como indicação de entrada. Colocar um endereço de exemplo em value em um formulário de contato vazio pode dar a impressão de um endereço real, portanto use placeholder para este exemplo. Um formulário de alteração de conta que exibe um endereço registrado requer, em vez disso, um valor inicial real.

Adicionar um texto indicativo a um campo

Adicione placeholder="Sua dica" à tag de abertura da entrada. Este exemplo mostra um endereço de e-mail como sugestão quando o campo está vazio.

<label for="email">E-mail</label>
<input type="email" id="email" name="email"
       placeholder="ex. alex@example.com">

Faça corresponder o atributo for do rótulo com id da entrada para associá-los. O name identifica o campo nos dados enviados. Esses atributos têm funções diferentes: definir um id não substitui a necessidade de um name. Veja como conectar corretamente as rótulos e entradas para mais exemplos.

A norma HTML dá suporte a placeholder nesses tipos de entrada: text, search, tel, url, email, password e number. Os campos de data não suportam este atributo. Mantenha instruções importantes fora dos campos, inclusive para números, para que permaneçam visíveis durante a digitação. A definição HTML de placeholder e tabela de atributos do tipo input explicam seu escopo.

Adicionar um texto indicativo a uma caixa de texto

O elemento textarea, que aceita várias linhas de texto, também suporta placeholder. Para exibir apenas um placeholder, deixe o espaço entre suas tags de abertura e fechamento vazio. Combine a entrada de várias linhas com um seletor de assunto usando o exemplo completo em Use textarea, select, option e button.

<label for="message">Mensagem</label>
<textarea id="message" name="message" rows="4"
          placeholder="ex. Quando meu pedido chegará?"></textarea>

O valor inicial de uma área de texto vem do texto entre suas tags, e não de um atributo value. No exemplo a seguir, « Por favor, me diga quando meu pedido chegará. » é um valor realmente editável, e não um placeholder.

<textarea name="message">Por favor, me diga quando meu pedido chegará.</textarea>

Os espaços ou a indentação entre as tags da área de texto podem fazer parte do valor. Se uma área de texto que deveria estar vazia não exibir a dica, verifique a presença de texto residual entre as tags. A especificação da área de texto HTML define seu valor inicial e o comportamento do placeholder.

Mantenha as instruções importantes visíveis durante a digitação

Um texto indicativo desaparece quando o usuário insere um valor, portanto, ele não pode substituir o nome do campo ou instruções importantes. Mantenha os nomes como «E-mail» nas rótulos visíveis e coloque as instruções que os usuários precisam durante a digitação em um texto separado.

<label for="email">E-mail (obrigatório)</label>
<input type="email" id="email" name="email"
       placeholder="ex. alex@example.com"
       aria-describedby="email-help" required>
<p id="email-help">Informe o endereço de e-mail para o qual você deseja receber uma resposta.</p>

O atributo de acessibilidade aria-describedby associa a entrada a um texto explicativo adicional. Use como valor o id do elemento que contém a explicação para que a tecnologia assistiva, como um leitor de tela, possa usar essa descrição. Também mantenha a explicação visível, como neste exemplo. O Tutorial W3C de instruções de formulário demonstra essa abordagem.

Exemplo completo: e-mail obrigatório e mensagem opcional

Salve o código a seguir com o nome form-guide.html usando a codificação UTF-8 e abra-o em um navegador. O campo de e-mail é obrigatório e a mensagem é opcional. A cor do placeholder foi escolhida para um fundo branco, e os campos se ajustam à largura do formulário em telas menores. Compare a obrigatoriedade com as restrições de formato e de intervalo utilizando os casos-limite em Validação do formulário com Obrigatório, Tamanho e Limites de Intervalo.

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exemplo de instruções de preenchimento</title>
  <style>
    body {
      margin: 24px;
      color: #222;
      font-family: sans-serif;
      line-height: 1.6;
    }
    form { max-width: 440px; }
    label { display: block; font-weight: bold; }
    input, textarea {
      box-sizing: border-box;
      width: 100%;
      padding: 10px;
      border: 1px solid #777;
      border-radius: 4px;
      font: inherit;
    }
    input::placeholder, textarea::placeholder {
      color: #666;
      opacity: 1;
    }
    .help { margin-top: 4px; }
    button { padding: 8px 20px; font: inherit; }
  </style>
</head>
<body>
  <h1>Fale conosco</h1>
  <form method="get">
    <p>
      <label for="email">E-mail (obrigatório)</label>
      <input type="email" id="email" name="email"
             placeholder="ex. alex@example.com"
             aria-describedby="email-help" required>
    </p>
    <p id="email-help" class="help">Informe o endereço de e-mail para o qual você deseja receber uma resposta.</p>
    <p>
      <label for="message">Mensagem (opcional)</label>
      <textarea id="message" name="message" rows="4"
                placeholder="ex. Quando meu pedido chegará?"></textarea>
    </p>
    <button type="submit">Enviar</button>
  </form>
</body>
</html>

Os dois campos exibem inicialmente placeholders. Assim que você insere um endereço de e-mail, o exemplo desaparece, mas “E-mail (obrigatório)” e a explicação abaixo permanecem visíveis. Apague completamente o campo e o texto do placeholder reaparecerá.

1. Deixe o campo de e-mail vazio e clique em Enviar. O envio normal pelo navegador é bloqueado pela verificação required.
2. Digite abc no campo de e-mail e envie novamente. A verificação do formato type="email" bloqueia o envio.
3. Digite um endereço formatado corretamente como alex@example.com, deixando a mensagem vazia. O formulário pode ser enviado com o campo opcional vazio.

required verifica um valor vazio, e type="email" verifica o formato do e-mail. Um endereço formatado corretamente não prova que o endereço existe. As mensagens de erro e sua aparência variam dependendo do navegador e das configurações de idioma.

Este exemplo não inclui um servidor que registre as mensagens. Como o formulário GET omite action, o envio normal tem como alvo o endereço do documento atual. Quando o arquivo é servido por um servidor web, a cadeia de consulta de sua URL pode exibir os valores enviados. O tratamento de um arquivo aberto localmente pode variar. Um serviço funcional requer um endpoint de servidor e um método de envio apropriado.

O que é enviado: o texto de indicação ou o valor?

O texto indicativo não é enviado como valor de entrada, mas um valor vazio ainda pode ser incluído nos dados enviados. Por exemplo, um campo habilitado com name="email" pode gerar email= durante um envio GET quando está vazio e nenhuma verificação de campo obrigatório impede o envio. Campos sem name, ou com disabled, são omitidos dos dados de formulário normais. Essas distinções seguem as regras HTML para a construção dos dados do formulário .

<form id="compare-form">
  <label for="default-name">Valor inicial</label>
  <input id="default-name" type="text" name="default_name" value="Alex">
  <label for="hint-name">Exemplo indicativo</label>
  <input id="hint-name" type="text" name="hint_name" placeholder="ex. Alex">
</form>

Abra este código em um arquivo HTML separado, e então execute o seguinte código no console de desenvolvimento do seu navegador. FormData constrói uma lista dos nomes dos campos do formulário e de seus valores atuais. Este código inspeciona a lista sem enviá-la a um servidor.

Array.from(new FormData(document.getElementById("compare-form")).entries())

Com os dois campos inalterados, o resultado é o seguinte. "Alex", fornecido via value, está incluído. O texto de exemplo "por ex. Alex" não está incluído.

[["default_name", "Alex"], ["hint_name", ""]]

Digite "Sam" no segundo campo e execute o código novamente: o valor para hint_name se torna "Sam". Se o usuário modificar o primeiro campo, seu valor atual será incluído no lugar do valor inicial.

Mesmo com required, um campo pré-preenchido via value pode passar por um simples controle de valor vazio. A criação de um objeto FormData também não realiza a validação dos campos obrigatórios. Trate as verificações de envio do navegador e a construção da lista de dados como operações separadas, e valide as entradas no lado do servidor em um serviço real.

Quando o texto indicativo está ausente ou difícil de ler

• Verifique se o campo já contém um valor. O valor inicial de um campo de entrada, o conteúdo de uma caixa de texto, o preenchimento automático do navegador ou um script podem impedir a exibição do texto indicativo.
• Verifique o tipo de entrada. Para controles com interfaces especializadas, como campos de data, forneça instruções fora do campo.
• Mantenha a indicação curta. Coloque um exemplo conciso no campo e condições detalhadas em um texto explicativo visível. Não coloque quebras de linha em um texto indicativo de entrada.
• Verifique as cores do texto e do fundo. Uma cor muito clara ou baixa opacidade pode tornar a indicação difícil de ver. Depois de ajustar o estilo, verifique também a legibilidade em uma tela móvel.

Use o pseudo-elemento CSS ::placeholder para estilizar o texto indicativo. CSS (Cascading Style Sheets) controla a aparência de uma página; o exemplo completo o utiliza para definir a cor e a opacidade do texto indicativo. Para mais exemplos de estilo, veja formatação do texto indicativo (em coreano). Use rótulos para os nomes dos campos, textos indicativos para exemplos curtos e descrições separadas para instruções que devem permanecer visíveis.