web-dev-qa-db-fra.com

Type de bouton "bouton" vs "soumettre"

Y a-t-il une différence entre un button avec type="button" contre type="submit"? Existe-t-il des différences fonctionnelles ou s'agit-il simplement d'un nom descriptif pour faciliter la lecture du code?

Est-ce différent de input?

htmlhtml-inputhtmlbutton
17
akantoword

De MDN :

type
Type de bouton. Les valeurs possibles sont:

  • soumettre: Le bouton soumet les données du formulaire au serveur. Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié , ou si l'attribut est modifié dynamiquement en une valeur vide ou invalide.
  • reset: Le bouton réinitialise tous les contrôles à leurs valeurs initiales.
  • bouton: Le bouton n'a pas de comportement par défaut. Il peut avoir des scripts côté client associés aux événements de l'élément, qui sont déclenchés lorsque les événements se produisent.

Quant à la différence entre button et input:

  • Un button peut avoir une valeur distincte en tant que données, tandis que pour un input les données et le texte du bouton sont toujours les mêmes:

    <input type="button" value="Button Text"> <!-- Form data will be "Button Text" -->
<button type="button" value="Data">Button Text</button>

  • Un button peut avoir du contenu HTML (par exemple des images), tandis qu'un input ne peut avoir que du texte.

  • Un button peut être plus facile à distinguer des autres contrôles input (comme les champs de texte) en CSS. Notez la compatibilité du navigateur en arrière.

    input {

}
button { /* Always works */

}
input[type=button] { /* Not supported in IE < 7 */

}
7
Midas

Un bouton de type "bouton" ne soumettra pas de formulaire mais un autre sans type ou type = submit (par défaut) le fera. Les boutons avec type = submit sont presque les mêmes que les entrées avec type = submit mais les boutons peuvent contenir du contenu HTML.

5
j08691

Les boutons peuvent être stylisés bien mieux que les entrées ne peuvent être utilisées pour les balises d'ancrage (liens).

  • Images
  • Contenu etc.

Les entrées peuvent atteindre la même fonctionnalité que les boutons mais un design plus laid.

Disons que les entrées sont oldschool, les boutons sont plus cool.

1
Grecdev
<input type="button" />

les boutons ne soumettront pas de formulaire - ils ne font rien par défaut. Ils sont généralement utilisés en conjonction avec JavaScript dans le cadre d'une application AJAX.

<input type="submit">

les boutons soumettront le formulaire dans lequel ils se trouvent lorsque l'utilisateur clique dessus, sauf indication contraire avec JavaScript.

lorsque le formulaire est soumis par le code ci-dessous, nous devons utiliser le bouton type = au lieu de type = soumettre pour empêcher la soumission du formulaire deux fois.

@using (Html.BeginForm("View", "Controller", FormMethod.Post, new { id = "signupform" }))
        {
         //Form elements
        }
1
Pergin Sheni

Ils ont un comportement par défaut différent concernant la soumission des données de formulaire au serveur. Le bouton a un attribut nommé "type" et peut contenir les valeurs suivantes:

soumettre: a le comportement par défaut de soumettre les données du formulaire au serveur. Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié ou si l'attribut est modifié dynamiquement en une valeur vide ou non valide.

bouton: Le bouton a un comportement par défaut non. Il peut avoir des scripts côté client associés aux événements de l'élément, qui sont déclenchés lorsque les événements se produisent.

1
Ahmet Arslan

Les boutons <button type="button"></button> Ne soumettront pas de formulaire - ils ne font rien par défaut. Le bouton ne soumettra pas le formulaire seul. Il s'agit d'un simple bouton qui est utilisé pour effectuer certaines opérations en utilisant javascript, tandis que Soumettre est une sorte de bouton qui, par défaut, soumet le formulaire chaque fois que l'utilisateur clique sur le bouton Soumettre.

0
Zihad Hridoy