Comment empêcher un bouton de soumettre un formulaire en HTML et JavaScript ?

Comment empêcher un bouton de soumettre un formulaire

En HTML, lorsqu'un bouton est cliqué dans un formulaire, il déclenche généralement le formulaire soumission. Cependant, il existe des scénarios dans lesquels vous souhaiterez peut-être qu'un bouton effectue une action spécifique sans soumettre le formulaire.

Considérez le formulaire suivant :

<code class="html"><form id="myform">
  <label>Label
    <input />
  </label>
</form>
<button>My Button</button></code>

Dans cet exemple, cliquer sur le bouton déclenche toujours la soumission du formulaire même si elle se trouve en dehors de l'élément de formulaire. Pour éviter ce comportement indésirable, vous pouvez spécifier l'attribut type="button" pour le bouton :

<code class="html"><button type="button">My Button</button></code>

Solution alternative via JavaScript

Si vous préférez gérer ceci en utilisant JavaScript, vous pouvez désactiver le comportement de soumission de formulaire par défaut. Voici un exemple utilisant des écouteurs d'événements :

<code class="html"><button onclick="event.preventDefault();">My Button</button></code>

Dans ce cas, la fonction event.preventDefault() empêche la soumission du formulaire lorsque vous cliquez sur le bouton.

Conclusion

En spécifiant type="button" pour le bouton ou en utilisant JavaScript pour supprimer l'action par défaut, vous pouvez empêcher un bouton de soumettre un formulaire même lorsqu'il est situé en dehors de l'élément de formulaire.

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!