30.04.2025

Implementando Placeholders em asp:TextBox com HTML e CSS

Resumo Rápido

Para ativar o placeholder em ASP:TextBox, você deve usar o atributo placeholder da seguinte forma:

<asp:TextBox ID="SeuTextBoxID" runat="server" placeholder="Digite o texto"></asp:TextBox>

Isso exibirá uma dica sutil em cinza claro no campo de entrada, que desaparecerá quando o usuário começar a digitar. Não se preocupe se o placeholder não aparecer no IntelliSense — ele ainda funcionará!

Uso Avançado de Placeholders

Introdução: Adicionando Placeholders Programaticamente

Se você precisar alterar dinamicamente o texto do placeholder, use AttributeCollection no código do seu manipulador de eventos:

// Programar é como mágica, mas sem as varinhas.
TextBox1.Attributes["placeholder"] = "Digite o texto";

Suporte a Múltiplos Idiomas com meta:resourcekey

Para aplicações internacionais, fornecer traduções para os placeholders é essencial. Localize o texto do placeholder usando meta:resourcekey sincronizando-o com arquivos de recursos:

<asp:TextBox ID="TextBoxLocalizado" runat="server" meta:resourcekey="LocalizedTextBoxResource1"></asp:TextBox>

Atenção aos Detalhes: Compatibilidade entre Navegadores

Garantir uma exibição consistente do placeholder em vários navegadores e dispositivos permitirá que cada usuário aproveite uma interface de qualidade.

Indo Além dos Placeholders Padrões

Estilizando Placeholders com CSS

Estilize seus placeholders elegantemente usando CSS para alinhá-los com sua marca:

::placeholder {
  color: red;
  font-style: italic;
  /* Quem disse que itálico vermelho não pode ser o novo preto? */
}

HTML e CSS: Quando o ASP Não É uma Opção

Para implementar uma funcionalidade semelhante sem asp:TextBox, você pode usar HTML e CSS simples:

<input type="text" id="htmlTextBox" placeholder="Digite o texto" />

Isso proporcionará maior flexibilidade na estilização e no trabalho com CSS e JavaScript.

Placeholders com Valores Padrão

Para informar ao máximo o usuário, use o atributo value como um placeholder. Lembre-se de limpar o valor quando o campo receber o foco:

<asp:TextBox ID="SeuTextBox" runat="server" Text="Placeholder inicial"></asp:TextBox>

Simule o comportamento do placeholder:

document.getElementById('SeuTextBox').addEventListener('focus', function(e) {
  if (this.value === 'Placeholder inicial') {
    this.value = '';
    /* Todas as honras aos placeholders; sem eles, estaríamos perdidos. */
  }
});

Visualização

Considere os placeholders como sutis rótulos indicativos💡, posicionados dentro de um container📦, indicando o que deve ser inserido:

📦 <--- TextBox
💡 <--- Dica do placeholder

<asp:TextBox ID="TextBox1" runat="server" Text="" placeholder="Digite a dica..."></asp:TextBox>

Antes: O TextBox indica de forma discreta a necessidade de entrada.

Depois: O usuário começa a digitar e a dica desaparece sem deixar vestígios.

Checklist de Uso de Placeholders

Melhore a UI/UX

Os placeholders não devem ser apenas estilizados, mas também aprimorar a usabilidade e a clareza da interface, sendo concisos e informativos.

Consistência e Estética

Siga os princípios de design responsivo para garantir uma interação uniforme com os placeholders em diferentes dispositivos e resoluções de tela.

Testes Abrangentes

Teste regularmente suas dicas de placeholder em vários navegadores e dispositivos.

Recursos Úteis

1. Classe TextBox (System.Web.UI.WebControls) | Microsoft Learn — Documentação extensa para o controle TextBox em ASP.NET.
2. Usando o atributo placeholder em ASP.NET Web Forms — Dicas úteis do Stack Overflow sobre trabalhar com placeholders em ASP.NET.
3. Atributo placeholder HTML para input — Um artigo introdutório sobre o uso do atributo placeholder em HTML do W3Schools.
4. Plugin jQuery-placeholder — Funcionalidades adicionais para a funcionalidade de placeholder HTML5 para navegadores mais antigos.
5. WebAIM: Criando Formulários Acessíveis — Diretrizes para criar formulários acessíveis em ASP.NET.
6. Placeholders em campos de formulário podem ser prejudiciais — Insights do Nielsen Norman Group sobre a inaceitabilidade do uso de placeholders em campos de formulário.

Video

Navigation