oujood.com

  HTML attribut d'événement onsubmit

L'attribut d'événement onsubmit se déclenche lorsqu'un formulaire est envoyé. L'attribut d'événement onsubmit fonctionne uniquement avec l’élément:form

chercher |

Définition et utilisation événement onsubmit

LES BALISES HTML

L'attribut d'événement onsubmit se déclenche lorsqu'un formulaire est envoyé.

L'attribut d'événement onsubmit fonctionne uniquement avec l’élément : <form>.

Syntaxe

<form onsubmit="script" >

Valeurs d'attribut

Valeur

Description

script

Le script à exécuter sur onsubmit


Exemple Exécuter un JavaScript lorsqu'un formulaire est soumis :

Exemple :       Copier le code

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>html5 demo</title>
  <script>
  function traitForm()
  {
  alert("Le formulaire a été soumis");
  }
  </script>
  </head>
  <body>
  <form action="demo_form.php" onsubmit="traitForm()">
  Nom: <input type="text" name="nom"><br>
  Prénom: <input type="text" name="pnom"><br>
  <input type="submit">
  </form>
  <h2>Appuyez sur le bouton de soumition pour voir le message</h2>
  <p>la fonction traitForm() est déclanchée lors de la soumission du formulaire.
  Elle montre un message.</p>
  </body>
  </html>
 

<form action="demo_form.php" onsubmit="traitForm()">: Définit un formulaire avec l'attribut action indiquant où les données du formulaire doivent être envoyées lors de la soumission. L'attribut onsubmit est utilisé pour spécifier la fonction JavaScript (traitForm()) qui doit être appelée lors de la soumission du formulaire.

Conseils et Astuces

  • Assurez-vous de retourner false dans la fonction de validation si vous ne souhaitez pas que le formulaire soit soumis.
  • Vous pouvez utiliser l'objet event pour obtenir des informations supplémentaires sur l'événement de soumission.
  • Évitez d'utiliser du code JavaScript directement dans l'attribut onsubmit pour maintenir la séparation des préoccupations. Utilisez plutôt des gestionnaires d'événements externes.
  • Testez votre formulaire dans différents navigateurs pour vous assurer de la compatibilité.

Appui de navigateur

Internet Explorer FirefoxOpera Google ChromeSafari

L'attribut d'événement onsubmit est pris en charge dans tous les principaux navigateurs.


Différences entre HTML 4.01 et HTML5

Aucune.


Exemple Valider un formulaire avec JavaScript

Exemple :       Copier le code

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Valider un formulaire</title>
  <script type="text/javascript">
  //<![CDATA[
  function valider() {
    // si la valeur du champ prenom est non vide
    if(document.this.nom.value != "") {
         if(document.this.pnom.value != "") {
         // alors on envoie le formulaire
         alert("Le formulaire a été soumis");
         }
          else {
               // sinon on affiche un message
               alert("Saisissez le prénom SVP");
                }
           }
    else {
      // sinon on affiche un message
      alert("Saisissez le nom SVP");
    }}
  //]]>
  </script>
  </head>
  <body>
  <form name="this" action="" onsubmit="valider(this)">
  Nom: <input type="text" name="nom"><br>
  Prénom: <input type="text" name="pnom"><br>
  <input type="submit">
  </body>
  </html>
 

Ce code HTML représente un formulaire simple avec une fonction JavaScript (valider()) associée à l'événement onsubmit du formulaire. Le but de ce code est de vérifier si les champs "Nom" et "Prénom" sont renseignés avant de permettre la soumission du formulaire.

cours precedent Retour à la Liste attribut d'événement 

    
Accueil du site


Par carabde 10 mars 2014



Voir aussi nos tutoriel :

Les Opérateurs en PHP

Les Opérateurs en PHP

Les sélecteurs

Le tableau résumé de sélecteur de CSS ....

Forme générale d'une page web

Apprendre comment créer sa première page web. sans logiciel de création de pages web