Formulaire css sans tableau
27 février 2008 – 7:44 La présentation des formulaires est souvent synonyme de casse tête. Réussir à positionner l’ensemble de ces éléments est souvent obtenu au détriment des standards. Cet article va vous présenter une manière de parvenir à vos fins, tout en respectant les normes du W3C.
Fieldset, legend et label : des balises qui gagneraient à être connues
En dehors des élements FORM, INPUT, TEXTAREA, SELECT, il existe des balises html méconnues :
Label : Cet élément permet de légender un élément de saisie, sans sa présence, des personnes malvoyantes ne pourraient pas le remplir.
Fieldset : il permet de séparer le formulaire en groupes distincts, par exemple une première partie concernera la civilité, la seconde l’adresse.
Legend : il va de pair avec le fieldset, celui-ci servira à décrire le contenu du groupe d’éléments.
Maintenant que les présentations sont faites, entrons dans le vif du sujet, le code html du formulaire.
La première mouture, réalisée sans trucage et sans CSS ne donne pas très envie, nous allons y remédier très bientôt.
Code html du formaire :
-
<legend>Civilité</legend>
-
<li>Civilité
-
<input name=“nom” /></li>
-
<input name=“prenom” /></li>
-
<input name=“nomjf” /></li>
-
</ul>
-
</fieldset>
-
<legend>Coordonées</legend>
-
<input name=“voie” /></li>
-
<input name=“cmplvoie” /></li>
-
<input name=“codepostal” /></li>
-
<input name=“ville” /></li>
-
</ul>
-
</fieldset>
-
</form>
L’utilisation des balises <li> (affichage par block) nous permet de positionner les éléments au dessous des autres et non inline (”À la queue leu leu”). Les puces ne sont pas très jolies, ni utiles, nous allons donc les cacher avec
-
form{
-
width:450px ;
-
}
-
li{
-
list-style-type : none ;
-
clear:both ;
-
line-height:25px ;
-
}
-
body{
-
font-family :<span class=“code-quote”>“Trebuchet MS”</span>,Verdana,Geneva,Arial,Helvetica,sans-serif ;
-
font-size:small ;
-
margin:2em 1% ;
-
padding:0 ;
-
}
-
label{
-
display:block ;
-
<span class=“code-object”>float</span>:left ;
-
width:140px ;
-
}
-
input, select{
-
display:block ;
-
<span class=“code-object”>float</span>:left ;
-
width:200px ;
-
}
-
#submit{
-
margin-right:42px ;
-
<span class=“code-object”>float</span>:right ;
-
width:75px ;
-
border:1px solid black ;
-
}
L’astuce pour afficher correctement les label et les input c’est de les déclarer en display:block afin de pouvoir leur attribuer une width float left permet de les afficher les uns à cotés des autres, et le fait de positionner un clear:both sur les li permet de repartir au début de la ligne après chaque balise ouvrant li
Bon, ca n’est pas très sexy, mais je vous invite à les modifier selon vos goûts via le zip fourni
formulaire-css-sans-tableaurar.zip
