<input type="image" />mais type="submit" si

Bonjour à tous.

J'ai créé un formulaire me permettant de me connecter à phpBB avec un joli bouton graphique:

Malheuresement, au clic sur le bouton, rien ne se passe, la page se recharge. Je ne sais pas si celà vient du PHP de la page de connection de phpBB, ou d'une erreur dans le code.
En effet, si je remplace le type du bouton (image) par un "submit", le formulaire s'envoie parfaitement.

Voici le code du formulaire :

<form action="login.php" method="post" id="login">
		<label for="username">Saisissez votre pseudo&nbsp;:</label>
		<input type="text" name="username" id="login" /><script type="text/javascript"> document.login.username.focus();</script>
		<label for="password">Saisissez votre mot de passe:</label>
		<input type="password" name="password" id="password" />
		<input type="hidden" name="redirect" value="" />
		<input type="submit" src="templates/subSilver/login/envoyer.jpg" alt="Connexion" name="login" id="submit" />
		<input name="autologin" type="checkbox" class="heart" value="Connexion automatique" /> 
	</form>

Merci d'avance
Modifié par Sylvain (03 Dec 2005 - 12:15)

Bonjour,

C'est tout à fait normal. Derrière submit (comme derrière reset) il y a une vraiment une sorte d'ordre qui dit "aller hop c'est terminé, on appelle login.php". Alors qu'avec image ce n'est qu'un bouton lambda sur lequel tu peux mettre un lien ou des évènements JS.

++
Modifié par Boudha (03 Dec 2005 - 12:38)

Merci pour la réponse.
Pourtant, je lis sur OpenWeb:

a écrit :
Le/les bouton(s) pour envoyer le formulaire doivent être :

* soit de type « submit » : <input type="submit" value="Ok" /> ;
* soit de type image, si on veut un bouton « submit » sous forme d'image : <input type="image" src="ok.png" alt="ok" />.

Si c'est le cas, c'est dommage que celà ne marche pas

Bonjour Sylvain,

Je ne connais pas le code de PHPBB, mais lorsqu'on soumet un formulaire via un bouton submit ou un bouton image, ce n'est pas la même chose qui est envoyée au serveur.

Par exemple, un bouton image, selon le navigateur, peut envoyer seulement les coordonnées où l'image en question a été cliquée, du genre : nomboutonimage_x, nomboutonimage_y. Il faut donc que tu regarde ce que PHPBB vérifie, par exemple s'il attend de recevoir le nom du bouton submit. Si c'est le cas, il faudra que tu change le code pour qu'il réagisse également en détectant un champ du nom de nomboutonimage_x.

Voir aussi http://forum.alsacreations.com/topic.php?fid=20&tid=3098&s=submit

Note : J'ai répondu rapidement, je n'ai pas été très explicite mais j'espère que ca convient à la compréhension de la chose.
Modifié par Tony Monast (03 Dec 2005 - 21:27)

Boudha a écrit :
Alors qu'avec image ce n'est qu'un bouton lambda sur lequel tu peux mettre un lien ou des évènements JS.
++

Il ne s'agissait pas ici que d'un simple <img src="..." />, mais bien d'un input type image qui lui peut soumettre le formulaire.

Bonjour,

un peu tard mais on sait jamais :

il me semble que dans ton code tu as mis

<input type="submit" src="balblabla..." >

En fait il faut mettre, me semble t-il :

<input type="[b]image[/b]" src="blablabla..."

bonjour,

Comme ton forum requiert le javascript pour pas mal de chose, tu peut penser utiliser un input" image" comme si il s'agissait d'un input submit en lui ajoutant une action au click :

onclick="this.form.submit();"

ou tout simplement si il n'y a qu'un formulaire:

onclick="submit"

Autre soluce (sans javascript activé necessaire), mettre ton image en background au input "submit" en le dimensionnant a la taille de l'image.
Un peu de css pour enlever les bordures peut-etre et le "cliquer ici !", peut-etre est t-'il interessant de la cacher dans un label ?

