Formulaires en HTML: <form>

1.1 Élément <form>

Les formulaires sont une partie importante de l'interaction de l'utilisateur avec les sites web. À l'aide de formulaires, les utilisateurs peuvent entrer des données, qui sont ensuite envoyées au serveur pour traitement. En HTML, l'élément <form> est utilisé pour créer des formulaires.

La balise <form> est utilisée pour créer un formulaire sur une page web. Elle sert de conteneur pour divers éléments du formulaire, tels que des champs de texte, des boutons, des cases à cocher, etc. Toutes les données saisies par l'utilisateur peuvent être envoyées au serveur pour traitement.

Exemple d'utilisation :

    
      <form action="/submit" method="post">
        <label for="username">Nom d'utilisateur:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button id="submit" type="submit">Envoyer</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const userEmail = document.getElementById("email");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && userEmail.validity.valid) {
            e.preventDefault();
            alert(`Votre nom: ${userName.value}\n` + `Votre Email: ${userEmail.value}`);
          }
        });
      </script>
    
  

    
      <form action="/submit" method="post">
        <label for="username">Nom d'utilisateur:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button type="submit">Envoyer</button>
      </form>
    
  

Attributs de la balise <form>

L'attribut action spécifie l'URL à laquelle les données du formulaire seront envoyées après avoir cliqué sur le bouton d'envoi. Si l'attribut action n'est pas spécifié, les données du formulaire seront envoyées à l'URL actuelle.

Exemple d'utilisation de l'attribut action :

    
      <form action="https://example.com/submit">
        <!-- éléments du formulaire -->
      </form>
    
  

L'attribut method spécifie la méthode HTTP à utiliser pour envoyer les données du formulaire. Deux valeurs sont disponibles : GET et POST.

1. GET: les données du formulaire sont incluses dans l'URL sous forme de paramètres. Cette méthode convient pour envoyer de petites quantités de données et ne doit pas être utilisée pour envoyer des informations sensibles.
2. POST: les données du formulaire sont envoyées dans le corps de la requête HTTP. Cette méthode convient pour envoyer de grandes quantités de données et des informations sensibles.

Exemple d'utilisation de l'attribut method :

    
      <form action="/submit" method="post">
        <!-- éléments du formulaire -->
      </form>
    
  

1.2 Méthodes d'envoi de données

Méthode GET

La méthode GET envoie les données du formulaire sous forme de paramètres d'URL. Cette méthode est utilisée par défaut si l'attribut method n'est pas spécifié.

Exemple d'utilisation de la méthode GET :

    
      <form action="/search" method="get">
        <label for="query">Recherche:</label>
        <input type="text" id="query" name="query" required>
        <button id="submit" type="submit">Rechercher</button>
      </form>
      <script>
        const searchField = document.getElementById("query");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (searchField.validity.valid) {
            e.preventDefault();
            alert(`Vous avez cherché: ${searchField.value}`);
          }
        });
      </script>
    
  

    
      <form action="/search" method="get">
        <label for="query">Recherche:</label>
        <input type="text" id="query" name="query">
        <button type="submit">Rechercher</button>
      </form>
    
  

Particularités de la méthode GET

• Les données du formulaire sont visibles dans l'URL, ce qui rend la méthode inappropriée pour transmettre des informations sensibles
• Limitation de la taille des données, car l'URL a une longueur limitée
• Les données peuvent être facilement mises en cache, et un signet peut être enregistré dans le navigateur

Méthode POST

La méthode POST envoie les données du formulaire dans le corps de la requête HTTP. Cette méthode est utilisée pour transmettre de grandes quantités de données et des informations sensibles.

Exemple d'utilisation de la méthode POST :

    
      <form action="/submit" method="post">
        <label for="username">Nom d'utilisateur:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Mot de passe:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Envoyer</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert(`Bienvenue, ${userName.value}!`);
          }
        });
      </script>
    
  

    
      <form action="/submit" method="post">
        <label for="username">Nom d'utilisateur:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Mot de passe:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">Envoyer</button>
      </form>
    
  

Particularités de la méthode POST

• Les données du formulaire ne sont pas visibles dans l'URL, ce qui rend la méthode appropriée pour transmettre des informations sensibles
• Aucune limitation de la taille des données, car les données sont transmises dans le corps de la requête
• Les données ne sont pas mises en cache et ne sont pas enregistrées dans les signets du navigateur

1.3 Attributs supplémentaires

Attribut enctype

L'attribut enctype est utilisé pour spécifier la manière dont les données du formulaire sont encodées lors de l'envoi avec la méthode POST. La valeur la plus couramment utilisée est multipart/form-data, qui est nécessaire pour le téléchargement de fichiers.

Exemple d'utilisation de l'attribut enctype :

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Télécharger le fichier:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Envoyer</button>
      </form>
    
  

Attribut target

L'attribut target spécifie où la réponse du serveur sera affichée après l'envoi du formulaire. Les valeurs possibles :

• _self (par défaut): dans la même fenêtre ou onglet
• _blank: dans une nouvelle fenêtre ou un nouvel onglet
• _parent: dans le cadre parent
• _top: dans le cadre supérieur (si des cadres sont utilisés)

Exemple d'utilisation de l'attribut target :

    
      <form action="/submit" method="post" target="_blank">
        <!-- éléments du formulaire -->
      </form>
    
  

Attribut novalidate

L'attribut novalidate désactive la validation intégrée du formulaire par le navigateur.

Exemple d'utilisation de l'attribut novalidate :

    
      <form action="/submit" method="post" novalidate>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">Envoyer</button>
      </form>
    
  

1.4 Moyens d'envoi de données

L'envoi des données du formulaire s'effectue à l'aide d'un bouton d'envoi : <input type="submit"> ou <button type="submit">. Lorsque l'utilisateur clique sur ce bouton, le navigateur envoie les données du formulaire au serveur, en utilisant la méthode et l'URL spécifiées.

Voici les principaux moyens d'envoi des données du formulaire :

1. Bouton d'envoi: c'est le moyen le plus courant d'envoyer des données de formulaire. Un bouton d'envoi peut être créé avec un élément <input> ou <button>.

Exemple avec <input> :

    
      <input type="submit" value="Submit">
    
  

Exemple avec <button> :

    
      <button type="submit">Submit</button>
    
  

2. Touche Entrée: dans les champs de texte du formulaire, appuyer sur la touche Entrée peut également déclencher l'envoi du formulaire.

3. JavaScript: le formulaire peut être envoyé programmé par JavaScript. C'est utile lorsque des vérifications supplémentaires ou d'autres actions doivent être effectuées avant l'envoi des données.

Exemple d'utilisation de JavaScript pour envoyer un formulaire :

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Nom d'utilisateur:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Mot de passe:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Envoyer</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert("Connexion réussie!\n" + "\n" + `Bienvenue, ${userName.value}!`);
          }
        });
      </script>
    
  

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Nom d'utilisateur:</label>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">Mot de passe:</label>
        <input type="password" id="password" name="password">
        <br>
        <button type="button" onclick="submitForm()">Envoyer</button>
      </form>
    
  

    
      function submitForm() {
        document.getElementById('myForm').submit();
      }