input type = "submit" Vs tag tag sont-ils interchangeables?
input type="submit" et button tag sont-ils interchangeables? ou s'il y a une différence alors Quand utiliser input type="submit" et quand button?
Et s'il n'y a pas de différence, alors pourquoi avons-nous 2 tags pour 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 offrent des possibilités de rendu plus riches: l'élément BUTTON peut avoir un contenu. Par exemple, un élément BUTTON contenant une image fonctionne comme un élément INPUT et 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 que type="submit" est la valeur par défaut avec button, laissez-le donc!)
Le <input type="button"> est juste un bouton et ne fait rien par lui-même. Le <input type="submit">, lorsqu'il se trouve dans un élément de formulaire, soumet le formulaire lorsque l'utilisateur clique dessus.
Un autre bouton 'spécial' utile est le <input type="reset"> qui effacera le formulaire.
Utilisez la balise <button> au lieu de <input type = "button" ..> . C’est la pratique recommandée dans bootstrap 3.
http://getbootstrap.com/css/#buttons-tags
"Rendu multi-navigateur
Il est vivement recommandé d’utiliser l’élément <button> chaque fois que possible pour assurer un rendu correspondant sur plusieurs navigateurs.
Entre autres choses, un bug de Firefox nous empêche de définir la hauteur de ligne des boutons basés sur <entrée>, ce qui les empêche de correspondre exactement à la hauteur des autres boutons de Firefox. "
<input type='submit' /> ne prend pas en charge le langage HTML, car il s'agit d'une balise à fermeture automatique. <button> prend en charge HTML, les images, etc. à l'intérieur, car il s'agit d'une paire de balises: <button><img src='myimage.gif' /></button>. <button> est également plus flexible en ce qui concerne le style CSS.
L'inconvénient de <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 spécifique, il est probablement préférable de vous en tenir à <input type='submit' />.
Bien que les deux éléments fournissent fonctionnellement le même résultat *, je vous recommande fortement d'utiliser <button>:
- Bien plus explicite et lisible.
inputsuggère que le contrôle est éditable ou peut être édité par l'utilisateur;buttonest beaucoup plus explicite quant à son objectif - Plus facile à styler en CSS; comme mentionné ci-dessus, FIrefox et IE ont des défauts dans lesquels
input[type="submit"]ne s'affichent pas correctement dans certains cas - Requêtes prévisibles: IE a des comportements très volumineux lorsque des valeurs sont soumises dans la requête
POST/GETau serveur. - Balisage facile; 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. En ce moment, HTML5 est officiel depuis plus d'un an et il a souvent été démontré que boost SEO.
* À l'exception de <button type="button"> qui, par défaut, n'a pas de comportement spécifié.
En résumé, je décourage fortement l'utilisation de <input type="submit" />.
Je réalise que c’est une vieille question, mais j’ai trouvé cela sur mozilla.org et je pense que cela 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 d'action de l'élément.
Un clic sur un bouton de réinitialisation réinitialise immédiatement tous les widgets de formulaire à leur valeur par défaut. Du point de vue de l'expérience utilisateur, cela est considéré comme une mauvaise pratique.
Un clic sur un bouton ne fait ... rien! Cela semble idiot, mais il est incroyablement utile de créer des boutons personnalisés avec JavaScript.
<button> est plus récent que <input type="submit">, est plus sémantique, facile à styliser et supporte le HTML à l'intérieur.
Alors que les autres réponses sont excellentes et répondent à la question, il y a une chose à considérer lors de l'utilisation de input type="submit" et de button. Avec un input type="submit" vous ne pouvez pas utiliser un pseudo-élément CSS sur l'entrée mais vous pouvez pour un bouton!
C'est une des raisons pour utiliser un élément button sur une entrée en matière de 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 (du moins dans certains cas) que j'ai constatée: <input type="submit"> crée une paire de valeurs de clé dans votre demande et <button type="submit"> doesn ' t. Testé dans Chrome et Safari.
Ainsi, lorsque vous avez plusieurs boutons de soumission dans votre formulaire et que vous voulez savoir sur lequel vous avez cliqué, n'utilisez pas button, utilisez plutôt input type="submit".