Le traitement des formulaires

Formation Soyez un druide du JavaScript !

Afin de créer un site dynamique, quoi de mieux que d'utiliser JavaScript dans l'envois de formulaire de contact ou de connexion à un site internet ? Dans ce tutoriel, nous verrons comment récupérer des attributs tel que les valeurs des champs <input> et traiter ensuite les données qui ont été saisies dans un formulaire.

Sommaire

Récupérer la valeur d'un élément avec la propriété "value"

Certains éléments HTML tels que les balises de type <input> sont prévus pour créer des champs de saisie qui permettent à l'utilisateur d'entrer des données. Le type de donnée à saisir est défini par l'attribut type, parmi les options possibles, on peut citer entre autre :

Le type text pour saisir un texte (comportement par défaut de la balise) :

<input type="text">

Le type number pour saisir un nombre :

<input type="number">

Le type email pour saisir une adresse électronique :

<input type="email">

Le type radio pour sélectionner une seule valeur parmi un groupe :

<input type="radio">

Pour avoir la liste complète des options à utiliser, voir le lien suivant : https://developer.mozilla.org/fr/docs/Web/HTML/Element/input.

Côté JavaScript, lorsqu'on souhaite récupérer la valeur du champ de saisie défini par une balise <input>, on peut utiliser la propriété value de l'objet HTMLInputElement.

Exemple :

Code HTML :

<input type="text" id="input_text">

Code JavaScript :

// On définit une référence vers la balise input dont on souhaite récupérer la valeur
const input_text = document.getElementById("input_text");

// On récupère la valeur en utilisant la propriété value
let text = input_text.value;

Comment récupérer une valeur parmi plusieurs avec le type radio ?

L'utilisation du type radio avec la balise <input> permet de créer une liste d'options parmi lesquelles on ne peut en choisir qu'une seule à la fois à l'aide de boutons de type radio.

Les boutons radio sont mutuellement exclusifs :

Les boutons radio appartenant à un même groupe ont le même attribut name,
L'attribut value permet de définir la valeur correspondant au choix,
L'attribut checked peut être ajouté pour désigner le bouton qui doit être coché par défaut,
Les boutons radio possèdent également un identifiant unique (id) qui est utilisé pour rattacher le libellé fourni par l'élément via l'attribut for.

Voici un exemple avec l'utilisation des balises <radio> :

<p>
    <strong>Mes amis</strong>
</p>
<p>
    <input type="radio" name="amis" id="rb_1" value="Antoine" checked>
    <label for="rb_1">Antoine</label>
</p>
<p>
    <input type="radio" name="amis" id="rb_2" value="Alice">
    <label for="rb_2">Alice</label>
</p>
<p>
    <input type="radio" name="amis" id="rb_3" value="John">
    <label for="rb_3">John</label>
</p>

Aperçu du résultat :

Chaque entrée doit avoir le même nom afin d'appartenir à la même liste (dans cet exemple : name="amis"). Sinon, le champ sera indépendant.

Afin de récupérer la valeur du bouton sélectionné en JavaScript :

On déclare une référence vers le groupe auquel appartient ce bouton :

const rbs_amis = document.querySelectorAll('input[name="amis"]');

On accède ensuite tour à tour à chacun des boutons du groupe à l'aide d'une boucle et on vérifie pour chacun d'eux la valeur de la propriété checked :
Si checked vaut true on récupère la valeur de la propriété value et on quitte la boucle.
Si checked vaut false on passe au bouton suivant.

for (const rb_ami of rbs_amis) {
  if (rb_ami.checked === true) {
    ami = rb_ami.value;
    break;
  }
}

Traitement des données saisies dans un formulaire en JavaScript

Voyons maintenant comment traiter dynamiquement en JavaScript un formulaire afin d'envoyer et recevoir des données.

Création du formulaire en HTML

Tous les éléments du formulaire doivent être codés à l'intérieur d'un bloc <form></form> auquel on attribue un identifiant unique :

<form id="myForm">
    ....
</form>

On ajoute les différents champs de saisie du formulaire à l'aide de balises <input> en leur attribuant également un identifiant unique et en leur associant un libellé (<label>) :

<form id="myForm">
    <!-- .... -->
    <p>
        <label for="input_nom">Votre nom</label>
        <input type="text" name="nom" id="input_nom" required />
    </p>
</form>

On termine le formulaire par un bouton de type submit qui va servir à valider la saisie des données :

<form id="myForm">
    <!-- .... -->
    <p>
        <label for="input_nom">Votre nom</label>
        <input type="text" name="nom" id="input_nom" required>
    </p>
    <p>
        <button type="submit">Valider</button>
    </p>