<label for ="submitform" ><span> cliquez ici ! </span><input type="submit" class="en-image" id="submitform" value=""  title="cliquez pour envoyer ! " /></label> 

le span de label a mettre en position "absolute" pour qu'il soit recouvert par le input.
Le "input" avec une image en background (cachera le texte )et une taille , (largeur+hauteur de l'image).

Voila l'idée vers laquelle je me tournerais , peut-etre pas la plus fiable, vu que les formulaire et elements de formulaires peuvent avoir des aspect et comportements tres differents d'un navigateur a l'autre .
Je n'ai personellement pas eu de grosse surprises avec IE et FF.

L'idée reste donc a tester au niveau validité, accessibilité , puis rendu visuel sur les differents navigateurs .

++

Beurk ! Je n'aurais pas tilté s'il n'y avait pas eu mention de l'onclick = submit. Et la touche Entrée vous en faites quoi ?

Ce n'est pas de la provocation, je trouve juste important de signaler aux développeurs de scripts qu'il existe justement d'autres manières de naviguer et qu'il est important d'en tenir compte.

Désolé , Quentinc, l'idée de "provocation", c'etait pour mon post precedent.

avec le label , englobant l'imput, et le span en absolute restant sous l'imput.

En fait j'amenée cette idée en esperant un avis ou des critiques sur le plan "semantique" .
j'en deduis , qu'on peut se passer du "input submit "et que le js n'est pas necessaire.
, peut-etre aurais du choisir d'ouvrir un autre topic ... ou d'attendre de me trouver confronté a la question .

Va falloir que j'aprenne a m'exprimer un peu mieux .

++

Heu... arrête-moi si j'ai mal compris, mais... tu ne peux pas ne pas mettre de bouton submit... comment vas-tu soumettre le formulaire sinon ?

moi j'aimerais simplement utiliser le systeme de l'image suvolée :

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/send-ok-on.jpg',1)"><img src="images/send-ok.jpg" name="Image2" width="100" height="30" border="0"></a>

comme image du "input type="image"...

quand je le copie ou il faut l'image ne change pas au suvol.
how to do it?

Comme cela?

<input name="supprimer" value="supprimer" type="image" src="ton_bouton.gif" 
alt="supprimer" onmouseover="java script:this.src='ton_bouton_survol.gif';" onmouseout="java script:this.src='ton_bouton.gif';" />"

Modifié par toluol (30 Sep 2006 - 16:42)

Au pire tu peux remplacer <a href ... par <button type="submit"><img ... /></button>

Et pourquoi pas ajouter une simple class ...

<input type="submit" name="bt_toto" id="bt_toto" class="button" />

Et dans la css on met :

.button {
  border: 1px solid #ddd; /* Bordure grise*/
}
#bt_toto {
    background: transparent url(img/bt_toto.png) no-repeat center center;
}
#bt_toto:hover { /* ne marche pas sous IE */
    background: transparent url(img/bt_toto_on.png) no-repeat center center;    
}

voila, pour ce qui est de ma contribution, il est cependant possible d'optimiser l'affichage des images ... mais ceci est un autre débat
Modifié par optyler (06 Oct 2009 - 11:44)

Bonjour optyler,

Peux-tu éditer ton message pour mettre le code entre [ code] et [ /code] (sans les espaces) comme indiqué dans la FAQ ? Merci.

Beaucoup de prise de tête ici on dirait, recourir au ajvascript pour un simple bouton submit

Je cherchais justement un peu d'aide sur le sujet
la methode d'Optyler me parait bien plus efficace ,j'ai essayé de simplifier le plus possible :

mon bouton

<input type='submit' class="go" value='Rechercher' />

et en css

.go {
text-indent:-5000px;
width:24px;
height:24px;
border:none;
background: transparent url(imgs/go.gif) no-repeat center center;
}

Ca marche sous ff, mais ie ne semble pas tolérer le text-indent pour les value des boutons, quelqu'un saurait comment cacher la value du bouton autrement ?
Modifié par Dynexd (24 Dec 2006 - 17:21)