Home

Donner l'aspect de tableaux à un formulaire simple

Submitted by PiTiLeZarD on Wed, 08/17/2005 - 12:11
Tagged:

Je remarque que peu de gens (enfin ceux de mon entourrage) connaissant le CSS ne connaissent cette technique toute bête ...

On veut avoir un formulaire avec des label et des input text sans tableaux ... (un graphiste m'a déja dit que ce n'était pas possible ... jvous jure hein ...)

Il suffit de construire sa page comme ceci :

<label for="name">Nom :"</label>
<input type="text" name="name" /><br />

...

et dans le css :

label {
  display:block;
  width:250px; /* par exemple hein ...*/
  float:left;
  clear:both;
  text-align:right;
  padding-right:5px;
}

Voila c'est tout bête mais ça vous aligne votre formulaire comme il faut...

PS : si vous modifiez un formulaire existant pour essayer cette technique : pensez a faire CTRL+F5 avec votre navigateur pour rafraichir la page ... sinon le cache empêche souvent de voir le résultat ...

Comments

Submitted by trigun (not verified) on Wed, 08/09/2006 - 15:54.

Truc bête, dans le cas d'un formulaire complexe, où certains champs peuvent être sur la même ligne, tu va être embêter avec ton clear:both. Dans ce cas là, un class nofloat peut être utile pour annuler le float du label.

Submitted by PiTiLeZarD (not verified) on Mon, 08/28/2006 - 11:06.

très bonne idée !!!

C'est vrai que j'ai déja eu des soucis avec cette dispositions .. C'est pratique mais ça fait des formulaires ultra linéaires alors si on commence a composer un peu ... ça coince !

Mais bon c'est sympa et très vite mis en place !

Submitted by louis vuitton wallets (not verified) on Thu, 05/06/2010 - 10:21.

C'est vrai que j'ai déja eu des soucis avec cette dispositions ..

Submitted by pandora bracelets (not verified) on Thu, 05/06/2010 - 10:22.

où certains champs peuvent être sur la même ligne, tu va être embêter avec ton clear:both. Dans ce cas là, un class nofloat peut être utile pour annuler le float du label.