153
Mise en forme des formulaires et des tableaux de données
font-size: 0.75em;
color:#760000;
}
Et.voilà.le.travail :.une.mise.en.forme.de.formulaire.simple.et.attrayante.entièrement.réalisée.
en.CSS.
Mise en forme complexe de formulaire
Parcourir.en.un.clin.d’œil.les.formulaires.plus.longs.et.plus.compliqués.est.difficile,.et.l’espace.vertical.commence.à.devenir.un.problème..Pour.améliorer.leur.appréhension.immédiate.
et.réduire.la.quantité.d’espace.vertical.utilisé,.il.est.judicieux.de.positionner.les.étiquettes.et.
les.éléments.de.formulaire.horizontalement.au.lieu.de.les.empiler..Il.est.en.fait.très.simple.
de.créer.un.formulaire.comme.celui.de.la.Figure 7.8,.qui.utilise.exactement.le.même.code.
que.celui.du.précédent.exemple.
Figure 7.8
Alignement horizontal
du formulaire.
La.seule.différence.entre.cet.exemple.et.le.précédent.tient.à.ce.que,.au.lieu.de.définir.les.
étiquettes.comme.un.élément.de.niveau.bloc,.il.suffit.de.les.faire.flotter.à.gauche..Vous.devez.
en.outre.fixer.leur.largeur.afin.que.tous.les.éléments.s’alignent.harmonieusement :
label {
float: left;
width: 10em;
cursor: pointer;
}
Si. les. étiquettes. de. formulaire. doivent. s’étendre. sur. plusieurs. lignes,. vous. avez. intérêt. à.
dégager.les.div.conteneurs.également..Vous.les.empêcherez.ainsi.d’interférer.avec.la.prochaine.série.d’étiquettes.et.de.rompre.cette.harmonie.si.bien.préparée :
Mise en forme des formulaires et des tableaux de données
font-size: 0.75em;
color:#760000;
}
Et.voilà.le.travail :.une.mise.en.forme.de.formulaire.simple.et.attrayante.entièrement.réalisée.
en.CSS.
Mise en forme complexe de formulaire
Parcourir.en.un.clin.d’œil.les.formulaires.plus.longs.et.plus.compliqués.est.difficile,.et.l’espace.vertical.commence.à.devenir.un.problème..Pour.améliorer.leur.appréhension.immédiate.
et.réduire.la.quantité.d’espace.vertical.utilisé,.il.est.judicieux.de.positionner.les.étiquettes.et.
les.éléments.de.formulaire.horizontalement.au.lieu.de.les.empiler..Il.est.en.fait.très.simple.
de.créer.un.formulaire.comme.celui.de.la.Figure 7.8,.qui.utilise.exactement.le.même.code.
que.celui.du.précédent.exemple.
Figure 7.8
Alignement horizontal
du formulaire.
La.seule.différence.entre.cet.exemple.et.le.précédent.tient.à.ce.que,.au.lieu.de.définir.les.
étiquettes.comme.un.élément.de.niveau.bloc,.il.suffit.de.les.faire.flotter.à.gauche..Vous.devez.
en.outre.fixer.leur.largeur.afin.que.tous.les.éléments.s’alignent.harmonieusement :
label {
float: left;
width: 10em;
cursor: pointer;
}
Si. les. étiquettes. de. formulaire. doivent. s’étendre. sur. plusieurs. lignes,. vous. avez. intérêt. à.
dégager.les.div.conteneurs.également..Vous.les.empêcherez.ainsi.d’interférer.avec.la.prochaine.série.d’étiquettes.et.de.rompre.cette.harmonie.si.bien.préparée :