Removing text from Textbox on giving Focus

Webpage should be designed such that the elements/controls occupy less space in any webpage for improving user-friendliness, especially in Home page of any website.

This can be achieved in many different ways. One way is instead of displaying the Labels of Textbox separately, we can display them within the Textbox itself. On focusing the textbox, this label text can be removed.

For example consider the below login page.


The Username and Password labels are getting displayed in respective Textbox before giving focus to them.
On focusing the Textbox, the Label Text will be removed from the textbox to allow the user to enter required text.

Find below the sample code to achieve this.

    
<table>   
   <tr>     
    <td><input type="text" name="username" value="Username" onBlur="if(this.value=='') this.value='Username';" onFocus="if(this.value=='Username') this.value='';" ></td>
   </tr>
   <tr>
     
     <td><input type="password" name="password" value="Password" onBlur="if(this.value=='') this.value='Password';" onFocus="if(this.value=='Password') this.value='';"></td>
   </tr>


</table>

More Articles...