233
Étude de cas : Roma Italia
"sm".(par.exemple,."small")..Pour.d’autres.exemples,.consultez.l’article.(en.anglais)."CSS3:.
Attribute.selectors".(http://www.css3.info/preview/attribute-selectors/).
Les.sélecteurs.d’attributs.sont.pratiques.dans.certains.cas,.mais.ils.le.sont.particulièrement.
avec. les. formulaires.. Si. des. éléments. sont. mis. en. forme. avec. un. connecteur. générique.
comme.input { },.tous.les.éléments.input.dans.le.formulaire.le.seront.également..Cela.
signifie.que.si.vous.souhaitez.cibler.des.champs.de.texte.uniquement.ou.le.bouton.d’envoi.
uniquement,.vous.allez.devoir.ajouter.des.classes.et.des.ID.superflus..Le.sélecteur.d’attribut.
est.donc.un.moyen.propre.de.cibler.des.éléments.particuliers..
Figure 10.5
Ce champ de recherche
utilise deux éléments
input, chacun ciblé par
un sélecteur d’attribut.
Le. champ. de. recherche. en. haut. du. site. sert. d’exemple. de. sélecteur. d’attribut. (voir.
Figure 10.5)..Voici.le.code.HTML :
Ici,.nous.voulons.mettre.en.forme.le.champ.de.texte.avec.plusieurs.propriétés.et.faire.flotter.
search-go.gif.à.gauche..Les.deux.éléments.input.que.nous.allons.cibler.avec.un.sélecteur.d’attribut.sont.affichés.en.gras..Vous.remarquerez.qu’ils.ne.portent.aucun.attribut.de.
classe.ou.d’ID..Nous.pouvons.en.effet.les.cibler.en.utilisant.l’attribut.type,.comme.ceci :
#header form input[type="text"] {
display: block;
...
background: url(../img/search-bg.gif) no-repeat;
}
#header form input[type=”image”] {
float: left;
}
Tous.les.éléments.input.qui.contiennent.l’attribut.type="image".sont.rendus.flottants.à.
gauche. et. tous. les. éléments. input. contenant. l’attribut. type="text". sont. mis. en. forme.
comme.nous.l’avons.indiqué..Cette.même.syntaxe.est.en.outre.utilisée.dans.jquery.plugins.
js.pour.ajouter.une.fonctionnalité.jQuery.et.Ajax :
$(‘#header form input[type="text"]’).searchField();
Nous.reviendrons.sur.jQuery.et.Ajax.ultérieurement..
Étude de cas : Roma Italia
"sm".(par.exemple,."small")..Pour.d’autres.exemples,.consultez.l’article.(en.anglais)."CSS3:.
Attribute.selectors".(http://www.css3.info/preview/attribute-selectors/).
Les.sélecteurs.d’attributs.sont.pratiques.dans.certains.cas,.mais.ils.le.sont.particulièrement.
avec. les. formulaires.. Si. des. éléments. sont. mis. en. forme. avec. un. connecteur. générique.
comme.input { },.tous.les.éléments.input.dans.le.formulaire.le.seront.également..Cela.
signifie.que.si.vous.souhaitez.cibler.des.champs.de.texte.uniquement.ou.le.bouton.d’envoi.
uniquement,.vous.allez.devoir.ajouter.des.classes.et.des.ID.superflus..Le.sélecteur.d’attribut.
est.donc.un.moyen.propre.de.cibler.des.éléments.particuliers..
Figure 10.5
Ce champ de recherche
utilise deux éléments
input, chacun ciblé par
un sélecteur d’attribut.
Le. champ. de. recherche. en. haut. du. site. sert. d’exemple. de. sélecteur. d’attribut. (voir.
Figure 10.5)..Voici.le.code.HTML :
Ici,.nous.voulons.mettre.en.forme.le.champ.de.texte.avec.plusieurs.propriétés.et.faire.flotter.
search-go.gif.à.gauche..Les.deux.éléments.input.que.nous.allons.cibler.avec.un.sélecteur.d’attribut.sont.affichés.en.gras..Vous.remarquerez.qu’ils.ne.portent.aucun.attribut.de.
classe.ou.d’ID..Nous.pouvons.en.effet.les.cibler.en.utilisant.l’attribut.type,.comme.ceci :
#header form input[type="text"] {
display: block;
...
background: url(../img/search-bg.gif) no-repeat;
}
#header form input[type=”image”] {
float: left;
}
Tous.les.éléments.input.qui.contiennent.l’attribut.type="image".sont.rendus.flottants.à.
gauche. et. tous. les. éléments. input. contenant. l’attribut. type="text". sont. mis. en. forme.
comme.nous.l’avons.indiqué..Cette.même.syntaxe.est.en.outre.utilisée.dans.jquery.plugins.
js.pour.ajouter.une.fonctionnalité.jQuery.et.Ajax :
$(‘#header form input[type="text"]’).searchField();
Nous.reviendrons.sur.jQuery.et.Ajax.ultérieurement..