Discussion :

[rglot]

Pour remplacer dans un formulaire un bouton SUBMIT par une image, on peut procéder de la façon suivante:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<!-- monbouton.gif designe l'image d'un bouton personnalisé  -->
 
<input type="image" src="monbouton.gif"  name="ok">

Quelle syntaxe doit-on utiliser si on veut le même résultat en utilisant le type: submit ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

< input type "submit" name=...

[HiRoN]

Salut,

As-tu été faire par exemple, un tour ici (partie concernant les boutons), en ajustant le css (utilisation par ex d'un background:url(ton_url) / background-repeat:no-repeat).
Tu devrais trouver facilement bon nombre de tutoriels à ce sujet... Je t'invite à regarder les cours CSS...

[rglot]

Oui j'ai lu les tutoriels sur les boutons mais je n'arrive pas à comprendre pourquoi la syntaxe suivante ne fonctionne pas correctement :

Dans le fichier html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
< input type "submit" class="arrondi" name="ok">

avec le fichier .css correspondant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.arrondi {
  background: url("monbouton.gif");
  border: none;
  width: 80px; /* largeur à spécifier */
  height: 40px; /* longueur à spécifier */
  cursor: pointer;
}

J'ai une inscription parasite qui se superpose sur mon image de bouton dans le navigateur IE !
Est ce que j'ai oublié un paramètre dans mon fichier .css?

alors qu'en utilisant l'autre syntaxe:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="image" src="monbouton.gif"  name="ok">

L'image du bouton s'affiche correctement.

[HiRoN]

Remplaces name="Ok" par value="Ok"...
Value affichera la "nom" du bouton. Name sera utilisé pour reconnaitre le bouton lors d'action dans la page.

Donc, avec ceci :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="submit" class="arrondi" value="Envoyer" />

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.arrondi {
background:url(images/test.gif);
border:none;
width: 80px; /* largeur à spécifier */
height: 40px; /* longueur à spécifier */
cursor: pointer;
}

[rglot]

oui ça marche avec value .

Comme mon image contient déjà le texte ENVOYER, il faut que j'écrive

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="submit" class="arrondi"  name ="OK" value="" >

Mais malgré tout , ça ne m'explique pas pourquoi en omettant le paramètre value .

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="submit" class="arrondi"  name ="OK" >

J'ai un texte bizarre qui se superpose sur mon image de bouton.

[HiRoN]

IE met chez moi "Soumettre la Requête" si value n'est pas renseigné. Cela doit être un paramètre par défaut.
Je n'avais jamais rencontré le problème...
N'oublies pas le bouton si ton problème est réglé

[rglot]

IE met chez moi "Soumettre la Requête" si value n'est pas renseigné. Cela doit être un paramètre par défaut.
Je n'avais jamais rencontré le problème...

c'est un bug IE ?

[Bisûnûrs]

Non, c'est juste une valeur par défaut. Celle sur Firefox est "Envoyer".