Images Within Form Fields

Adding background images to your form fields can be easily accomplished with CSS and should only be use in few situation because they can make it harder for the user to understand the meaning of it, but on the other hand a well picked image can add useful feature to the look of your forms.

Adding images to your form fields using CSS is very simple. The CSS code can be written like these below:

input
{
background:url(redstar12.gif) left no-repeat;
padding: 3px 3px 3px 15px;
}

Here is the live example 1.

However, using this method without specifying the sub class will make all the form input fields having images. To solve this problem, we should declare it as a sub class instead.

input
{
padding: 3px;
}
input.req
{
background:url(redstar12.gif) left no-repeat;
padding: 3px 3px 3px 15px;
}

Here is the live example 2.

Using this useful technique, you may add an image to each form fields to indicate the meaning of the form fields such as ‘lock picks’ for password and ‘human image’ for username.

Here is the live example 3.

Aren’t they look nicer than ever

• Directory and Search Engine Optimization; any relationship?
• JotForm - Easiest Form Builder
• Two Potential Sites, One Great Designer