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
tilisons maintenant une console JMX un peu plus pratique, vous avez la JConsole disponible via le jdk, dans mon cas c’est ici : c :\Program Files\Java\jdk1.6.0_03\bin\jconsole.exe ou bien vous pouvez tĂ©lĂ©charger la MC4J management consoleVoici un aperçu du manager de cache dans la console MC4J :
