web-dev-qa-db-fra.com

Bouton HTML pour ne pas soumettre le formulaire

J'ai un formulaire. En dehors de cette forme, j'ai un bouton. Un simple bouton, comme ceci:

<button>My Button</button>

Néanmoins, lorsque je clique dessus, le formulaire est envoyé. Voici le code:

<form id="myform">
    <input />
</form>
<button>My Button</button>

Tout ce que ce bouton devrait faire est du JavaScript. Mais même si cela ressemble au code ci-dessus, il soumet le formulaire. Lorsque je modifie le bouton de balise pour qu'il s'étende, cela fonctionne parfaitement. Mais malheureusement, il faut que ce soit un bouton. Est-il possible d'empêcher ce bouton de soumettre le formulaire? Comme e. g.

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>
javascripthtml
314
arik

Je pense que ceci est la petite particularité la plus ennuyante de HTML ... Ce bouton doit être de type "bouton" pour ne pas être soumis. 

<button type="button">My Button</button>

Mise à jour du 5 février 2019: Selon le HTML Living Standard (et aussi Spécification HTML 5 ):

Les valeur par défaut manquante _ et valeur par défaut non valide sont les fichiers Submit. Etat du bouton.

775
Dave Markle

return false; à la fin du gestionnaire onclick fera le travail. Cependant, il est préférable d’ajouter simplement type="button" au <button> - afin qu’il se comporte correctement même sans JavaScript.

33
ThiefMaster

Dave Markle a raison. De site Web de W3School :

Spécifiez toujours l'attribut type pour le bouton. Le type par défaut pour Internet Explorer est "bouton", alors que dans d'autres navigateurs (et dans les spécifications du W3C ), il s'agit de "submit".

En d'autres termes, le navigateur que vous utilisez est conforme aux spécifications du W3C.

14
Gert Grenander

Par défaut, les boutons html soumettent un formulaire.

Cela est dû au fait que même les boutons situés en dehors d'un formulaire agissent en tant qu'émetteurs (voir le site Web de W3Schools: http://www.w3schools.com/tags/att_button_form.asp )

En d'autres termes, le type de bouton est "submit" par défaut

<button type="submit">Button Text</button>

Par conséquent, un moyen facile de contourner ce problème consiste à utiliser le type de bouton .

<button type="button">Button Text</button>

D'autres options incluent le retour de false à la fin du onclick ou de tout autre gestionnaire pour le moment où le bouton est cliqué, ou l'utilisation d'une balise <input> à la place. 

Pour en savoir plus, consultez les informations sur les boutons du réseau de développeurs Mozilla: https://developer.mozilla.org/en/docs/Web/HTML/Element/button

10
GJZ

Il est recommandé de ne pas utiliser la balise <Button>. Utilisez plutôt la balise <Input type='Button' onclick='return false;'>. (L'utilisation de "return false" ne devrait en effet pas envoyer le formulaire.)

Certains matériel de référence

3
Tim

Pour des raisons d'accessibilité, je ne pouvais pas le retirer avec plusieurs boutons type=submit. La seule façon de travailler en mode natif avec une variable form avec plusieurs boutons, maisUNIQUEMENT, vous pouvez soumettre le formulaire lorsque vous appuyez sur la touche Enter consiste à vous assurer qu'un seul d'entre eux est de type=submit tandis que d'autres sont de type autre que type=button . De cette manière, vous pouvez bénéficier d'une meilleure expérience utilisateur pour gérer un formulaire sur un navigateur en termes de prise en charge du clavier.

0
motss