5569 sujets

Sémantique web et HTML

<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 Smiley cligne
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 Smiley decu
Modérateur
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. Smiley smile
Modifié par Tony Monast (03 Dec 2005 - 21:27)
Modérateur
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..."
Modérateur
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 Smiley smile .
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 ?
Ouep, mon forum est un gouffre en matière d'accessibilité (javascript pour de nombreuses fonctions), et parfois même pas valide (mais c'est dur de gérer le code qui est généré par un script...

J'ai utilisé un bouton transparent (background:none; et border:0;) par dessus un fond. J'ai rajouté un cursor:pointer; pour donner la sensation d'un lien. C'est pas parfait, mais... ça marche avec la touche entrée si essentielle !

(j'ai été surpris dans mes mails de voir ce sujet ressortir !)

Le résultat
Modérateur
bonjour,

quentinC a écrit :
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 ?
.

:), cette touche entrée n'est pas forcement un reflexe, surtout que l'on peut l'utiliser dans le textarea sans soumettre le formulaire, moi même je ne soumet jamais un formulaire avec la touche entrée, et je vient cliquez sur le bouton envoyer quand j'estime (ou crois) avoir rempli mes champs correctement.
(je n'utilise pas non plus les "tabulations", chacun ses habitudes Smiley smile ou choix.)

En fait , si j'ai poster la , c'est que le onclick, convient dans la config de son forum, comme le dit Sylvain, mais surtout que la section du forum est html,xhtml, semantique web ... et que j'esperer avoir des reactions (interessantes , ... provocation sans mauvaises arriere pensées. ) plutot de ce coté la.

++
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.
Modérateur
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 Smiley smile .

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

++


Smiley smile
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)
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 Smiley langue
Modifié par optyler (06 Oct 2009 - 11:44)
Modérateur
Bonjour optyler,

Peux-tu éditer ton message pour mettre le code entre [ code] et [ /code] (sans les espaces) comme indiqué dans la FAQ ? Merci. Smiley cligne
Beaucoup de prise de tête ici on dirait, recourir au ajvascript pour un simple bouton submit Smiley eek

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)
Dynexd a écrit :
Beaucoup de prise de tête ici on dirait, recourir au ajvascript pour un simple bouton submit Smiley eek

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 ?


Pour cacher le value suffit de mettre value="" Smiley cligne
Cela ne changera rien pour le traitement des pages car en méthode POST c'est l'attribut name qui passe en paramètre.

Ainsi en reprenant l'exemple de Dynexd on peut l'agrémenter de différents boutons pour un même formulaire :


<input type='submit' class="go" style="background:url(rechercher.gif) no-repeat; value="" name="Rechercher" />
<input type='submit' class="go" style="background:url(modifier.gif) no-repeat; value="" name="Modifier" />


Et dans le css :


.go
   {
         width: 24px; // A mettre dans le style si les tailles sont différentes
         height: 24px; // Idem
         border: none;
   }

.go:hover
   {
         cursor: pointer // Pour changer la souris au survol
   }


Si il y a des questions je suis tout ouïe Smiley smile
Sujet clos
Aller à