Adding icons to form elements is quite a simple task with jQuery. Suppose that we have a basic contact form like this:
<form action="" method="post" id="contact-form">
<ul>
<li>
<label for="name">First Name</label>
<input type="text" name="name" id="name" />
</li>
<li>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" />
</li>
<li>
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</li>
<li>
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject" />
</li>
<li>
<label for="message">Message</label>
<textarea cols="30" rows="15" name="message" id="message"></textarea>
</li>
<li>
<label for="antispam">The capital of Italy</label>
<input type="text" name="antispam" id="antispam" />
</li>
</ul>
<p><input type="submit" name="submit" id="submit" value="Send" /></p>
</form>
Each form items should have a different background image put on the left of each label element. We can actually use the following CSS classes to be applied to li elements:
.name, .lastname, .subject, .message, .antispam, .email {
padding-left: 19px;
background-position: 0 2px;
background-repeat: no-repeat;
}
.name, .lastname {
background-image: url("img/name.png");
}
.subject {
background-image: url("img/subject.png");
}
.message {
background-image: url("img/message.png");
}
.antispam {
background-image: url("img/warning.png");
}
.email {
background-image: url("img/email.png");
}
We don't want to add them manually, so we use jQuery, like so:
function setFormIcons() {
if($('#contact-form')) {
$('#contact-form ul li').each(function() {
var $li = $(this);
var $attrFor = $li.find('label').attr('for');
switch($attrFor) {
case 'name':
$li.addClass('name');
break;
case 'lastname':
$li.addClass('lastname');
break;
case 'subject':
$li.addClass('subject');
break;
case 'message':
$li.addClass('message');
break;
case 'antispam':
$li.addClass('antispam');
break;
case 'email':
$li.addClass('email');
break;
default:
break;
}
});
} else {
return;
}
}
$(document).ready(function() {
setFormIcons();
});
We define a function called setFormIcons() that retrieves the value of the for attribute of each label element and applies a CSS class to its parent depending on the value in use. Of course you can follow another approach by retrieving the value of the various name attributes and then applying the related CSS class to each li element. You can see the final result here.