Placeholder em HTML5: Texto de Espaço Reservado — Guia Completo e Tradução Técnica
O atributo placeholder é uma funcionalidade nativa do HTML5 que insere um texto indicativo provisório dentro de campos de formulário, tais como <input> e <textarea>. Esse texto serve para orientar o usuário sobre o conteúdo esperado, melhorando a experiência sem ocupar espaço adicional na interface. Contudo, seu uso exige atenção às boas práticas de acessibilidade e legibilidade para garantir que todos os usuários possam interagir adequadamente com o formulário.
🔑 Pontos Essenciais sobre Placeholder
- Função: Exibe um texto temporário que indica o dado esperado (ex.: “Digite seu nome completo”).
- Elementos compatíveis: Aplicável a
<input>(tipos text, email, password etc.) e<textarea>. - Sintaxe:
<input placeholder="Seu e-mail" /> - Estilização: Personalizável via pseudoclasse
::placeholderno CSS. - Acessibilidade: Nunca substitua o elemento
<label>. O placeholder é um suporte visual e não deve conter instruções críticas. - Legibilidade: Utilize cores com bom contraste e texto conciso para evitar dificuldades de leitura.
- Complementaridade: Funciona como auxílio visual, não como substituto do rótulo ou instrução principal.
🧪 Exemplo Prático
<label for="nome">Nome:</label> <input type="text" id="nome" name="nome" placeholder="Digite seu nome completo" />
🎨 Customização com CSS
input::placeholder {
color: #a9bff9;
font-style: italic;
opacity: 0.85;
}
📌 Boas Práticas para Placeholder
- Use o placeholder apenas como texto de orientação temporária, não como substituto do rótulo.
- Mantenha a mensagem clara, sucinta e objetiva para rápida compreensão.
- Assegure contraste adequado para acessibilidade visual, seguindo WCAG.
- Combine sempre com elementos
<label>para suporte a tecnologias assistivas. - Evite instruções críticas ou complexas dentro do placeholder.
Nenhum comentário:
Postar um comentário