HTML submit utilisant une image comme bouton

Bonjour, je dois récupérer la variable entrer dans un champs et l'envoyer dans une page php.
jusque là tout est normal j'utilise :

Code:

---

1 2 3 4 5 6 7 8 9 10

<div id="newsletter"> <br>l'actualité <form method="post" action="./wanewsletter/subscribe.php"> <input type="text" name="email" maxlength="100" /> <input type="hidden" name="format" value="1" /> <input type="hidden" name="liste" value="1" /> <input type="submit" name="wanewsletter" value="OK" /> </form> </div>

---

Le problème est qu'au départ il y a des images pour le champs de saisie et le boutton ok.
Comment puis je faire pour mettre ces images dans mes input??

Code:

---

1 2 3 4 5 6 7 8

<div id="newsletter">   <p>L'actualit&eacute;</p> <span id="champ-mail" type="hidden" ><span>n1</span></span> <a id="ok-btn"><span>n2</span></a> <span id="refletnews"><span>n3</span></span>   </div>

---

J'ai essayé le code suivant pour le bouton oki, mais c'est tourjours un bouton de type submit qui apparait et non l'image:

<input type="submit" id="ok-btn" class="btn-more-2" value="">

<input type="submit" id="ok-bt">

Une recherche

++

J'avais déjà fait la recherche sur google, mais je trouve comment mettre une image (ex .jpg dans un input submit).

Mais là je veux le faire avec l'image qui est dans le span (je veux garder le span).

Salut,

Citation:

---

Comment puis je faire pour mettre ces images dans mes input??
J'ai essayé le code suivant pour le bouton oki, mais c'est tourjours un bouton de type submit qui apparait et non l'image :

<input type="submit" id="ok-btn" class="btn-more-2" value="">
<input type="submit" id="ok-bt">

---

Si le but est de personnaliser ton bouton, avoir ton code CSS pourrait aider...

Bonsoir,

Un input en type image équivaut à un type submit.

Code:

---

<input type="image" src="./monImage.jpg" name="monImage" alt="validation" />

---

Merci.

Par contre je voudrais utiliser le CSS.

mon bouton est ici dans le CSS :

Code:

---

1 2 3 4 5 6

div#sidebar div#newsletter a#ok-btn{ display: block; float: left; background: transparent url(img/ok.gif) no-repeat left top; margin: 0 0 6px 16px; padding: 5px 0 5px 8px;

---

Comment je fais pour le mettre dans mon input en utilisant le css et sans mettre le chemin du gif absolu?

Citation:

---

Envoyé par diabli73

Par contre je voudrais utiliser le CSS.

---

Y a-t-il un intérêt particulier de détourner l'utilisation d'un bouton plutôt que d'utiliser un élément qui existe et dont c'est la fonction, comme le souligne Deallyra ?

Dixit moi-même : "On ne pense jamais assez à l'élément button."

J'ai mis le chemin absolu de l'image, mais évidemmant la présentation est décalé vu que je n'utilise pas le css.

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<div id="newsletter">   <p>L'actualit&eacute; </p> <form method="post" action="./wanewsletter/subscribe.php"> <span id="champ-mail" type="text" ><span>n1</span></span> <input type="image" src="http://cheminabsolu.gif" name="sidebar-btn-ok" alt="ok" /><span>n2</span>   <span id="refletnews"><span>n3</span></span> </form>   </div>

---

Avant j'avais <a id="ok-btn" ><span>n2</span></a> et la présentation était parfaite mais maintenant que j'utilise le input type="image" tout est décalé.
donc je voudrais si possible utiliser le <a id="ok-btn" > dans mon input.

Bonsoir,

tu peux mettre <<<onClick="javascript:this.submit()">>> sur l'élément que tu désires, enfin du moment que cet élément se situe dans ton form.

Dis nous si c'est ce que tu voulais réellement.

Citation:

---

Envoyé par diabli73

Avant j'avais <a id="ok-btn" ><span>n2</span></a> et la présentation était parfaite mais maintenant que j'utilise le input type="image" tout est décalé.
donc je voudrais si possible utiliser le <a id="ok-btn" > dans mon input.

---

Rien de compliquer, dans ton css tu remplace a#ok-btn par input#ok-btn et tu enlève le background: transparent url(img/ok.gif) no-repeat left top; et display:block ...

[EDIT] : Mais pourquoi autant d'héritage : div#sidebar div#newsletter a#ok-btn ???
Une Id est sensé être unique !