</form>

Traitement des données saisies en JavaScript

On commence par déclarer une référence vers le formulaire et les balises <input> qu'il contient. Le bouton de validation n'a pas besoin d'être référencé ici :

const myForm = document.getElementById('myForm');
const input_nom = document.getElementById('input_nom');

On va créer ensuite un gestionnaire d'évènement associé directement au formulaire, ce gestionnaire devra capturer l'évènement submit et appeler la fonction qui permettra de traiter les données du formulaire :

myForm.addEventListener('submit', afficher);

On déclare la fonction qui sera appelée de manière à ce que le comportement par défaut de l'évènement submit soit désactivé :

function afficher(e) {
    // On désactive le comportement par défaut
    e.preventDefault();
}

On peut ensuite récupérer la valeur saisie dans l'un des champs du formulaire en utilisant la propriété value :

function afficher(e) {
    // On désactive le comportement par défaut
    e.preventDefault();


    // On récupère les valeurs saisies dans le formulaire
    let nom = input_nom.value;
}

Exemple

On considère une page web qui comprend :

Un formulaire constitué d'un seul champ qui permet à l'utilisateur de saisir son nom et d'un bouton de validation,
Un paragraphe dans lequel un message de bienvenue personnalisé sera affiché lorsqu'on cliquera sur le bouton de validation.

Code HTML :

<form id="myForm">
    <p>
        <label for="input_nom">Votre nom</label>
        <input type="text" name="nom" id="input_nom" required>
    </p>
    <p>
        <button type="submit">Valider</button>
    </p>
</form>
<p id="p_mess"></p>

Aperçu du formulaire au chargement de la page :

Côté JavaScript, voici ce que cela donne :

// Déclaration de la référence vers le formulaire
const myForm = document.getElementById("myForm");

// Déclaration des références vers les éléments appartenant au formulaire
const input_nom = document.getElementById("input_nom");

// Déclaration des références vers les autres éléments de la page
const p_mess = document.getElementById("p_mess");

// Création du gestionnaire d'évènement associé au formulaire
myForm.addEventListener("submit", afficher);

// Fonction afficher() qui sera appelée lorsque l'utilisateur cliquera sur le bouton de validation du formulaire
function afficher(e) {
    // On désactive le comportement par défaut
    e.preventDefault();

    // On récupère les valeurs saisies dans le formulaire
    let nom = input_nom.value;

    // On met à jour la page web à partir de ces valeurs
    p_mess.textContent = `Bienvenue ${nom} !`;
}

Aperçu du formulaire complété :

Le message est bien écrit dans la balise p_mess en prenant en compte la valeur du champ "nom".

Activité : Calcul d'IMC avec saisie des patients et enregistrement dans un tableau

Au cours de cette activité, on souhaite développer une application qui permet à l'utilisateur de saisir à l'aide d'un formulaire les informations relatives à un patient et de les reporter au fur et à mesure dans un tableau.

Au lancement de l'application, seule l'entête du tableau est affichée et un message indique qu'il n'y a aucun patient enregistré pour l'instant. L'utilisateur devra cliquer sur le bouton d'inscription pour ajouter un patient :

Lorsque l'utilisateur clique sur le bouton d'inscription, l'application ouvre le formulaire de saisie semblable à celui-ci :

Si toutes les informations sont correctement saisies dans le formulaire et que l'utilisateur clique sur le bouton "Enregistrer", l'application ferme le formulaire, ajoute une ligne au tableau avec toutes les données du nouveau patient et met à jour le message indiquant le nombre de patients enregistrés.

Dans le cas où l'utilisateur clique sur le bouton "Annuler", le formulaire est directement fermé et le contenu du tableau n'est pas modifié.

Visualisation d'un patient ajouté depuis le formulaire :

Codez les liaisons entre les fichiers CSS et JavaScript dans le fichier HTML.

Créez dans le fichier index.html les différents éléments constituant la page web c'est à dire :

Le tableau avec uniquement la ligne contenant les entêtes, les autres lignes seront créées dynamiquement par le code JavaScript,
Le paragraphe pour le nombre de patients inscrits,
Le bouton pour inscrire un nouveau patient,
Le formulaire d'inscription.

Code HTML du formulaire :

