Comment puis-je empêcher les éléments de bouton de soumettre des formulaires ?

Peut Les éléments doivent-ils être configurés pour éviter la soumission de formulaire ?

Un dilemme courant se pose lors de l'utilisation à la fois du et éléments dans un formulaire, chacun servant un objectif distinct. Pendant que le Les éléments sont souvent utilisés à des fins de style, ils héritent d'un comportement par défaut consistant à soumettre le formulaire lorsque vous cliquez dessus. Cela peut poser un problème si un est destiné à effectuer une action sans déclencher l'envoi du formulaire.

Pour résoudre cette énigme, la clé réside dans la modification de l'attribut type du . Par défaut, il est défini sur « soumettre », ce qui entraîne la soumission du formulaire. Cependant, le définir sur « bouton » annule effectivement ce comportement par défaut.

Exemple :

Considérez le code HTML suivant :

<button type="submit">Submit</button>
<a href="index.html"><button>Cancel changes</button></a>

Dans Dans cet exemple, le premier bouton soumet le formulaire, tandis que le deuxième bouton permet d'accéder à la page "index.html". Cependant, si l'objectif est de styliser le bouton « Annuler les modifications » avec jQuery UI sans provoquer la soumission du formulaire, la modification de l'attribut devrait ressembler à ceci :

<a href="index.html"><button type="button">Cancel changes</button></a>

En définissant le type sur « bouton », le bouton conserve ses capacités de style sans déclencher la soumission du formulaire.

Remarque :

Il convient de noter que spécifier type="button" dans le balisage HTML est une approche plus propre et plus efficace que de s'appuyer sur des gestionnaires d'événements JavaScript pour empêcher la soumission 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!