HTMLFormElement : évènement submit

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

L'évènement submit de l'interface HTMLFormElement se déclenche lorsqu'un élément HTML <form> est soumis.

Notez que l'évènement submit se déclenche sur l'élément <form> lui‑même, et non sur un <button> ni sur un <input type="submit"> qu'il contient. Toutefois, le SubmitEvent envoyé pour indiquer que l'action de soumission a été déclenchée comprend une propriété submitter, qui est le bouton invoqué pour déclencher la requête de soumission.

L'évènement submit se déclenche lorsque :

l'utilisateur·ice clique sur un bouton de soumission,
l'utilisateur·ice appuie sur Entrée lors de la saisie dans un champ (par exemple, <input type="text">) dans un formulaire,
un script appelle la méthode form.requestSubmit()

En revanche, l'évènement n'est pas envoyé au formulaire lorsqu'un script appelle directement la méthode form.submit().

Note : Tenter de soumettre un formulaire qui ne passe pas la validation déclenche un évènement invalid. Dans ce cas, la validation empêche la soumission du formulaire, et il n'y a donc pas d'évènement submit.

Dans cet article

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété gestionnaire d'évènements.

js
addEventListener("submit", (event) => { })

onsubmit = (event) => { }

Type d'évènement

Un objet SubmitEvent. Hérite de Event.

Event SubmitEvent

Propriétés de l'évènement

En plus des propriétés listées ci‑dessous, cette interface hérite des propriétés de son interface parente, Event.

submitter Lecture seule

Un objet HTMLElement qui identifie le bouton ou l'autre élément utilisé pour déclencher la soumission du formulaire.

Exemples

Cet exemple utilise EventTarget.addEventListener() pour écouter la soumission d'un formulaire, enregistre le Event.timeStamp actuel à chaque occurrence, puis empêche l'action par défaut de soumission du formulaire.

HTML

html
<form id="form">
  <label>Champ de test&nbsp;: <input type="text" /></label>
  <br /><br />
  <button type="submit">Soumettre le formulaire</button>
</form>
<p id="log"></p>

JavaScript

js
const form = document.getElementById("form");
const log = document.getElementById("log");

function logSubmit(event) {
  log.textContent = `Formulaire soumis ! Horodatage : ${event.timeStamp}`;
  event.preventDefault();
}

form.addEventListener("submit", logSubmit);

Résultat

Spécifications

Spécification

HTML
# event-submit

HTML
# handler-onsubmit

Compatibilité des navigateurs

Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.

Voir aussi

L'élément HTML <form>
Évènement lié : invalid

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 7 déc. 2025 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

API HTML DOM
HTMLFormElement
Propriétés d'instance
Méthodes d'instance
Évènements
1. formdata
2. reset
3. submit
Héritage
Pages liées à HTML DOM
Guides
1. Utiliser les microtâches en JavaScript avec queueMicrotask()
2. Aller plus loin : Les microtâches et l'environnement d'exécution JavaScript