<div class="popup">
    <div class="popup-form" id="div_popup">
        <form class="formContainer" id="form_inscription">
            <h2 class="titre-form">Nouveau patient</h2>
            <label for="input_nom">
                <strong>Nom</strong>
            </label>
            <input type="text" id="input_nom" name="nom" required>
            <label for="input_prenom">
                <strong>Prénom</strong>
            </label>
            <input type="text" id="input_prenom" name="prenom" required>
            <label for="input_age">
                <strong>Âge</strong>
            </label>
            <input type="number" name="age" id="input_age" required min="0" max="100">
            <p>
                <label>
                    <strong>Sexe</strong>
                </label>
                <input type="radio" name="sexe" id="rb_masculin" value="masculin" checked>
                <label for="rb_masculin">Masculin</label>
                <input type="radio" name="sexe" id="rb_feminin" value="féminin">
                <label for="rb_feminin">Féminin</label>
            </p>
            <label for="input_taille">
                <strong>Taille (cm)</strong>
            </label>
            <input type="number" name="taille" id="input_taille" required min="0" max="250">
            <label for="input_poids">
                <strong>Poids (kg)</strong>
            </label>
            <input type="number" name="poids" id="input_poids" required min="0" max="250">
            <button type="submit" class="btn">Enregistrer</button>
            <button type="button" class="btn cancel" id="btn_annuler">Annuler</button>
        </form>
    </div>
</div>

Créez une feuille de style style.css et complétez cette feuille avec les règles suivantes :

/* --- Pour tous les éléments de la page --- */
* {
    box-sizing: border-box;
}


/* --- Règles de style pour le tableau --- */
table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}


/* --- Règle de style pour le bouton d'inscription --- */
.btn-open {
    border: none;
    border-radius: 5px;
    background-color: #1c87c9;
    color: white;
    padding: 14px 20px;
    cursor: pointer;
    position: fixed;
}


/* --- Règle de style pour les éléments du formulaire --- */
.popup {
    position: relative;
    width: 100%;
}

.popup-form {
    display: none;
    position: fixed;
    left: 45%;
    top: 15%;
    transform: translate(-50%, 5%);
    border: 3px solid #999999;
    z-index: 9;
}

.titre-form {
    text-align: center;
    margin-top: 10px;
}

.formContainer {
    max-width: 300px;
    padding: 20px;
    background-color: #fff;
}

.formContainer input[type=text],
.formContainer input[type=password],
.formContainer input[type=number] {
    width: 100%;
    padding: 10px;
    margin: 5px 0 15px 0;
    border: none;
    background: #ddd;
}

.formContainer p {
    width: 100%;
    padding-bottom: 15px;
}

.formContainer input[type=radio] {
    margin-left: 20px;
}

.formContainer input[type=text]:focus,
.formContainer input[type=password]:focus,
.formContainer input[type=number]:focus {
    background-color: #ccc;
    outline: none;
}

.formContainer .btn {
    padding: 12px 20px;
    border: none;
    background-color: #8ebf42;
    color: #fff;
    cursor: pointer;
    width: 100%;
    margin-bottom: 15px;
    opacity: 0.8;
}

.formContainer .cancel {
    background-color: #cc0000;
}

.formContainer .btn:hover,
.openButton:hover {
    opacity: 1;
}

Recopiez dans le fichier .js, les instructions qui correspondent à la définition de la classe Patient. Déclarez ensuite les références vers les différents éléments HTML.

Un clic sur le bouton d'inscription doit déclencher l'appel d'une fonction ouvrir() qui affiche le formulaire.

Créez le gestionnaire d'évènement associé à ce bouton,
Déclarez et codez la fonction ouvrir().

Lorsque le formulaire est affiché, un clic sur le bouton "Annuler" doit déclencher l'appel d'une fonction fermer() qui ferme le formulaire.

Créez le gestionnaire d'évènement associé à ce bouton,
Déclarez et codez la fonction fermer().

Pour ouvrir ou fermer le formulaire vous utiliserez la propriété CSS display avec les valeurs block et none

Un clic sur le bouton "Enregistrer" pour valider la saisie des données doit déclencher l'appel d'une fonction ajouter().

Créez le gestionnaire d'évènement associé au formulaire qui permettra de traiter les données dans la fonction ajouter().
Déclarez et codez la fonction ajouter() en respectant les étapes suivantes :
Désactiver le comportement par défaut de l'évènement,
Récupérer les valeurs saisies dans des variables locales,
Créer un objet de type Patient à partir des valeurs saisies,
Stocker cet objet dans un tableau,
Ajouter et remplir une nouvelle ligne dans le tableau HTML avec les données du nouveau patient (en conservant les règles de présentation appliquée dans l'activité précédente),
Fermer le formulaire,
Mettre à jour le message pour le nombre de patients saisis.

Niveau Débutant

Technologie utilisée :

JavaScript

Proposer une modification

Par Antoine

Rédigé le Vendredi 28 Octobre 2022