Skip to content

Interaction avec un formulaire

Mise en place d'éléments de formulaire HTML

Définition

Les formulaires HTML participent à l'interaction entre l'utilisateur et le site web.

En effet, les formulaires HTML permettent à l'utilisateur d'envoyer des données au site web.

La plupart du temps, ces données sont :

  • soit envoyées au serveur web en vue de les traiter ou les stocker (ce point sera abordé dans un prochain chapitre) ;
  • soit interceptées localement par la page web affichée par le navigateur du client afin de les utiliser afin de dynamiquement mettre à jour la page via du code JavaScript (c'est ce point qui va être traité ici).

Définition

Un formulaire HTML est composé d'un ou plusieurs éléments spécifiques qui peuvent être :

  • des zones de texte (sur une seule ligne ou plusieurs lignes),
  • des boîtes à sélection,
  • des boutons,
  • des cases à cocher,
  • ou des boutons radio.

La plupart du temps, ces éléments sont associés à un libellé qui décrit leur rôle.

Dans un premier temps, nous allons nous concentrer uniquement sur la mise en place de ce type d'éléments liés au formulaire et de leurs interactions avec le langage JavaScript.

Exemple concret

Soit les codes HTML/CSS/Javascript suivants :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>

<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Formulaire</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="code.js" defer></script>
</head>

<body>
    <div>
        <label for="id_saisie">Nom de famille :</label>
        <input type="text" id="id_saisie" name="saisie">
    </div>
    <div>
        <button id="id_envoyer">Envoyer</button>
    </div>
    <div id="id_message"></div>
</body>

</html>

1
2
3
4
5
6
7
8
9
html
{
    font-family: sans-serif;
}

div
{
    margin: 10px;
}

Rendu de la page :

La page est constituée de :

  • un champ de saisie de texte sur une seule ligne input (identifiant id_saisie) associé à une étiquette label (dont l'attribut for fait référence à l'identifiant du champ de saisie de texte) ;
  • un bouton (identifiant id_envoyer) ;
  • les balises div permettent de structurer l'organisation des éléments de formulaire dans la page
  • l'ajout d'un code JavaScript va permettre de mettre à jour dynamiquement la dernière balise div (identifiant id_message) lors d'un appui sur le bouton.

Voici le code Javascript :

1
2
3
4
5
6
7
8
let bouton_envoyer = document.getElementById("id_envoyer");
bouton_envoyer.addEventListener("click", mise_a_jour_message);

function mise_a_jour_message()
{
    let saisie = document.getElementById("id_saisie");
    document.getElementById("id_message").textContent = "Votre nom de famille est " + saisie.value;
}

Ce code JavaScript ajoute un évènement click au bouton dont l'identifiant est id_envoyer afin de mettre le contenu de l'élément dont l'identifiant est id_message à partir de la chaîne de caractères saisie par l'utilisateur dans l'élément associé à identifiant id_saisie.

Rendu après la saisie et l'appui sur le bouton :

Application

Exercice 19

Saisir et tester les codes précédents.

Modifier les codes afin d'obtenir le rendu suivant :

Rendu attendu avant la saisie et l'appui sur le bouton :

Rendu attendu après la saisie et l'appui sur le bouton :

Exercice 20

Tester les codes suivants.

Code 1 à tester
<!doctype html>

<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Formulaire</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="code.js" defer></script>
</head>

<body>
    <div>
        <label for="id_saisie">Nombre :</label>
        <input type="number" id="id_saisie" name="nombre" min="-100" max="100" step="0.1">
    </div>
    <div>
        <button id="id_envoyer">Envoyer</button>
    </div>
    <div id="id_message"></div>
</body>

</html>

html{
    font-family: sans-serif;
}

div
{
    margin: 10px
}

let bouton_envoyer = document.getElementById("id_envoyer");
bouton_envoyer.addEventListener("click", mise_a_jour_message);

function mise_a_jour_message()
{
    let saisie = document.getElementById("id_saisie");
    document.getElementById("id_message").textContent = parseFloat(saisie.value) + 6;
}
Code 2 à tester
<!doctype html>

<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Formulaire</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="code.js" defer></script>
</head>

<body>
    <div>
        <label for="id_check">Case à cocher</label>
        <input type="checkbox" id="id_check" name="check" value="newsletter">
    </div>
    <div>
        <button id="id_envoyer">Envoyer</button>
    </div>
    <div id="id_message"></div>
</body>

</html>

html{
    font-family: sans-serif;
}

div
{
    margin: 10px
}

let bouton_envoyer = document.getElementById("id_envoyer");
bouton_envoyer.addEventListener("click", mise_a_jour_message);

function mise_a_jour_message()
{
    let check = document.getElementById("id_check");
    if (check.checked)
    {
        document.getElementById("id_message").textContent = "Coché !";
    }
    else
    {
        document.getElementById("id_message").textContent = "Décoché !";
    }
}
Code 3 à tester
<!doctype html>

<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Formulaire</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="code.js" defer></script>
</head>

<body>
    <div>
        <label for="id_select">Choisir :</label>
        <select name="select" id="id_select">
            <option value=""></option>
            <option value="NSI">NSI</option>
            <option value="Sciences de l'ingénieur">Sciences de l'ingénieur</option>
            <option value="Maths">Maths</option>
            <option value="Physique / Chimie">Physique / Chimie</option>
        </select>
    </div>
    <div>
        <button id="id_envoyer">Envoyer</button>
    </div>
    <div id="id_message"></div>
</body>

</html>

html{
    font-family: sans-serif;
}

div
{
    margin: 10px
}

let bouton_envoyer = document.getElementById("id_envoyer");
bouton_envoyer.addEventListener("click", mise_a_jour_message);

function mise_a_jour_message()
{
    let select = document.getElementById("id_select");
    document.getElementById("id_message").textContent = select.value;
}

En exploitant les codes précédents, écrire trois nouveaux fichiers HTML / CSS / JavaScript afin d'obtenir la page et les comportements suivants :



Exercice 21

Tester les codes suivants.

Code n°1 à tester
<!doctype html>

<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Formulaire</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="code.js" defer></script>
</head>

<body>
    <div>
        <label for="id_rouge">Composante rouge :</label>
        <input id = "id_rouge" type="text" min="0" max="255" value="0">
    </div>
    <div>
        <button id="id_envoyer">Envoyer</button>
    </div>
    <div id="id_message"></div>
</body>

</html>

html{
    font-family: sans-serif;
}

div
{
    margin: 10px
}

let bouton = document.getElementById('id_envoyer');
bouton.addEventListener('click', mise_a_jour);

let slider_rouge = document.getElementById('id_rouge');

function mise_a_jour()
{
    let rouge = document.getElementById('id_rouge');
    document.body.style.background = "rgb("+rouge.value+",0,0)";
    document.getElementById("id_message").textContent = "rgb("+rouge.value+",0,0)";
}
Code n°2 à tester
<!doctype html>

<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Formulaire</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="code.js" defer></script>
</head>

<body>
    <div>
        <input id = "id_slider" type="range" min="0" max="150" value="0">
    </div>
    <div id="id_message"></div>
</body>

</html>

html{
    font-family: sans-serif;
}

div
{
    margin: 10px
}

let slider = document.getElementById('id_slider');
slider.addEventListener('change', mise_a_jour_message);

function mise_a_jour_message()
{
    let slider = document.getElementById('id_slider');
    document.getElementById("id_message").textContent = slider.value;
}

En s'inspirant des codes précédents, proposer des codes HTML / CSS / Javascript afin d'obtenir le résultat suivant :

Exercice 22

Concevoir, en HTML / CSS / Javascript, le jeu du nombre mystérieux.

Principe

Le programme choisit aléatoirement un nombre entier entre 0 et 100.

La personne qui cherche à deviner propose un nombre au programme qui donne alors une des trois réponses :

  • Gagné: si le nombre proposé est le bon ;
  • Trop petit : si le nombre proposé est plus petit que celui à deviner ;
  • Trop grand: si le nombre proposé est plus grand que celui à deviner.