Introduction

In This Tutorial we will learn how to create and use an AJAX Textbox Watermark Control. The AJAX Textbox Watermark Control is a simple control that allows greyed out text to be displayed over an empty Textbox. It is a very popular control on web forms helping to show people what to place in Textboxes without using Labels. It is a very simple setup, but it makes a site look more professional.

Step 1. Creating the Form and Controls

1. Create a new Web Form called “Default.aspx”
2. Add a TextBox to the Form and name it “TextBox1″
3. Add a Script Manager to the Form (always do this for AJAX applications)
3. Click the Smart Tag on the Textbox and choose add extender
4. Choose the Textbox Watermark Extender
5. Go into the Code View and add this Line into the Extender Tag
WatermarkText=”Enter Name”
6. Once Complete the code should look like below.

Step 2. Run the Application
When you run the Application you should notice that a Textbox appears on the screen and it displays the Text “Enter Name”.

Before/After Focus when empty:

While focused:

It may appear that there is Text in the Textbox, but upon focusing the Textbox it disappears. Also, when you focus on another Item while the Textbox is empty it will show the Watermark again, thus eliminating the need for Labels to Label your Textboxes.

Conclusion

In this Tutorial we learned how to create, use and setup a Textbox Watermark Extender. This is a very simple setup that can make your websites look much better and more professional in a matter of minutes.