Les tableaux c’était bien pratique avant que l’on ne se rende compte de l’erreur qu’est leur utilisation pour la mise en page.
Depuis, on a trouvé des solutions basées sur CSS pour faire des layouts à 2 ou 3 colonnes, imiter des frames, et plein d’autres choses hypercréatives. Mais comment faire lorsqu’il s’agit de présenter un formulaire? Fastclemmy donne plusieurs solutions à travers une liste de liens appropriés.
Si cela intéresse quelqu’un, je vais présenter la méthode que j’utilise souvent pour mes formulaires.
La structure
Tout d’abord, voyons comment se définit un formulaire:
<form action="..."> <p> <label for="nom"> Nom : <input type="text" id="nom" /> </label> <label for="prenom"> Prenom : <input type="text" id="prenom" /> </label> <label for="age"> Âge : <input type="text" id="age" /> </label> </p> </form>
Ce qu’il faut remarquer, c’est que les champs (<input>) sont imbriqués dans leur étiquette (<label>) correspondante.
La présentation
Ensuite, pour imiter un tableau, il suffit d’appliquer quelques règles CSS toutes simples.
label{ position: relative; display: block; width: 15em; height: 1.4em; } input{ position: absolute; left: 6em; }
Le but est simple: afficher les <label> en tant que blocs et positionner les champs par rapport à ceux-ci.
Le résultat
On obtient un formulaire dont les champs sont alignés sur leur côté droit.
Pour le moment cette technique me convient assez, mais si vous en connaissez d’autres, n’hésitez pas à la proposer en commentaire!
2 replies on “Formulaires et CSS”
raaa, j’avais testé plein de choses avec des floats etc, mais j’ai jamais pensé aux positionnement absolu pour le input ! C’est NICKEL !!!
joli bien que perso je préfère faire sans le position relative pour le label pour positionner les input plus ppécisément.
Malheureusement, ça ne marche pas pour les textarea, enfin, ça marche, ça le met bel et bien en page mais il passe par-dessus le formulaire et le div qui le contient, et en dessous du bouton d’envoi… (et vient donc se superposer au contenu qui peut-être sous le formulaire !)
essayez :
<form id="contact" name="contact" method="post" action="contactenvoi.php">
<label for="nom">nom <input name="nom" type="text" id="nom" size="25" /></label>
<label for="prenom">prénom <input name="prenom" type="text" id="prenom" size="25" /></label>
<label>entreprise <input name="entreprise" type="text" id="entreprise" size="25" maxlength="50" /></label>
<label>téléphone <input name="tel" type="text" size="15" maxlength="15" /></label>
<label>portable <input name="portable" type="text" id="portable" size="15" maxlength="15" /></label>
<label>e.mail <input name="mail" type="text" id="mail" size="25" maxlength="80" /></label>
<label>message <textarea name="message" cols="20" rows="6"></textarea></label>
<label>envoyer<input type="submit" name="Submit" value="Envoyer" /></label>
</form>
et ce, aussi bien dans IE que Firefox…
ce n’est qu’un exemple parmi un certain nombre d’autres qui me retiennent de devenir ayatolah des css. C’est malheureux mais, les tableaux restent encore très supérieurs aux calques et autres attributs css pour un certain nombre d’éléments au comportement étranges
cordialement