Comment placer une image dans un élément de type « input » d'un formulaire

Peut être vous êtes vous déjà demandé comment on fait pour placer une image de fond dans un champ de formulaire comme on le voit sur de nombreux sites. Vous allez voir, c'est très simple.

Pour ce tutoriel, on utilise le sprite suivant :
Sprite
Dans un premier temps, on créé un simple formulaire de plusieurs champs auquel on attribut un "id" différent pour chaque champ :
<form method="post" action="#" name="toto">
<input id="image1" name="titi1" value="recherche" type="text"/>
<input id="image2" name="titi2" value="recherche"type="text"/>
<input id="image3" name="titi3" value="recherche"type="text"/>
<input id="image4" name="titi4" value="recherche"type="text"/>
<input id="image5" name="titi5" value="recherche"type="text"/>
<input value="Valider" name="Valider" type="submit">
</form>

Jusque là, rien de compliqué :).

Ensuite, tout ce joue dans le style CSS que l'on applique aux éléments du formulaire.

Dans ce formulaire, on distingue 2 types de champ :
1-champs de type text » type="text".
2-champ de type submit » type="submit".

A partir de là, on peut donc définir un style CSS différent pour chacun d'entre eux si on connait la syntaxe à utiliser :
input[type=text]{
/*Style CSS de type text*/
}
input[type=submit]{
/*Style CSS de type submit*/
}
Pour les besoins de ce tutoriel, voici comment j'ai définis le style CSS pour ces 2 types de champs :
input[type=text]{
border:1px solid black;
width:300px;
height:40px;
margin:5px 5px;
color:red;
font-size:15px;
/*On décolle le curseur de la gauche du champ*/
padding-left:30px;
/*On centre le texte*/
line-height:40px;
display:block;
}
input[type=submit]{
/*Ici on attribue une image de fond au bouton de validation*/
background:url(sprite.png) -0px -291px no-repeat;
height:34px;
width:27px;
border:none;
margin:5px 5px;
/*Pour ne pas voir le texte du bouton*/
font-size:0px;
}
Maintenant, il nous reste plus qu'à définir pour chaque champ de type="text" l'image de fond et son positionnement :
#image1{
background:url(sprite.png) -0px -169px no-repeat;
}
#image2{
background:url(sprite.png) -0px -228px no-repeat;
}
#image3{
background:url(sprite.png) -0px -0px repeat-x;
}
#image4{
background:url(sprite.png) -0px -57px repeat-x;
}
#image5{
background:url(sprite.png) -0px -115px repeat-x;
}
Et voici le résultat :
Si vous avez un peut de mal avec le positionnement des images, je vous conseille de faire un petit détour sur le tutoriel consacré au Sprite CSS.
Voir/déposer un commentaire (0) | Signaler un problème