155
Mise en forme des formulaires et des tableaux de données
nous.avons.créé.précédemment,.on.définissait.la.largeur.des.étiquettes..Pour.empêcher.ces.
dernières.d’affecter.la.mise.en.forme,.il.faut.aussi.ramener.à.zéro.leur.largeur :.
#monthOfBirthLabel, #yearOfBirthLabel {
text-indent: -1000em;
width: 0;
}
Les. différents. contrôles. de. formulaire. peuvent. être. redimensionnés. individuellement. et.
recevoir.des.marges.pour.contrôler.leur.espacement.horizontal :
input#dateOfBirth {
width: 3em;
margin-right: 0.5em;
}
select#monthOfBirth {
width: 10em;
margin-right: 0.5em;
}
input#yearOfBirth {
width: 5em;
}
Cases à cocher multicolonnes
Créer.une.disposition.à.deux.colonnes.pour.les.groupes.importants.de.cases.à.cocher.ou.de.
boutons.radio.est.un.petit.peu.plus.compliqué..Les.étiquettes.ne.fonctionnent.que.pour.les.
éléments.individuels.et.non.pour.les.groupes.d’éléments..Idéalement,.il.faudrait.envelopper.
l’ensemble.du.groupe.dans.un.ensemble.de.champs.et.utiliser.la.légende.comme.étiquette.
du.groupe..Malheureusement,.cette.solution.n’est.pas.pratique.pour.l’instant,.car.les.navigateurs.ne.gèrent.pas.uniformément.le.positionnement.des.légendes..En.attendant.que.cela.soit.
le.cas,.le.mieux.est.d’utiliser.un.élément.de.titre.à.la.place..
Pour.créer.l’effet.de.colonne,.les.cases.à.cocher.sont.divisées.en.deux.ensembles.et.chacun.
d’eux.est.enveloppé.dans.une.div.à.laquelle.est.attribuée.la.classe.col..Ces.éléments.sont.
ensuite.regroupés,.enveloppés.dans.un.ensemble.de.champs.avec.un.ID.descriptif :.
Mise en forme des formulaires et des tableaux de données
nous.avons.créé.précédemment,.on.définissait.la.largeur.des.étiquettes..Pour.empêcher.ces.
dernières.d’affecter.la.mise.en.forme,.il.faut.aussi.ramener.à.zéro.leur.largeur :.
#monthOfBirthLabel, #yearOfBirthLabel {
text-indent: -1000em;
width: 0;
}
Les. différents. contrôles. de. formulaire. peuvent. être. redimensionnés. individuellement. et.
recevoir.des.marges.pour.contrôler.leur.espacement.horizontal :
input#dateOfBirth {
width: 3em;
margin-right: 0.5em;
}
select#monthOfBirth {
width: 10em;
margin-right: 0.5em;
}
input#yearOfBirth {
width: 5em;
}
Cases à cocher multicolonnes
Créer.une.disposition.à.deux.colonnes.pour.les.groupes.importants.de.cases.à.cocher.ou.de.
boutons.radio.est.un.petit.peu.plus.compliqué..Les.étiquettes.ne.fonctionnent.que.pour.les.
éléments.individuels.et.non.pour.les.groupes.d’éléments..Idéalement,.il.faudrait.envelopper.
l’ensemble.du.groupe.dans.un.ensemble.de.champs.et.utiliser.la.légende.comme.étiquette.
du.groupe..Malheureusement,.cette.solution.n’est.pas.pratique.pour.l’instant,.car.les.navigateurs.ne.gèrent.pas.uniformément.le.positionnement.des.légendes..En.attendant.que.cela.soit.
le.cas,.le.mieux.est.d’utiliser.un.élément.de.titre.à.la.place..
Pour.créer.l’effet.de.colonne,.les.cases.à.cocher.sont.divisées.en.deux.ensembles.et.chacun.
d’eux.est.enveloppé.dans.une.div.à.laquelle.est.attribuée.la.classe.col..Ces.éléments.sont.
ensuite.regroupés,.enveloppés.dans.un.ensemble.de.champs.avec.un.ID.descriptif :.