Les formulaires :

Dans cette partie sur les formulaires, on va voir comment récupérer les données transmises par les utilisateurs via les formulaires.

Pour rappel :

Un formulaire est composé d’une balise principale "form" ("formulaire" en français) qui englobe une série d’autres balises qui composent le formulaire, des balises telles que "input", "label", "textarea", etc.

La balise "form" est toujours accompagnée des attributs "action" (pour indiquer l'url de la page qui va traiter les informations) et "method" (indique la méthode d'envoi des données).

La balise "input" ("saisir" en français) permet de créer le champ de saisie, le champ de saisie est déterminé par le "type" il peut être de plusieurs types que l'on verra au fur et à mesure.

La balise input est accompagné d'attribut "name" pour donner un nom a votre champ de saisie, ce nom est important, c'est lui qui va servir de liaison.

La balise "input" est souvent précédée de la balise "label" ("étiquette" en français) pour indiquer à quoi correspond le champ de saisie.

Voici un exemple de formulaire :

<form action="pageTraitement.php" method="post"> 
    <label for="name">Votre nom :</label><br>
    <input type="text" name="yourName"><br> 
    <label for="message">Votre message :</label><br>
    <textarea id="message" name="message"></textarea><br>
    <input type="submit" value="Envoyer">
</form>

Dans cet exemple, on a vu la balise "input" de type "text" et "submit", le type "text" est une zone de champ dit monoligne, le type "submit" est un bouton qui sert a envoyer (traiter) le formulaire et on a vu aussi la balise "textarea" qui elle sert pour la zone de champ de saisie multiligne.

* On reverra un peu plus bas dans cette page le détail, le fonctionnement et le rendu d'un formulaire.

Récupérez la valeur d’un champ :

À présent, on va voir comment on recupère une valeur d'un champ de saisie, pour cet exemple, on va créer un formulaire avec plusieurs types de champs.

<form action="">
    <input type="text" id="nom"><br>
    <input type="password" id="password"><br>
    <textarea id="textarea"></textarea><br>
    <label>Veuillez cocher la case :</label>
    <input type="checkbox" id="check"><br>
    <label>Choisissez votre option :</label>
    <select id="choice">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
        <option value="Option 4">Option 4</option>
    </select><br>
    <label>Votre couleur préféré :</label>
        <input type="radio" id="red" name="color" value="Rouge">
        <label for="red">Rouge</label>
        <input type="radio" id="blue" name="color" value="Bleu">
        <label for="blue">Bleu</label>
        <input type="radio" id="green" name="color" value="Vert">
    <label for="green">Vert</label>
</form> 

Pour récuperer la valeur qui a été saisie par l'utilisateur, on va utiliser une fonction anonyme avec l'évenement "change", c'est un évenement qui se déclenche lorsque le changement de la valeur de l’élément a fini de se réaliser, par exemple, lorsque que l'on déplaçe le focus après avoir remplie le champ de saisie sur un autre éléménts via la touche "entrée", "tab" ou avec la souris.

nom.addEventListener("change", ()=> {
    console.log(nom.value)
})
password.addEventListener("change", ()=> {
    console.log(password.value)
})
textarea.addEventListener("change", ()=> {
    console.log(textarea.value)
})
check.addEventListener("change", ()=> {
    console.log(check.checked)
})
choice.addEventListener("change", ()=> {
    console.log(choice.value)
})
let favouriteColour = document.querySelectorAll('input[name="color"]');
for (let i = 0; i < favouriteColour.length; i++){
    favouriteColour[i].addEventListener("change",(event) => {
        console.log(event.target.value)
// la propriété "event.target" fait référence à l'élément qui a déclenché l'événement
})}

Ici, on utlise la propriété "value" pour indiquer la valeur qu'elle contient, sauf pour le cas de "la case à cocher", où là on utilise la propriété "checked".

Résultat :

Insérer la valeur d'un champ dans le "dom" :

Maintenant que l'on sait récupérer un champ de formulaire, on va voir comment l'insérer dans le "dom", pour cela on va créer un paragraphe entouré d'un border, puis se servir du champ de type "radio" juste au dessus.

 <p class="box">Vous avez cliqué sur la couleur : <span id="result"></span></p>

Vous avez cliqué sur la couleur :

Pour le code javaScript, on reprend le même code du champ "radio" en rajoutant un "getElementById" sur l'id "result" et un "innerHTML" comme ceci :

let favouriteColour = document.querySelectorAll('input[name="color"]');
for (let i = 0; i < favouriteColour.length; i++){
    favouriteColour[i].addEventListener("change",(event) => {
        console.log(event.target.value)
 // ici on rajoute le code pour l'insérer à l'id "result"  
        document.getElementById("result");
        result.innerHTML = (event.target.value);
})}

Récupérer un champ après envoi du formulaire :

Comme vu en début de page, la balise "form" est généralement associée à un bouton qui permet de valider le formulaire en envoyant un "submit" ("soumission" en français).
Le problème est que lorsque l'on clique sur le bouton "submit" la réponse du formulaire est envoyée vers le serveur, puis le serveur nous renvoie une réponse une fois la demande traitée et donc provoque un rechargement automatiquement de la page lors de la réponse, l'envoi au serveur lors du clique est un comportement par défaut du navigateur.
Mais comme on ne veut pas que la page se recharge, il va donc falloir que l'on traite notre formulaire nous même, la solution est de dire au navigateur de ne pas envoyer les données au serveur pour ne pas recharger la page lors de la réponse.

Reprenons le code du haut de la page :

<form action="" method="get"> 
    <label for="name">Votre nom :</label><br>
    <input type="text" name="yourName"><br> 
    <label for="message">Votre message :</label><br>
    <textarea id="message" name="message"></textarea><br>
    <input type="submit" value="Envoyer">
</form>

À présent, on va dire au navigateur de ne pas envoyer les données lors du clique, pour cela on va devoir écouter l'événement "submit" et empêcher l'envoi grâce à la méthode "preventDefault".

// on écoute l'événement "submit"
document.querySelector('.form').addEventListener("submit", (event) => {
// et on empêche le comportement par défaut
event.preventDefault();
console.log(name.value);
});

Ensuite, il va falloir qu'on récupère les données pour les afficher, on reprend le code précédent et on ajoute le code suivant :

// On écoute l'événement "submit"
document.querySelector('.form').addEventListener('submit', (event) => {
    // On empêche le comportement par défaut
    event.preventDefault();
   
    // On sélectionne l'élément d'entrée par son attribut de nom
    const nom = document.querySelector('input[name="yourName"]');
    const message = document.querySelector('textarea[name="yourMessage"]');
   
    // On sélectionne les éléments où afficher les résultats
    const resultName = document.getElementById("resultName");
    const resultMessage = document.getElementById("resultMessage");
   
    // Sur affiche les valeurs des champs de formulaire
    resultName.innerHTML = nom.value;
    resultMessage.innerHTML = message.value;
   });

Résultat :

L'inconvénient de cette méthode, c'est que les données que vous avez insérées dans le formulaire sont conservées.
Lors du comportement par défaut, les données sont effacées lors de l'envoi..., il va donc falloir qu'on les efface manuellement, pour cela, on va insérer le code suivant à la suite, juste avant les crochets de fermeture.

event.target.reset();

Résultat :

~~ Fin ~~