Home/ Questions/Q 8642269
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T11:43:59+00:00

I am working on simple login form. I have two text fields as user

  • 0

I am working on simple login form.
I have two text fields as user name and password.

user name text field have hint as “user name”.

password text field have hint as “password”.

I want to hide hint text while clicking inside textbox.

here i faced two problems,

  1. if i click inside user name text box the hint text is hiding. but when i press ctrl+z then again the hint appearing and able to edit by pressing keyboard arrow keys.

  2. second one is the password text field type is password. so it is not showing hint text as “password”.

here is my code:

<html>
<head>
  <title>login</title>
<script>
function ForUserName()
{
    if(document.getElementById('username').value == "user name")
    {
       document.getElementById('username').value='';
    }
    else if(document.getElementById('username').value == '')
    {
       document.getElementById('username').value='user name';
    }
}

function ForPassword()
{
    if(document.getElementById('password').value == "password")
    {
       document.getElementById('password').value='';
    }
    else if(document.getElementById('password').value == '')
    {
       document.getElementById('password').value='password';
    }
}
</script>

</head>
<body>

<input type="text" id="username" value="user name" onclick="ForUserName();" onblur="ForUserName();">
<input type="password" id="password" value="password" onclick="ForPassword();" onblur="ForPassword();">

</body>
</html>

can any one please…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There is a HTML5 attribute that does that called placeholder. So you just do:

    <input type="text" id="username" placeholder="user name">

    And for the backward compatibility (older browsers) you just follow this tutorial.

    • 0