jQuery: aggiungere icone agli elementi dei form

Solitamente per aggiungere delle icone agli elementi di un form si usano delle classi CSS associate agli elementi su cui vogliamo far comparire l'icona. Questo processo è lungo e laborioso, perchè bisogna inserire manualmente le classi CSS nella marcatura. Con jQuery possiamo automatizzare questo processo rendendolo molto più veloce e liberando la nostra marcatura da un peso aggiuntivo. Vediamo come.

Abbiamo un form su più righe costituito da una lista non ordinata le cui voci contengono tutte un elemento label e un campo del form. Sarebbe lecito pensare di assegnare le nostre classi agli elementi label, ma Internet Explorer 8 non consente di avere immagini di sfondo su tali elementi. Quindi dobbiamo assegnare le seguenti classi alle voci della lista:

.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");
}

Per riconoscere il tipo di campo associato useremo l'attributo for degli elementi label e con un costrutto switch assegneremo la classe CSS corrispondente alla voce di lista che li contiene:

function setFormIcons() {
    
	
	    $('li', '#contact-form').each(function() {
	    
	        var $li = $(this);
		    var $attrFor = $('label', $li).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;
		
		
		}
		
	    
	    });
	
    
}

Questa funzione viene richiamata in questo modo:

$(function() {

    setFormIcons();
    
});

Potete visionare l'esempio finale in questa pagina.