Bouton HTML pour NE PAS soumettre de formulaire

J'ai un formulaire. En dehors de ce formulaire, j'ai un bouton. Un simple bouton, comme celui-ci:

<button>My Button</button>

Néanmoins, lorsque je clique dessus, il soumet le formulaire. Voici le code:

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

Tout ce que ce bouton devrait faire, c'est du JavaScript. Mais même quand il ressemble au code ci-dessus, il soumet le formulaire. Lorsque je change le bouton de balise pour s'étendre, cela fonctionne parfaitement. Mais malheureusement, ce doit être un bouton. Existe-t-il un moyen d'empêcher ce bouton d'envoyer le formulaire? Comme par exemple

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

Je pense que c'est la petite particularité la plus agaçante du HTML ... Ce bouton doit être de type "bouton" pour ne pas se soumettre.

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

Mise à jour du 5 février 2019: selon le standard HTML Living (ainsi que la spécification HTML 5 ):

La valeur manquante par défaut et la valeur non valide par défaut sont l'état du bouton Soumettre.

return false;à la fin du gestionnaire onclick fera le travail. Cependant, il est préférable d'ajouter simplement type="button"à <button>- de cette façon, il se comporte correctement même sans JavaScript.

Dave Markle a raison. Depuis le site Web de W3School :

Spécifiez toujours l'attribut type du bouton. Le type par défaut pour Internet Explorer est «bouton», tandis que dans d'autres navigateurs (et dans la spécification W3C), il est «soumettre».

En d'autres termes, le navigateur que vous utilisez suit les spécifications du W3C.

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 "soumettre" par défaut

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

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

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

D'autres options incluent le retour de faux à la fin du onclick ou de tout autre gestionnaire lorsque vous cliquez sur le bouton, ou l'utilisation d'une balise <input> à la place

Pour en savoir plus, consultez les informations du Mozilla Developer Network sur les boutons: https://developer.mozilla.org/en/docs/Web/HTML/Element/button

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

Quelques documents de référence

Pour des raisons d'accessibilité, je n'ai pas pu le retirer avec plusieurs type=submitboutons. La seule façon de travailler en mode natif avec un formavec plusieurs boutons, mais SEULEMENT on peut soumettre le formulaire en appuyant sur la Entertouche est de s'assurer que l'un d'eux est de type=submittandis que d'autres sont dans un autre type tel que type=button. De cette façon, vous pouvez bénéficier de la meilleure expérience utilisateur en traitant un formulaire sur un navigateur en termes de prise en charge du clavier.

Une autre option qui a fonctionné pour moi était d'ajouter onsubmit = "return false;" à la balise de formulaire.

<form onsubmit="return false;">

Sémantiquement, ce n'est probablement pas une aussi bonne solution que les méthodes ci-dessus pour changer le type de bouton, mais cela semble être une option si vous voulez juste un élément de formulaire qui ne sera pas soumis.