Aligner vos formulaires en CSS sans tableaux

3 Commentaires

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é !


Tutoriel video: Aligner vos formulaires en CSS sans tableaux
envoyé par zone-tuto. – Vidéos des dernières découvertes technologiques.

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 ;)

Publié le 31 décembre 2009 par Madrzejewski Alexis dans Développement web, Tous les tutoriels vidéos

Vous avez aimé ce billet ?

Inscrivez-vous au Flux RSS du blog, suivez-moi sur Twitter ou partager simplement cet article avec vos amis sur Twitter ou Facebook

Inscrivez-vous à la newsletter

Inscrivez-vous à la newsletter en précisant votre prénom et votre adresse email pour recevoir les dernières mises à jour du blog et des tutoriels exclusif par email (En savoir plus)

3 commentaires

Ajouter un commentaire

  1. Kleenex

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

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

  3. 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.

    Répondre

Ajouter un commentaire


Ici les commentaires sont en DoFollow, profitez-en mais en abusez pas !
Veuillez ne pas poster de code (php, html ou autre) car il sera bloqué par le site.
Les commentaires ne sont pas immédiatement validés.
Merci de faire une recherche sur Google avant de poser une question.