157
Mise en forme des formulaires et des tableaux de données
Boutons d’envoi
Les. formulaires. sont. un. excellent. moyen. de. rendre. un. site. interactif. et. de. renvoyer. des.
données.au.serveur..Pour.les.actionner,.vous.aurez.besoin.d’un.contrôle.de.bouton..Normalement,.les.utilisateurs.se.servent.d’un.élément.input.dont.l’attribut.type.possède.la.valeur.
submit..Les.boutons.d’envoi.sont.le.moyen.le.plus.courant.de.transmettre.des.données.au.
serveur,.mais.ils.ne.sont.pas.sans.poser.de.problème,.notamment.parce.qu’ils.ne.peuvent.
être.ciblés.avec.un.simple.sélecteur.d’élément..Ils.peuvent.être.ciblés.avec.un.sélecteur.d’attribut,.mais.celui-ci.n’est.pas.pris.en.charge.par.les.anciennes.versions.d’Internet.Explorer..
La.seule.possibilité.qui.reste.est.donc.de.les.cibler.directement.avec.un.sélecteur.d’ID.ou.
de.classe..Au.lieu.d’utiliser.un.élément.input,.pourquoi.ne.pas.utiliser.l’élément.button ?
L’élément. button. s’est. récemment. acquis. une. certaine. popularité,. mais. il. reste. toujours.
relativement.méconnu.et.sous-utilisé..C’est.un.tort,.car.il.offre.une.grande.flexibilité..Pour.
commencer,.vous.pouvez.utiliser.des.balises.button.pour.englober.une.image.et.la.transformer.ainsi.en.contrôle.(voir.Figure 7.10)..
Figure 7.10
Un élément button qui utilise
une image de bouton.
Les.boutons.ont.une.mise.en.forme.par.défaut..Commencez.par.la.désactiver.
button {
border: none;
background: none;
cursor: pointer;
}
De.nombreux.systèmes.d’exploitation,.comme.OS X,.empêchent.les.auteurs.de.modifier.le.
style.de.leurs.éléments.input.de.type.submit,.afin.de.préserver.l’homogénéité.d’affichage.
de.l’ensemble.du.système..Mais.l’élément.button.ne.souffre.pas.de.ces.restrictions..On.peut.
ainsi.créer.des.styles.de.bouton.avancés.entièrement.en.CSS..Par.exemple,.supposons.que.
vous.commenciez.par.ce.simple.bouton.d’envoi :
Vous.pouvez.commencer.par.lui.donner.des.dimensions.explicites.et.une.bordure.colorée..
Vous.pouvez.ensuite.arrondir.les.bords.avec.la.propriété.border-radius.et.appliquer.une.
élégante. ombre. de. texte.. Pour. finir,. vous. pouvez. appliquer. un. arrière-plan. dégradé,. soit.
Mise en forme des formulaires et des tableaux de données
Boutons d’envoi
Les. formulaires. sont. un. excellent. moyen. de. rendre. un. site. interactif. et. de. renvoyer. des.
données.au.serveur..Pour.les.actionner,.vous.aurez.besoin.d’un.contrôle.de.bouton..Normalement,.les.utilisateurs.se.servent.d’un.élément.input.dont.l’attribut.type.possède.la.valeur.
submit..Les.boutons.d’envoi.sont.le.moyen.le.plus.courant.de.transmettre.des.données.au.
serveur,.mais.ils.ne.sont.pas.sans.poser.de.problème,.notamment.parce.qu’ils.ne.peuvent.
être.ciblés.avec.un.simple.sélecteur.d’élément..Ils.peuvent.être.ciblés.avec.un.sélecteur.d’attribut,.mais.celui-ci.n’est.pas.pris.en.charge.par.les.anciennes.versions.d’Internet.Explorer..
La.seule.possibilité.qui.reste.est.donc.de.les.cibler.directement.avec.un.sélecteur.d’ID.ou.
de.classe..Au.lieu.d’utiliser.un.élément.input,.pourquoi.ne.pas.utiliser.l’élément.button ?
L’élément. button. s’est. récemment. acquis. une. certaine. popularité,. mais. il. reste. toujours.
relativement.méconnu.et.sous-utilisé..C’est.un.tort,.car.il.offre.une.grande.flexibilité..Pour.
commencer,.vous.pouvez.utiliser.des.balises.button.pour.englober.une.image.et.la.transformer.ainsi.en.contrôle.(voir.Figure 7.10)..
Figure 7.10
Un élément button qui utilise
une image de bouton.
Les.boutons.ont.une.mise.en.forme.par.défaut..Commencez.par.la.désactiver.
button {
border: none;
background: none;
cursor: pointer;
}
De.nombreux.systèmes.d’exploitation,.comme.OS X,.empêchent.les.auteurs.de.modifier.le.
style.de.leurs.éléments.input.de.type.submit,.afin.de.préserver.l’homogénéité.d’affichage.
de.l’ensemble.du.système..Mais.l’élément.button.ne.souffre.pas.de.ces.restrictions..On.peut.
ainsi.créer.des.styles.de.bouton.avancés.entièrement.en.CSS..Par.exemple,.supposons.que.
vous.commenciez.par.ce.simple.bouton.d’envoi :
Vous.pouvez.commencer.par.lui.donner.des.dimensions.explicites.et.une.bordure.colorée..
Vous.pouvez.ensuite.arrondir.les.bords.avec.la.propriété.border-radius.et.appliquer.une.
élégante. ombre. de. texte.. Pour. finir,. vous. pouvez. appliquer. un. arrière-plan. dégradé,. soit.