I am working with PHP to display my log in form. Right now, the form shows "Username" but the text doesn't go away when the user starts to type. How can I have the text go away when the user starts to type so that the text "Username" doesn't overlap whatever they are typing?

Here is my "Username" code

<p class="infield grouptop">
        <input type="text" name="user" id="user" placeholder=""
               value="<?php p($_['username']); ?>"<?php p($_['user_autofocus'] ? ' autofocus' : ''); ?>
               autoplete="on" required/>
        <label for="user" class="infield"><?php p($l->t('Username')); ?></label>
        <img class="svg" src="<?php print_unescaped(image_path('', 'actions/user.svg')); ?>" alt=""/>
</p>

Here is my "Password" code

<p class="infield groupbottom">
        <input type="password" name="password" id="password" value="" placeholder=""
               required<?php p($_['user_autofocus'] ? '' : ' autofocus'); ?> />
        <label for="password" class="infield"><?php p($l->t('Password')); ?></label>
        <img class="svg" id="password-icon" src="<?php print_unescaped(image_path('', 'actions/password.svg')); ?>" alt=""/>
</p>

I'd like to achieve the same thing for the password form.

I am working with PHP to display my log in form. Right now, the form shows "Username" but the text doesn't go away when the user starts to type. How can I have the text go away when the user starts to type so that the text "Username" doesn't overlap whatever they are typing?

Here is my "Username" code

<p class="infield grouptop">
        <input type="text" name="user" id="user" placeholder=""
               value="<?php p($_['username']); ?>"<?php p($_['user_autofocus'] ? ' autofocus' : ''); ?>
               autoplete="on" required/>
        <label for="user" class="infield"><?php p($l->t('Username')); ?></label>
        <img class="svg" src="<?php print_unescaped(image_path('', 'actions/user.svg')); ?>" alt=""/>
</p>

Here is my "Password" code

<p class="infield groupbottom">
        <input type="password" name="password" id="password" value="" placeholder=""
               required<?php p($_['user_autofocus'] ? '' : ' autofocus'); ?> />
        <label for="password" class="infield"><?php p($l->t('Password')); ?></label>
        <img class="svg" id="password-icon" src="<?php print_unescaped(image_path('', 'actions/password.svg')); ?>" alt=""/>
</p>

I'd like to achieve the same thing for the password form.

• javascript
• php
• html

• 1 placeholder should do exactly that as long as you didnt also add a value. You did not set a placeholder there? Does your value already contain something at initial show? – ToBe Commented Jan 29, 2014 at 12:46

3 Answers 3

<input type="password" placeholder="enter the password" onClick="this.value='';">

or

<input type="password" placeholder="enter the password" onClick="this.select();">

if it already have some value you can remove it onClick also or select it and automatically replaces when you start typing

You are looking for html placeholders.

http://www.w3schools./tags/att_input_placeholder.asp

<form action="demo_form.asp">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">
</form>

Use placeholder for latest browsers

<input type="password" placeholder="Your Text" onClick="this.value='';" >

For older browsers you can use jquery you can do like this. from this site Placeholder with Jquery

$('[placeholder]').parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});