Thursday, 24 October 2013

How to put images in HTML text and password fields?

How to put images in HTML text and password fields?

You can easily place images inside text fields in HTML. To explain this, I am making a registration form in which I have text and password fields like name, email, password and confirm password. I want to put user image inside name text field, email image inside email field and so on. I have kept images(32*32 png icons) of user, email and password in images folder.

HTML file

<form action="register.php" name="register" id="register" method="post">
     
  <input type="text" name="name" id="name" placeholder="Your name" autocomplete="off" tabindex="1" class="txtinput">

  <input type="email" name="email" id="email" placeholder="Your e-mail address" autocomplete="off" tabindex="3" class="txtinput">

  <input type="password" name="password" id="password" placeholder="Your password" autocomplete="off" tabindex="5" class="txtinput">

 <input type="password" name="confirmpassword" id="confirmpassword" placeholder="Confirm password" autocomplete="off" tabindex="6" class="txtinput">

   <input type="submit">     

</form>

CSS file

#register input#name 
{
  background: #fff url('../images/user.png') 5px 4px no-repeat;
}

#register input#email 
{
  background: #fff url('../images/email.png') 5px 4px no-repeat;
}

#register input#password 
{
  background: #fff url('../images/password.png') 5px 4px no-repeat;
}

#register input#confirmpassword 
{
  background: #fff url('../images/password.png') 5px 4px no-repeat;
}

3 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. I never thought that this is possible that you can put image on password field.This help a lot and thanks for this info. Will definitely try this.

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete