type d'entrée = «soumettre» La balise du bouton Vs est-elle interchangeable?

input type="submit"et le buttontag sont-ils interchangeables? ou s'il y a une différence, alors quand l'utiliser input type="submit"et quand button?

Et s'il n'y a pas de différence, pourquoi avons-nous 2 balises dans le même but?

http://www.w3.org/TR/html4/interact/forms.html#h-17.5

Les boutons créés avec l'élément BUTTON fonctionnent comme les boutons créés avec l'élément INPUT, mais ils offrent des possibilités de rendu plus riches: l'élément BUTTON peut avoir du contenu. Par exemple, un élément BUTTON qui contient une image fonctionne comme et peut ressembler à un élément INPUT dont le type est défini sur "image", mais le type d'élément BUTTON autorise le contenu.

Donc, pour la fonctionnalité seulement, ils sont interchangeables!

(N'oubliez pas, type="submit"c'est la valeur par défaut button, alors laissez-la!)

Le <input type="button">est juste un bouton et ne fera rien par lui-même. Le <input type="submit">, à l'intérieur d'un élément de formulaire, soumettra le formulaire lorsque vous cliquez dessus.

Un autre bouton «spécial» utile est <input type="reset">celui qui effacera le formulaire.

Utilisez la balise <button> au lieu de <input type = "button" ..> . C'est la pratique conseillée dans le bootstrap 3.

http://getbootstrap.com/css/#buttons-tags

"Rendu multi-navigateur

En tant que meilleure pratique, nous vous recommandons fortement d'utiliser l'élément <button> dans la mesure du possible pour garantir la correspondance entre les navigateurs.

Entre autres choses, il y a un bogue Firefox qui nous empêche de définir la hauteur de ligne des boutons basés sur <input>, les faisant ne pas correspondre exactement à la hauteur des autres boutons sur Firefox. "

Bien que les deux éléments fournissent fonctionnellement le même résultat *, je vous recommande fortement d'utiliser<button> :

• Beaucoup plus explicite et lisible. inputsuggère que le contrôle est modifiable ou peut être modifié par l'utilisateur;buttonest beaucoup plus explicite quant à l'objectif qu'il sert
• Plus facile à styliser en CSS; comme mentionné ci-dessus, FIrefox et IE ont des bizarreries qui input[type="submit"]ne s'affichent pas correctement dans certains cas
• Demandes prévisibles: IE a des comportements très positifs lorsque des valeurs sont soumises dans la demande POST/ GETau serveur
• Compatible avec le balisage; vous pouvez imbriquer des éléments, par exemple des icônes, à l'intérieur du bouton.
• HTML5, avant-gardiste; en tant que développeurs, il est de notre responsabilité d'adopter la nouvelle spécification une fois qu'elle est officialisée. HTML5, en ce moment, est officiel depuis plus d'un an maintenant, et il a été démontré dans de nombreux cas qu'il stimule le référencement .

* _{À l'exception de qui par défaut n'a aucun comportement spécifié.<button type="button">}

En résumé, je déconseille fortement l'utilisation de<input type="submit" /> .

<input type='submit' />ne prend pas en charge HTML à l'intérieur, car il s'agit d'une seule balise à fermeture automatique. <button>, D'autre part, prend en charge HTML, images, etc. à l' intérieur , car il est une paire de tag: <button><img src='myimage.gif' /></button>. <button>est également plus flexible en ce qui concerne le style CSS.

L'inconvénient <button>est qu'il n'est pas entièrement pris en charge par les anciens navigateurs. IE6 / 7, par exemple, ne l'affiche pas correctement.

Sauf si vous avez une raison précise, il est probablement préférable de s'y tenir <input type='submit' />.

Je me rends compte que c'est une vieille question mais je l'ai trouvée sur mozilla.org et je pense qu'elle s'applique.

Un bouton peut être de trois types: soumettre, réinitialiser ou bouton. Un clic sur un bouton d'envoi envoie les données du formulaire à la page Web définie par l'attribut action de l'élément.

Un clic sur un bouton de réinitialisation réinitialise immédiatement tous les widgets du formulaire à leur valeur par défaut. D'un point de vue UX, cela est considéré comme une mauvaise pratique.

Un clic sur un bouton bouton ne fait ... rien! Cela peut paraître idiot, mais c'est incroyablement utile pour créer des boutons personnalisés avec JavaScript.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish

<button>est plus récent que <input type="submit">, est plus sémantique, facile à styliser et prend en charge le HTML à l'intérieur.

Bien que les autres réponses soient excellentes et répondent à la question, il y a une chose à considérer lors de l'utilisation de input type="submit"et button. Avec un, input type="submit"vous ne pouvez pas utiliser un pseudo-élément CSS sur l'entrée mais vous pouvez le faire pour un bouton!

C'est l'une des raisons d'utiliser un buttonélément sur une entrée pour le style.

Je ne sais pas s'il s'agit d'un bogue ou d'une fonctionnalité, mais il y a une différence très importante (dans certains cas au moins) que j'ai trouvée: <input type="submit">crée une paire de valeurs clés dans votre demande et <button type="submit">ne le fait pas. Testé dans Chrome et Safari.

Donc, lorsque vous avez plusieurs boutons d'envoi dans votre formulaire et que vous voulez savoir sur lequel vous avez cliqué - ne l'utilisez pas button, utilisez input type="submit"plutôt.

Si vous parlez <input type=button>, il ne soumettra pas automatiquement le formulaire

si vous parlez de la <button>balise, c'est plus récent et ne se soumet pas automatiquement dans tous les navigateurs.

En fin de compte, si vous souhaitez que le formulaire soit soumis au clic dans tous les navigateurs, utilisez <input type="submit">