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

Question

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>

Answer 1

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

Bouton de soumission 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 de <button> vous offre une plus grande liberté dans la conception du bouton. Dans tous les cas, il semblait excellent au départ, mais certaines bizarreries du navigateur le rendent parfois difficile à utiliser.

Dans votre exemple, IE6 enverra text au serveur, alors que la plupart des autres navigateurs n'envoient rien. Pour assurer la compatibilité entre les navigateurs, utilisez <button type="submit" value="text">text</button> . Mieux encore : n'utilisez pas la valeur, car si vous ajoutez du HTML, il devient assez délicat de savoir ce qui est reçu du côté du serveur. Si vous devez envoyer une valeur supplémentaire, utilisez plutôt un champ caché.

Bouton avec <input>

Comme avec :

<input type="button" />

Par défaut, cette fonction ne fait pratiquement rien. Il ne soumettra même pas votre formulaire. Vous pouvez seulement placer du texte sur le bouton et lui donner une taille et une bordure au moyen de CSS. Son but initial (et actuel) était d'exécuter un script sans qu'il soit nécessaire de soumettre le formulaire au serveur.

Bouton de soumission normal avec <input>

Comme avec :

<input type="submit" />

Comme le premier, mais il soumet le formulaire environnant.

Bouton de soumission d'image avec <input>

Comme avec :

<input type="image" />

Comme le précédent (soumettre), il soumettra également un formulaire, mais vous pouvez utiliser n'importe quelle image. Il s'agissait auparavant de la méthode préférée pour utiliser des images comme boutons lorsqu'un formulaire devait être soumis. Pour plus de contrôle, <button> est désormais utilisé. Il peut également être utilisé pour cartes d'images côté serveur mais c'est rare de nos jours. Lorsque vous utilisez le usemap -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 ne tenez pas compte de ces éléments supplémentaires, il ne s'agit que d'un bouton de soumission déguisé en image.

Il existe quelques différences subtiles entre les navigateurs, mais tous soumettront l'attribut value, à l'exception du navigateur <button> comme expliqué ci-dessus.

Answer 2

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

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

avec <input> vous êtes limité au texte

Answer 3

En résumé :

<input type="submit">

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

Par défaut, les deux dessinent visuellement un bouton qui effectue la même action (soumettre le formulaire).

Toutefois, il est recommandé d'utiliser <button type="submit"> parce qu'il a une meilleure sémantique, qu'il supporte mieux ARIA et qu'il est plus facile à styliser.