Aligner vos formulaires en CSS sans tableaux

Aujourd’hui je vous fais un petit tutoriel vidéo, c’est ma façon de vous souhaiter une bonne année :). Vous allez apprendre à aligner vos formulaires sans utiliser de tableaux. Les tableaux c’est mal, c’est lent et ça fait « web 1.0 ». En fait, c’est plus une astuce (très connu, d’ailleurs vous trouverez plein d’article sur le net qui présente cette astuce) qu’un tutoriel, parce qu’avec 3 lignes de CSS c’est réglé !

Bon, comme d’habitude ce n’est pas super compliqué, j’en ai profité pour vous montrer un peu comment faire des formulaires (même si c’est du HTML tout simple). Le truc, c’est qu’il faut utiliser des balises label, ensuite on les fait « flotté » à gauche en précisant une largeur suffisamment grande pour que le texte rentre.
Le code HTML du formulaire :

<form id="formulaire" action="#">
	
	<label for="nom" >Nom :</label> <input type="text" id="nom" /><br/>
	<label for="prenom" >Prenom :</label> <input type="text" id="prenom" /><br/>
	<label for="message" >Message :</label> <textarea id="message">message</textarea><br/>	
	<label for="age" >Age :</label><select id="age"><option>18</option><option>21</option></select><br/>
	<input type="submit" value="ok"/>
	
</form>

Et le code du CSS qui agit sur ces labels :

/* On sélectionne tous les labels */
label
{
	display:block; 
	width:100px; /* Attention : prenez une largeur suffisamment grande */
	float:left;
}

Une petite remarque sur le css : avec ce code le style est appliqué sur toutes les balises label, or il est possible que vous ayez plusieurs formulaires dans votre page et que vous ne voulez pas appliquer le même style sur tous les labels. Pour cela, vous pouvez mettre un ID sur le formulaire et sélectionner tous les labels contenus dans le formulaire avec cette ID via ce code :

/* On sélectionne tout les labels contenu dans le formulaire avec l'id : id_form */
#id_form label
{
	display:block; 
	width:100px; 
	float:left;
}

Voilà, cette astuce est très simple et je pense avoir fait le tour de la question. Si vous avez des questions, laissez des commentaires !
Bonne fête de fin d’année 😉

3 commentaires ont été ajoutés, ajoutez le vôtre.

Vous pouvez laisser un commentaire, cependant je ne peux pas vous garantir qu'il sera modéré rapidement ou qu'il aura une réponse, faute de temps pour m'occuper du site.

  1. gihaires

    bsr Mr Alexis Madrzejewski,
    La balise fournit t-elle un resultal mieux que lorsque nous nous introduissons le formulaire dans des tableaux ??
    Si oui; pourait vous mieux m’orienter sur des petites et simple astuces et balises pouvant ammeliorer ou simplifier mon code sur mes créations à venir.
    Une fois de plus je vous remercie.

  2. Rétrolien: Formulaire de contact en PHP | Tutoriels-Video

  3. Kleenex

    Merci très intéressant;
    Bonne année 2010 😉