149
Mise en forme des formulaires et des tableaux de données
Figure 7.5
Le formulaire sans mise
en forme.
Pour.commencer,.vous.allez.définir.les.styles.généraux.pour.l’ensemble.de.champs.et.les.
éléments.de.légende..Le.contenu.peut.être.aéré.avec.un.léger.remplissage,.tandis.que.les.
ensembles.de.champs.doivent.être.séparés.verticalement.à.l’aide.de.marges..Pour.marquer.
ceux-ci,.vous.pouvez.leur.attribuer.un.léger.arrière-plan.avec.une.bordure.d’un.pixel.légèrement.plus.sombre..Tâchez.cependant.de.ne.pas.trop.assombrir.l’arrière-plan,.car.une.mise.
en.forme.très.marquée.rendrait.le.formulaire.difficile.à.comprendre..Le.fait.de.passer.les.
légendes.en.gras.peut.aussi.contribuer.à.décomposer.les.informations.pour.les.rendre.plus.
digestes..
fieldset {
margin: 1em 0;
padding: 1em;
border : 1px solid #ccc;
background: #f8f8f8;
}
legend {
font-weight: bold;
}
Les.étiquettes.peuvent.être.facilement.positionnées.verticalement.au-dessus.des.éléments.
de.formulaire..Par.défaut,.l’étiquette.est.un.élément.incorporé..Si.vous.attribuez.la.valeur.
block.à.sa.propriété.display,.elle.génère.cependant.sa.propre.boîte.de.bloc,.ce.qui.force.
les.éléments.input.à.passer.à.la.ligne.suivante..La.largeur.des.champs.de.saisie.varie.d’un.
navigateur.à.l’autre..Par.souci.d’uniformité,.il.est.donc.préférable.d’en.définir.explicitement.
la.largeur..Dans.cet.exemple,.j’utilise.des.cadratins.pour.créer.une.disposition.plus.simple.
à.réadapter..
label {
display: block;
cursor: pointer;
}
input {
width: 20em;
}
Il.est.judicieux.de.changer.le.style.du.curseur.de.l’étiquette.en.un.pointeur,.car.on.signale.
ainsi.qu’il.est.possible.d’interagir.avec..