You might have come across many websites that have fields that display the label of the filed within the filed. The most common among this is the search box. Many websites also uses this technique with the registration forms and other forms. When user selects a field to enter text, the label disappears. The advantage of this technique is that it conserve space and also make the website design cleaner.

There are many techniques that can be used to achieve this. Here I will take you through one way of doing it. I will demonstrate two types of fields that use this technique. One is a regular textbox and the other is a password textbox that switches between regular display characters when displaying label and masked characters when entering password. This simulates a login form where the username and password fields are prefilled with their associated labels and the labels disappear once the user click the field to enter text. The password field changes display to the expected password character masking mode.

There are two javascript functions that are used to get the job done. One function (HideLabel) hides the label when the textbox get the focus, either when the user clicks the textbox to enter text or by any other means. The second function (ShowLabel) show the label of the field (relabel) if the user leave the textbox empty and move on.

function HideLabel(txtField){ if(’username’){ if(txtField.value==’Username’) txtField.value = ”; else; }else if(’password’){ if(txtField.value==’Password’){ txtField.value = ”; txtField.type = ‘password’; } else{ txtField.type = ‘password’;; } }}function ShowLabel(txtField){ if(’username’){ if(txtField.value.trim()==”) txtField.value = ‘Username’; }else if(’password’){ if(txtField.value.trim()==”){ txtField.value = ‘Password’; txtField.type = ‘text’; } }}

Now finally we need to call the appropriate functions at appropriate time. We will call the ‘HideLabel’ function when the filed receive focus and call the ‘ShowLabel’ when the filed loose the focus.