150
Maîtrise des CSS
Autres éléments
Cette.structuration.fonctionne.aussi.bien.pour.les.autres.éléments.de.formulaire,.comme.les.
zones.de.texte :
Les.dimensions.des.zones.de.texte.varient.également.d’un.navigateur.à.l’autre..Il.est.donc.
judicieux.de.leur.donner.aussi.une.largeur.et.une.hauteur.explicites..Ici,.j’ai.attribué.une.
largeur.de.100 %,.afin.qu’elle.soit.définie.par.son.élément.parent..Cette.manière.de.définir.
les.largeurs.rend.les.mises.en.page.plus.flexibles.et.plus.indépendantes.
textarea {
width: 100%;
height: 10em;
}
Les.boutons.radio.et.les.cases.à.cocher.doivent.être.gérés.autrement.que.les.zones.de.texte.
et.les.champs.de.saisie..Leur.légende.est.placée.généralement.à.leur.droite..Lorsqu’ils.sont.
empilés,.tous.les.éléments.sont.alignés.à.gauche,.ce.qui.crée.un.bon.repère.visuel.vertical.et.
les.rend.plus.faciles.à.sélectionner.(voir.Figure 7.6)..
Figure 7.6
Disposition des
boutons radio.
Auparavant.dans.cet.exemple,.nous.avons.défini.la.largeur.des.zones.de.texte.en.appliquant.
une. largeur. à. l’élément. input.. Cependant,. celui-ci. peut. correspondre. à. toutes. sortes. de.
composants.de.formulaire,.comme.les.cases.à.cocher,.les.boutons.radio.et.les.boutons.d’envoi,.ainsi.que.les.champs.de.saisie,.plus.courants..En.lui.donnant.une.largeur.de.20 cadratins,.
on.donne.cette.largeur.à.tous.ces.éléments.de.formulaire..
L’une.des.solutions.possibles.consiste.à.utiliser.le.sélecteur.d’attribut.pour.cibler.les.différents. types. d’éléments. de. formulaire..Au. lieu. de. fixer. la. largeur. des. éléments.input. à.
20 cadratins,.vous.pouvez.ainsi.cibler.spécifiquement.les.éléments.input.de.type.text :
input[type="text"] {
width: 20em;
}
Malheureusement,.le.sélecteur.d’attribut.n’est.pris.en.charge.que.par.les.navigateurs.plus.
récents.et.ne.fonctionne.pas.sous.Internet.Explorer 6.et.ses.versions.antérieures..En.attendant.que.la.situation.change,.le.meilleur.moyen.de.distinguer.les.différents.éléments.input.
consiste.à.leur.attribuer.une.classe.
Maîtrise des CSS
Autres éléments
Cette.structuration.fonctionne.aussi.bien.pour.les.autres.éléments.de.formulaire,.comme.les.
zones.de.texte :
Les.dimensions.des.zones.de.texte.varient.également.d’un.navigateur.à.l’autre..Il.est.donc.
judicieux.de.leur.donner.aussi.une.largeur.et.une.hauteur.explicites..Ici,.j’ai.attribué.une.
largeur.de.100 %,.afin.qu’elle.soit.définie.par.son.élément.parent..Cette.manière.de.définir.
les.largeurs.rend.les.mises.en.page.plus.flexibles.et.plus.indépendantes.
textarea {
width: 100%;
height: 10em;
}
Les.boutons.radio.et.les.cases.à.cocher.doivent.être.gérés.autrement.que.les.zones.de.texte.
et.les.champs.de.saisie..Leur.légende.est.placée.généralement.à.leur.droite..Lorsqu’ils.sont.
empilés,.tous.les.éléments.sont.alignés.à.gauche,.ce.qui.crée.un.bon.repère.visuel.vertical.et.
les.rend.plus.faciles.à.sélectionner.(voir.Figure 7.6)..
Figure 7.6
Disposition des
boutons radio.
Auparavant.dans.cet.exemple,.nous.avons.défini.la.largeur.des.zones.de.texte.en.appliquant.
une. largeur. à. l’élément. input.. Cependant,. celui-ci. peut. correspondre. à. toutes. sortes. de.
composants.de.formulaire,.comme.les.cases.à.cocher,.les.boutons.radio.et.les.boutons.d’envoi,.ainsi.que.les.champs.de.saisie,.plus.courants..En.lui.donnant.une.largeur.de.20 cadratins,.
on.donne.cette.largeur.à.tous.ces.éléments.de.formulaire..
L’une.des.solutions.possibles.consiste.à.utiliser.le.sélecteur.d’attribut.pour.cibler.les.différents. types. d’éléments. de. formulaire..Au. lieu. de. fixer. la. largeur. des. éléments.input. à.
20 cadratins,.vous.pouvez.ainsi.cibler.spécifiquement.les.éléments.input.de.type.text :
input[type="text"] {
width: 20em;
}
Malheureusement,.le.sélecteur.d’attribut.n’est.pris.en.charge.que.par.les.navigateurs.plus.
récents.et.ne.fonctionne.pas.sous.Internet.Explorer 6.et.ses.versions.antérieures..En.attendant.que.la.situation.change,.le.meilleur.moyen.de.distinguer.les.différents.éléments.input.
consiste.à.leur.attribuer.une.classe.