Différence entre <input type = 'submit' /> et <button type = 'submit'> text </button>

Il existe de nombreuses légendes à leur sujet. Je veux connaître la vérité. Quelles sont les différences entre les deux exemples suivants?

1. <input type='submit' value='text' />

2. <button type='submit'>text</button>

Je ne sais pas d'où vous tirez vos légendes, mais:

Bouton Soumettre avec <button>

Comme avec:

<button type="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:

<input type="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:

<input type="submit" />

Comme le premier, mais soumet en fait le formulaire environnant.

Bouton d'envoi d'image avec <input>

Comme avec:

<input type="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.

Avec <button>, vous pouvez utiliser des balises img, etc. où le texte est

<button type='submit'> text -- can be img etc.  </button>

avec le <input>type, vous êtes limité au texte

En résumé :

<input type="submit">

<button type="submit"> Submit </button>

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.