[Webdesign] Affichez vos formulaires comme des données tabulaires

La plupart des sites qui nécessitent une inscription propose un formulaire pour saisir ses données et une page pour vérifier celles-ci.

Pourtant, une fois remplit, le formulaire est quasi-identique à la page suivante. Autant dire que cette page de vérification est superflue.

Le site CSSGlobe propose une astuce 100% CSS très intéressante qui permet de combiner les deux pages.

Le formulaire est tout ce qu’il y a de plus classique :

<form id="" action="/" method="post" class="editable"> 
	
<fieldset>
<legend>Personal Information</legend>
<div> 
<label for="name">Full Name</label> <input name="name" id="name" size="30" class="field" type="text" value="Alen Grakalic" /> 
</div> 
<div> 
<label for="email">Email</label> <input name="email" id="email" size="30" class="field" type="text" value="[email protected]" /> 
</div>
<div> 
<label for="web">Website</label> <input name="web" id="web" size="30" class="field" type="text" value="http://cssglobe.com" /> 
</div>
<div> 
<label for="twitter">Twitter URL</label>
<input name="twitter" id="twitter" size="30" class="field" type="text" value="http://twitter.com/cssglobe" /> 
</div> 
</fieldset> 
<div class="submit"><button type="submit">Edit</button></div>

</form> 

L’idée est d’ajouter une petite icône lorsqu’un champ est éditable, puis d’opérer quelques changements (magiques) dans la feuille de styles. Pour cela, deux états sont définis : avec ou sans le focus.

Avec :

.editable .field:focus{
	border:2px solid #dfdfdf;
	padding:5px;
	background:#fff url(bg_input.gif) repeat-x;
	width:300px;
	line-height:1em;
	margin:0;
	outline:none;
}

et sans :

.editable .field{
	border:none;
	background:transparent url(ico_edit.gif) no-repeat 0 50%;
	padding:7px 0 7px 20px;
	width:300px;
	line-height:1em;
	margin:0;
	font-weight:bold;
}

Bien entendu, ceci ne fonctionne pas avec IE 7- (pour changer). Un petit bout de script jQuery vient à la rescousse :

$(document).ready(function(){	
	$('.editable .field').focus(function() {
		$(this).addClass('focused');
	}).blur(function(){
		$(this).removeClass('focused');
	});
});

Qu’il suffit de compléter avec un peu de CSS (la classe .focused qui ne sert qu’à IE).

.editable .field:focus, .editable .focused{
	border:2px solid #dfdfdf;
	padding:5px;
	background:#fff url(bg_input.gif) repeat-x;
	width:300px;
	line-height:1em;
	margin:0;
	outline:none;
}	

Le résultat est testable en live ici.

Je trouve cette technique géniale et je pense l’adopter prochainement.
En tout cas d’un point de vue expérience, je trouve cela très convivial.

crédits : cssglobe