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;
}

Comments

Post a Comment

Popular posts from this blog

Calling Conventions in Delphi: safecall vs stdcall vs cdecl

Calling Conventions in Delphi: safecall vs stdcall vs cdecl Calling conventions in Delphi determine the order in which parameters are passed to the routine. Calling conventions also affect the removal of parameters from the stack, the use of registers for passing parameters, and error and exception handling.  Calling Conventions in Delphi One of the most common operations in the processing of code is calling a subroutine that carries out a given task. In order to do that, the main code needs to hand over control to the subroutine, allow the subroutine to execute, and then return to where it left the main execution path. This process requires agreement between the caller and the callee about how to pass information to the subroutine, how to return results where applicable and who is responsible for the memory allocation and cleanup. Various conventions exist to deal with invoking subroutines, commonly known as calling conventions. Calling conventions in Delphi define a number of dif...
Read more

How to use TpFIBDataSet, TpFIBQuery and TpFIBTransaction FIBPlus components to connect with Firebird / Interebase database in Delphi XE4?

How to use TpFIBDataSet, TpFIBQuery and TpFIBTransaction FIBPlus components to connect with Firebird / Interebase database in Delphi XE4? Following is the basic article on Firebird / Interbase database connectivity in Delphi XE4 using FIBPlus database components like TpFIBDataSet, TpFIBQuery and TpFIBTransaction. I will explain all these FIBPlus database components in detail. I have written a small article on TpFIBDatabase before this article. Please go through that before reading this one. Read FIBPlus TpFIBDatabase... FIBPlus TpFIBQuery Component An application works with a database by issuing SQL instructions. They are used to get and modify data\metadata. FIBPlus has a special TpFIBQuery component responsible for SQL operator execution. This robust, light and powerful component can perform any actions with the database.  TpFIBQuery is very easy-to-use: just set the TpFIBDatabase component, fill in the SQL property and call any ExecQuery method (ExecQueryWP, ExecQueryWPS). ...
Read more

VCL Hierarchy in Delphi: Types of Controls in Delphi: TWinControls and TGraphicControls

Image
In VCL (Visual Component Library) hierarchy, you will find TObject at the top, then TPersistent, then TComponent and then TControl. TObject >> TPersistent >> TComponent >>TControl VCL Hierarchy in Delphi TObject is the base class from which all classes descend. TPersistent class descends directly from TObject. The special characteristic of TPersistent is that it is an abstract class that defines the methods that allow it to be streamed. TComponent is the base class from which all components descend. Non-visual components are descendants of TComponent. For example: TTimer TControl is the base class from which all the visual components descend. For example: TEdit, TListBox, TComboBox etc. Again, there are two types of controls (TControl): Window Controls (TWinControl) and Graphic Controls (TGraphicControl) Following is the difference between TWinControl and TGraphicControl in Delphi: TWinControls TWinControls can receive input focus and they can be parents to other cont...
Read more