Step 1: Here we create a simple example of TextBox WaterMark Effect. There are two TextBoxes (txtname, txtage) in our example.
![WaterMark1.gif]()
Step 2:
<input id="txtname" type="text" value="Enter your name here" onblur="ShowName()" />
<input id="txtage" type="text" value="Enter your age here" onblur="ShowAge()" /></td>
![WaterMark2.gif]()
Here we call two functions ShowName() and ShowAge(). These functions are useful as they check the value of the TextBox and if the TextBox has a value it will set it as TextBox value otherwise it will set the default value ("Enter your name Here" or "Enter your age here").
Step 3: Now we declare the JavaScript functions ShowName() and ShowAge():
<script language="JavaScript" type="text/javascript" >
function ShowName() {
var n = document.getElementById('txtname').value;
if (n == "") {
document.getElementById('txtname').value = "Enter your name here";
}
}
function ShowAge() {
var a = document.getElementById('txtage').value;
if (a == "") {
document.getElementById('txtage').value = "Enter your age Here ";
}
}
</script>
![WaterMark3.gif]()
Complete Program:
<head runat="server">
<title></title>
<script language="JavaScript" type="text/javascript" >
function ShowName() {
var n = document.getElementById('txtname').value;
if (n == "") {
document.getElementById('txtname').value = "Enter your name here";
}
}
function ShowAge() {
var a = document.getElementById('txtage').value;
if (a == "") {
document.getElementById('txtage').value = "Enter your age Here ";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table >
<tr>
<td>
Name</td>
<td>
<input id="txtname" type="text" value="Enter your name here" onblur="ShowName()" /></td>
</tr>
<tr>
<td >
Age</td>
<td>
<input id="txtage" type="text" value="Enter your age here" onblur="ShowAge()" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>