Bouton HTML pour NE PAS soumettre de formulaire

370

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>

javascript html

— arik
source

3

Ce problème n'est pas reproductible dans les navigateurs modernes et le problème peut à l'origine être dû à un malentendu. Bien que la valeur par défaut buttonsoit type=submit, aucun formulaire ne doit être soumis lorsque l' buttonélément est en dehors de tout formulaire. À moins qu'une démonstration réelle (un exemple de document, l'identification d'un navigateur et une description des observations montrant qu'un formulaire est soumis) puisse être donnée, cette question devrait être classée comme non reproductible. L'utilisation type=buttonest une bonne pratique, mais cela ne rend pas le problème réel.

— Jukka K. Korpela

895

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.

— Dave Markle
source

9

@Powerslave aucune raison de ne pas le faireto use <button>

— Sandip Pingle

4

@SandipPingle Il n'y a aucune raison de l'utiliser, sauf si vous avez besoin d'un style vraiment complexe. En outre, IE6 et IE7 (heureusement supprimés) ne gèrent <button>pas correctement les s dans certains cas. De plus, <button>n'est pas compatible à 100% entre les navigateurs dans la mesure où différents navigateurs peuvent soumettre des valeurs différentes pour les mêmes <button>lorsqu'ils sont utilisés dans un formulaire.

— Powerslave

35

C'est une excellente réponse, mais ce n'est pas une particularité . La valeur par défaut de l' typeattribut dans une <button>balise est submit. Lorsqu'il est modifié en type=button, le <button>ne reçoit aucun comportement par défaut. Voir typeattribut ici: developer.mozilla.org/en-US/docs/Web/HTML/Element/button

— Michael Benjamin

1

Alors, quelle est l'idée de <button type='submit'>C'est trop difficile pour moi haha. Quoi qu'il en soit, votre réponse fonctionne très bien!

— divHelper11

2

Le comportement par défaut (et donc implicite) d'un élément non spécifique à une forme est de déclencher une fonctionnalité spécifique à une forme potentiellement destructrice. Comment n'est-ce pas une décision de conception particulière pour la spécification HTML à prendre?

— HonoredMule

36

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.

— ThiefMaster
source

1

Les boutons qui ne soumettent pas de formulaires ne sont utiles que si JavaScript est activé de toute façon ... Je suis d'accord pour dire que type = "button" est plus propre cependant.

— ThiefMaster

2

return false;ne fonctionne pas dans tous les scénarios, alors type="Button"que. Même avec JavaScript activé.

— brejoc

15

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.

— Gert Grenander
source

15

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

— GJZ
source

3

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

— Tim
source

2

C'est suffisant à utiliser <input type="button" />, et c'est suffisant pour return false;- il n'est pas nécessaire de faire les deux.

— Tom

Je ne suis pas d'accord qu'il est recommandé de ne pas utiliser la balise bouton. Si vous ne l'utilisez pas, vous perdez certaines fonctionnalités d'accessibilité que vous obtiendriez automatiquement avec la balise bouton. Je dirais que la balise button est en fait recommandée pour les éléments qui agissent comme des boutons.

— CookieMonster

selon la note dans le matériel de référence que vous avez lié: "Alors que les éléments <input> de type bouton sont toujours parfaitement HTML valide, le nouvel élément <button> est maintenant la façon privilégiée de créer des boutons." C'est exactement le contraire que vous avez déclaré.

— jedzej

1

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.

— motss
source

0

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.

— kk64738
source