Html `bouton`` type = 'soumettre' `vs` type = 'bouton' `

Type = "soumission" est utilisé pour soumettre un formulaire et le clic déclenchera le comportement de soumission par défaut; Type = "Button" est un bouton normal et les opérations JS doivent être liées manuellement. 1. Cliquez sur type = "Soumettre" dans le formulaire soumettre automatiquement des données à l'adresse spécifiée. Même si l'événement OnClick est lié, il ne bloquera pas le comportement par défaut à moins que l'événement.PreventDefault () ne soit utilisé. 2. Type = "Button" ne soumet pas les formulaires et convient pour effectuer une logique personnalisée telle que la vérification et les opérations dynamiques. Il est souvent utilisé dans les cadres frontaux pour éviter les soumissions manquées. 3. Remarque: Lorsque le type n'est pas spécifié, le navigateur est considéré comme soumis par défaut. Lorsque vous effectuez des opérations non soumises, il doit être réglé sur le bouton pour éviter le toucher accidentellement. La balise de bouton est plus facile à contrôler le style que l'entrée. Sélectionnez le type en fonction de l'objectif et il est plus sûr d'écrire clairement l'attribut de type.

La différence entre l'utilisation type="submit" ou type="button" dans le formulaire est en fait très évidente, mais de nombreuses personnes sont sujettes à la confusion au début. Autrement dit: submit est de soumettre un formulaire, tandis que button est un bouton ordinaire qui ne déclenchera pas automatiquement le comportement de soumission .

Si vous écrivez une logique de fonctionnement du formulaire, la sélection du mauvais type peut ne pas être soumise au formulaire, ou la liaison de l'événement JS ne répond pas. Par conséquent, il est très important de comprendre leurs utilisations et leurs scénarios d'utilisation.

1. type="submit" : bouton dédié pour la soumission du formulaire

La fonction de ce bouton est claire, en cliquant, il essaiera de soumettre le formulaire actuel . Peu importe que vous ayez écrit JS Logic ou non, tant qu'il est dans la balise <form></form> , le clic déclenchera le comportement de soumission par défaut du navigateur.

Par exemple:

 <form action = "/ soumi" méthode = "post">
  <input type = "text" name = "username" />
  <Button Type = "Soumider"> Registre </ftones>
</ form>

Dans le code ci-dessus, cliquez sur le bouton "Enregistrer" et le navigateur soumettra les données du formulaire à /submit .

Astuce: même si vous liez l'événement onclick , le comportement par défaut du bouton Soumettre ne sera pas automatiquement bloqué à moins que vous appeliez event.preventDefault() dans JS.

2. type="button" : un bouton pur qui nécessite un contrôle manuel du comportement

Ce bouton ne déclenchera aucun comportement de soumission de formulaire par défaut et convient pour la liaison des opérations JavaScript personnalisées , telles que la vérification du formulaire, l'ajout de champ dynamique, l'état de commutation, etc.

Par exemple:

 <form id = "myform">
  <input type = "text" name = "e-mail" />
  <Button Type = "Button" onClick = "ValidateForm ()"> Vérifiez l&#39;e-mail </fut Button>
</ form>

<cript>
fonction valideform () {
  const e-mail = document.QuerySelector (&#39;[name = "email"]&#39;). valeur;
  if (! email.cludscludes (&#39;@&#39;)) {
    alert («Le format de boîte aux lettres est incorrect»);
  }
}
</cript>

Cliquer sur le bouton à ce moment ne soumetra pas le formulaire, mais exécutera validateForm() que vous avez écrite.

Conseils: Si vous utilisez des frameworks frontaux (tels que React, Vue), vous utiliserez généralement type="button" pour éviter les soumissions inattendues.

3. Malets et précautions courantes

• Le type par défaut est soumis : Si vous n'écrivez pas type , le navigateur sera par défaut de type="submit" , ce qui peut ne pas être le résultat que vous souhaitez.
• Évitez de vous combler : lorsque vous effectuez des opérations internes du formulaire (comme l'ajout d'une ligne ou la suppression d'un élément), assurez-vous d'utiliser type="button" , sinon la soumission sera déclenchée si vous ne faites pas attention.
• La différence entre : <button></button> est plus flexible, peut placer des icônes et des combinaisons de texte, et le style est plus facile à contrôler.

4. Comment choisir? Dépendre de la demande

• S'il s'agit du bouton "Soumettre" du formulaire, utilisez type="submit" ;
• S'il s'agit de fonctions telles que "Annuler", "Ajoutez une ligne" et "Aperçu", utilisez type="button" ;
• Lorsque vous êtes incertain, rédigez clairement type et ne comptez pas sur le comportement par défaut.

Fondamentalement, c'est tout. Bien qu'il semble simple, dans le développement réel, la détermination de l'objectif des boutons peut éviter de nombreux problèmes mineurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!