How do I put hint in a asp:textbox

html

responsive-design

css

placeholder-engineering

byNikita Barsukov·Oct 25, 2024

To include a hint in your ASP:TextBox, leverage the placeholder attribute like so:

<asp:TextBox ID="YourTextBoxID" runat="server" placeholder="Enter text here"></asp:TextBox>

This shows a subtle, greyed-out hint within the box, vanishing once the user interacts with the field. Even if the placeholder doesn't appear in IntelliSense, don't fret — it's still hard at work!

Augmenting input hints

Primer: Programmatically adding placeholders

Sometimes, you need to conditionally assign placeholder text. Use the AttributeCollection in the code-behind for these tricky cases:

// When coding feels like magic without a magic wand.
TextBox1.Attributes["placeholder"] = "Enter text here";

Language gymnastics with meta:resourcekey

International apps need to speak the users' language. Localize your placeholder text with meta:resourcekey. Remember to pair it with the corresponding resource files:

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

Considerate coding: cross-browser compatibility

Ensure your placeholder attribute is fair and square across all browsers and devices users might be using. Because hey, everyone deserves a decent user experience, right?

Beyond mere placeholders

Dressing up placeholders with CSS

Use CSS to give your placeholders a sartorial makeover that reinforce your branding:

::placeholder {
  color: red;
  font-style: italic;
  /* Because someone said italic red is the new black! */
}

HTML and CSS: When ASP isn't in-house

Even outside the asp:TextBox realm, you can establish similar functionality using just good ol' HTML and CSS:

<input type="text" id="htmlTextBox" placeholder="Enter text here" />

This gives you the freedom to fine-tune interactivity and styles with CSS and JavaScript.

Hints with preliminary value

Want to be extra helpful? Use the value attribute as an auxiliary hint. Just remember to clear it when focus is received:

<asp:TextBox ID="YourTextBox" runat="server" Text="Initial hint"></asp:TextBox>

Then, emulate placeholder behavior:

document.getElementById('YourTextBox').addEventListener('focus', function(e) {
  if(this.value === 'Initial hint') {
    this.value = '';
    /* Shoutout to all the hints out there. You're the real MVP. */
  }
});