151
Mise en forme des formulaires et des tableaux de données
Par.exemple,.vous.pouvez.donner.aux.boutons.radio.le.nom.de.classe.radio :
Vous.pouvez.ensuite.redéfinir.la.largeur.des.éléments.input.précédemment.définie.en.fixant.
celle.des.boutons.radio.à.auto..De.même.pour.les.cases.à.cocher.et.les.boutons.d’envoi :
input.radio, input.checkbox, input.submit {
width: auto;
}
Vous. aurez. remarqué. à. cette. occasion. de. quelle. manière. j’ai. enveloppé. les. éléments. de.
formulaire.avec.les.étiquettes..Vous.vous.rappelez.que.j’ai.précédemment.configuré.toutes.
les.étiquettes.dans.ce.formulaire.de.manière.qu’elles.se.comportent.comme.des.éléments.
de niveau.bloc,.en.forçant.leurs.contrôles.de.formulaire.associé.à.s’afficher.dans.une.ligne.
séparée.. Il. n’est. évidemment. pas. souhaitable. d’en. faire. de. même. avec. les. étiquettes. des.
boutons. radio.. En. enveloppant. les. contrôles. de. formulaire. avec. les. étiquettes,. j’évite. ce.
problème..
La.dernière.chose.à.faire.est.d’ajouter.une.petite.marge.droite.aux.boutons.radio,.afin.de.
créer.un.espacement.entre.les.étiquettes..
#remember-me .radio {
margin-right: 1em;
}
Embellissements
ressants.ajouts.pour.les.navigateurs.plus.avancés..Par.exemple,.vous.pouvez.aider.les.utilisateurs.à.mieux.repérer.le.champ.de.formulaire.qu’ils.remplissent.en.modifiant.la.couleur.
d’arrière-plan.de.l’élément.lorsqu’il.devient.actif :
Input[type="text"]:focus, textarea:focus {
background: #ffc;
}
Vous.pouvez.aussi.harmoniser.l’apparence.des.éléments.de.champ.texte.et.de.zone.de.texte.
en.leur.donnant.des.bordures.personnalisées..C’est.particulièrement.utile.pour.Firefox,.qui.
Mise en forme des formulaires et des tableaux de données
Par.exemple,.vous.pouvez.donner.aux.boutons.radio.le.nom.de.classe.radio :
Vous.pouvez.ensuite.redéfinir.la.largeur.des.éléments.input.précédemment.définie.en.fixant.
celle.des.boutons.radio.à.auto..De.même.pour.les.cases.à.cocher.et.les.boutons.d’envoi :
input.radio, input.checkbox, input.submit {
width: auto;
}
Vous. aurez. remarqué. à. cette. occasion. de. quelle. manière. j’ai. enveloppé. les. éléments. de.
formulaire.avec.les.étiquettes..Vous.vous.rappelez.que.j’ai.précédemment.configuré.toutes.
les.étiquettes.dans.ce.formulaire.de.manière.qu’elles.se.comportent.comme.des.éléments.
de niveau.bloc,.en.forçant.leurs.contrôles.de.formulaire.associé.à.s’afficher.dans.une.ligne.
séparée.. Il. n’est. évidemment. pas. souhaitable. d’en. faire. de. même. avec. les. étiquettes. des.
boutons. radio.. En. enveloppant. les. contrôles. de. formulaire. avec. les. étiquettes,. j’évite. ce.
problème..
La.dernière.chose.à.faire.est.d’ajouter.une.petite.marge.droite.aux.boutons.radio,.afin.de.
créer.un.espacement.entre.les.étiquettes..
#remember-me .radio {
margin-right: 1em;
}
Embellissements
ressants.ajouts.pour.les.navigateurs.plus.avancés..Par.exemple,.vous.pouvez.aider.les.utilisateurs.à.mieux.repérer.le.champ.de.formulaire.qu’ils.remplissent.en.modifiant.la.couleur.
d’arrière-plan.de.l’élément.lorsqu’il.devient.actif :
Input[type="text"]:focus, textarea:focus {
background: #ffc;
}
Vous.pouvez.aussi.harmoniser.l’apparence.des.éléments.de.champ.texte.et.de.zone.de.texte.
en.leur.donnant.des.bordures.personnalisées..C’est.particulièrement.utile.pour.Firefox,.qui.