A watermark refers to text or a graphic that appears behind text. It shows the real value putting in textbox to tell the user.

How we implement the watermark text

Step 1: Firstly we download the file “jquery-1.4.4.min.js” fromhttp://docs.jquery.com/Downloading_jQuery. And include in head section.

Step2: Using this css for displaying watermark text

.watermarkText

{

    color: silver;

    font-style: italic;

}

Step3: Using Java Script code in head section as

<script>
$(document).ready(function() {
    // Define what happens when the textbox comes under focus
    // Remove the watermark class and clear the box
   $("#txtName").focus(function() {
        $(this).filter(function() {
            // We only want this to apply if there's not
            // something actually entered
        return $(this).val() == "" || $(this).val() == "User Name"
        }).removeClass("watermarkText ").val("");
    });
    // Define what happens when the textbox loses focus
    // Add the watermark class and default text
    $("#txtName").blur(function() {
        $(this).filter(function() {
            // We only want this to apply if there's not
            // something actually entered
            return $(this).val() == ""
        }).addClass("watermarkText").val("User Name");
    });
});
</script>

Step4: Using textbox control within form tag
<asp:TextBox ID="txtName" runat="server" CssClass="watermarkText" value="User Name"></asp:TextBox>

Check this simple code for using watermark functionality in textbox.