inputest un élément vide. N'utilisez pas, utilisez <input />simplement <input>.
CDT
@ HakanFıstık, pas un dup de ça, été là, c'est un (plus ou moins subtilement) différent, par exemple type=submitcar ce buttonn'était même pas un problème là-bas (probablement parce que cela ne faisait même pas partie de la norme. À l'époque (AFAIK), lorsque cette autre question a été posée).
Sz.
Réponses:
121
Je ne sais pas d'où vous tirez vos légendes, mais:
Bouton Soumettre avec <button>
Comme avec:
<buttontype="submit">(html content)</button>
IE6 soumettra tout le texte de ce bouton entre les balises, les autres navigateurs ne soumettront que la valeur. L'utilisation <button>vous donne plus de liberté de mise en page sur la conception du bouton. Dans toutes ses intentions et objectifs, il semblait excellent au début, mais diverses bizarreries du navigateur le rendent parfois difficile à utiliser.
Dans votre exemple, IE6 enverra textau serveur, tandis que la plupart des autres navigateurs n'enverront rien. Pour le rendre compatible avec tous les navigateurs, utilisez <button type="submit" value="text">text</button>. Mieux encore: n'utilisez pas la valeur, car si vous ajoutez du HTML, ce qui est reçu côté serveur devient assez délicat. Au lieu de cela, si vous devez envoyer une valeur supplémentaire, utilisez un champ masqué.
Bouton avec <input>
Comme avec:
<inputtype="button"/>
Par défaut, cela ne fait presque rien. Il ne soumettra même pas votre formulaire. Vous ne pouvez placer du texte sur le bouton et lui donner une taille et une bordure au moyen de CSS. Son intention d'origine (et actuelle) était d'exécuter un script sans qu'il soit nécessaire de soumettre le formulaire au serveur.
Bouton d'envoi normal avec <input>
Comme avec:
<inputtype="submit"/>
Comme le premier, mais soumet en fait le formulaire environnant.
Bouton d'envoi d'image avec <input>
Comme avec:
<inputtype="image"/>
Comme le premier (soumettre), il soumettra également un formulaire, mais vous pouvez utiliser n'importe quelle image. C'était la manière préférée d'utiliser des images comme boutons lorsqu'un formulaire devait être soumis. Pour plus de contrôle, <button>est maintenant utilisé. Cela peut également être utilisé pour les images cartographiques côté serveur, mais c'est une rareté de nos jours. Lorsque vous utilisez l' usemapattribut et (avec ou sans cet attribut), le navigateur enverra les coordonnées X / Y du pointeur de la souris au serveur (plus précisément, l'emplacement du pointeur de la souris à l'intérieur du bouton au moment où vous cliquez dessus). Si vous ignorez simplement ces extras, ce n'est rien de plus qu'un bouton d'envoi déguisé en image.
Il existe quelques différences subtiles entre les navigateurs, mais tous soumettront l'attribut value, à l'exception de la <button>balise comme expliqué ci-dessus.
Depuis que vous avez de toute façon édité, le point sur IE6 est toujours vrai avec IE11 en mode bizarreries. (Encore une autre raison de ne pas utiliser le mode quirks). Corrigé dans Edge cependant. Oh, et il y a plus de différences entre <input> et <button>: <input> a white-space:prepar défaut, <button> ne le fait pas. Cela devient évident lorsque vous essayez d'élargir un bouton par rapport à la fenêtre.
Mr Lister
19
Avec <button>, vous pouvez utiliser des balises img, etc. où le texte est
<buttontype='submit'> text -- can be img etc. </button>
avec <input type="image" />vous ne sont pas limités au texte et il effectue également une soumission.
Abel
2
@Abel: c'est plus pour créer une image map qui à son tour envoie la position du pointeur de la souris en tant name.xque name.yparamètres et (notez que le nameparamètre n'est pas présent!). Je préfère utiliser <input type="submit">avec un arrière-plan CSS si le seul but est d'avoir un bouton avec une image de fond.
BalusC
@BalusC: C'est vrai, mais son but, au moment de la rédaction du standard HTML 2.0, quand il n'y avait pas de CSS, était, comme décrit, d'utiliser une image comme bouton ou comme image map côté serveur. Mais en effet, vous pouvez (ab) utiliser un bouton normal avec une image de fond pour faire de même avec CSS et HTML.
Abel
@Abel: Cela n'a jamais été l'intention de input type="image". Pour cela, le <button type="submit">est destiné.
BalusC
1
@BalusC: peut-être que nous comprenons la norme différemment, mais c'est dans le texte original de Lee pour la norme HTML 2.0: " TYPE=IMAGE' implies Traitement TYPE = SUBMIT '; c'est-à-dire que lorsqu'un pixel est choisi, le formulaire dans son ensemble est soumis." . Faites-en ce que vous pensez être la véritable intention :)
Les deux par défaut dessineront visuellement un bouton qui effectue la même action (soumettre le formulaire).
Cependant, il est recommandé de l'utiliser <button type="submit">car il a une meilleure sémantique, un meilleur support ARIA et il est plus facile à styliser.
<input type="submit">et<button type="submit">?inputest un élément vide. N'utilisez pas, utilisez<input />simplement<input>.type=submitcar cebuttonn'était même pas un problème là-bas (probablement parce que cela ne faisait même pas partie de la norme. À l'époque (AFAIK), lorsque cette autre question a été posée).Réponses:
Je ne sais pas d'où vous tirez vos légendes, mais:
Bouton Soumettre avec
<button>Comme avec:
IE6 soumettra tout le texte de ce bouton entre les balises, les autres navigateurs ne soumettront que la valeur. L'utilisation
<button>vous donne plus de liberté de mise en page sur la conception du bouton. Dans toutes ses intentions et objectifs, il semblait excellent au début, mais diverses bizarreries du navigateur le rendent parfois difficile à utiliser.Dans votre exemple, IE6 enverra
textau serveur, tandis que la plupart des autres navigateurs n'enverront rien. Pour le rendre compatible avec tous les navigateurs, utilisez<button type="submit" value="text">text</button>. Mieux encore: n'utilisez pas la valeur, car si vous ajoutez du HTML, ce qui est reçu côté serveur devient assez délicat. Au lieu de cela, si vous devez envoyer une valeur supplémentaire, utilisez un champ masqué.Bouton avec
<input>Comme avec:
Par défaut, cela ne fait presque rien. Il ne soumettra même pas votre formulaire. Vous ne pouvez placer du texte sur le bouton et lui donner une taille et une bordure au moyen de CSS. Son intention d'origine (et actuelle) était d'exécuter un script sans qu'il soit nécessaire de soumettre le formulaire au serveur.
Bouton d'envoi normal avec
<input>Comme avec:
Comme le premier, mais soumet en fait le formulaire environnant.
Bouton d'envoi d'image avec
<input>Comme avec:
Comme le premier (soumettre), il soumettra également un formulaire, mais vous pouvez utiliser n'importe quelle image. C'était la manière préférée d'utiliser des images comme boutons lorsqu'un formulaire devait être soumis. Pour plus de contrôle,
<button>est maintenant utilisé. Cela peut également être utilisé pour les images cartographiques côté serveur, mais c'est une rareté de nos jours. Lorsque vous utilisez l'usemapattribut et (avec ou sans cet attribut), le navigateur enverra les coordonnées X / Y du pointeur de la souris au serveur (plus précisément, l'emplacement du pointeur de la souris à l'intérieur du bouton au moment où vous cliquez dessus). Si vous ignorez simplement ces extras, ce n'est rien de plus qu'un bouton d'envoi déguisé en image.Il existe quelques différences subtiles entre les navigateurs, mais tous soumettront l'attribut value, à l'exception de la
<button>balise comme expliqué ci-dessus.la source
white-space:prepar défaut, <button> ne le fait pas. Cela devient évident lorsque vous essayez d'élargir un bouton par rapport à la fenêtre.Avec
<button>, vous pouvez utiliser des balises img, etc. où le texte estavec le
<input>type, vous êtes limité au textela source
<input type="image" />vous ne sont pas limités au texte et il effectue également une soumission.name.xquename.yparamètres et (notez que lenameparamètre n'est pas présent!). Je préfère utiliser<input type="submit">avec un arrière-plan CSS si le seul but est d'avoir un bouton avec une image de fond.input type="image". Pour cela, le<button type="submit">est destiné.TYPE=IMAGE' impliesTraitement TYPE = SUBMIT '; c'est-à-dire que lorsqu'un pixel est choisi, le formulaire dans son ensemble est soumis." . Faites-en ce que vous pensez être la véritable intention :)En résumé :
Les deux par défaut dessineront visuellement un bouton qui effectue la même action (soumettre le formulaire).
Cependant, il est recommandé de l'utiliser
<button type="submit">car il a une meilleure sémantique, un meilleur support ARIA et il est plus facile à styliser.la source