ASP.NET 3.5 For Dummies®

15.3. Helping Users Understand What to Enter

Web forms with many labels and input areas become busy and overwhelming. You can reduce the clutter by removing labels such as First Name: and putting First Name Goes Here as a text box prompt (Microsoft calls it a watermark), as shown in Figure 15-4.

Figure 15-4. The TextBoxWatermarkExtender prompts for content.

NOTE

The advantage to using the TextBoxWatermarkExtender is that the prefilled prompt text disappears when the text box becomes active (gets the focus in geekspeak).

15.3.1. Enhancing a text box with the TextBoxWatermarkExtender

As with other extenders, the TextBoxWatermarkExtender enhances a built-in control. In this case, it's a TextBox. Follow these steps to implement a watermark on a text box:

1. Add an ASP.NET TextBox control to an AJAX Web form page.

2. From the TextBox control's Tasks menu, choose Add Extender.

3. In the Choose an Extender dialog box, select the TextBoxWatermarkExtender icon and then click OK.

4. Open the TextBox control's Properties window (F4) and locate the extender's node (probably TextBox1_TextBoxWatermarkExtender).

5. Set the WatermarkText property to First Name Goes Here.

At runtime, the prompt text appears and then disappears when you start typing in the text box.

15.3.2. Adding style to a watermark

To avoid confusion, it helps if the watermark text is dramatically different from the text the user enters. You ...