Une page qui réagit : formulaire, événements JavaScript et dialogue HTTP

Tu tapes ton pseudo pour t'inscrire à un tournoi en ligne : un compteur suit ta frappe, et un pseudo trop court est refusé avant même de partir. Puis tu valides, et quelque part un serveur enregistre ton inscription. Derrière ce geste banal, trois langages et deux machines collaborent : ton navigateur, le client, et un ordinateur distant, le serveur. Construisons cette page, puis suivons le dialogue.

1. Trois langages, trois rôles

• HTML décrit la structure et le contenu : titres, paragraphes, formulaire.
• CSS décrit la présentation : couleurs, polices, marges.
• JavaScript décrit le comportement : il réagit aux actions de l'utilisateur.

Crée un dossier avec trois fichiers. Le premier, index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="utf-8">
 <title>Tournoi d'échecs</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <h1>Inscription au tournoi</h1>
 <form id="inscription" action="index.html" method="get">
 <label for="pseudo">Pseudo</label>
 <input type="text" id="pseudo" name="pseudo">
 <button type="submit">S'inscrire</button>
 </form>
 <p id="message"></p>
 <script src="script.js"></script>
</body>
</html>

La balise <form> regroupe les champs. Son attribut action indique à quelle adresse envoyer les données, method comment les envoyer. Chaque <input> porte un name : c'est le nom du paramètre transmis. Le <label> est relié au champ par son attribut for, égal à l'id du champ. Le bouton de type submit déclenche l'envoi.

2. La feuille de style

Le fichier style.css associe des règles à des sélecteurs : un nom de balise (button), une classe précédée d'un point (.erreur) ou un identifiant précédé d'un dièse (#message).

body { font-family: sans-serif; margin: 2em; }
button { background: navy; color: white; }
.erreur { color: crimson; font-weight: bold; }

3. Réagir aux événements avec JavaScript

Un événement est un signal émis par la page : clic (click), frappe dans un champ (input), envoi d'un formulaire (submit). On y abonne une fonction avec addEventListener. Le fichier script.js :

const formulaire = document.getElementById("inscription");
const champ = document.getElementById("pseudo");
const message = document.getElementById("message");

champ.addEventListener("input", function () {
 message.textContent = champ.value.length + " caractère(s)";
 message.className = "";
});

formulaire.addEventListener("submit", function (evenement) {
 if (champ.value.length < 3) {
 evenement.preventDefault();
 message.textContent = "Il faut au moins 3 caractères.";
 message.className = "erreur";
 }
});

getElementById récupère un élément par son id. À chaque frappe, le paragraphe affiche la longueur du pseudo. À l'envoi, si le pseudo fait moins de 3 caractères, preventDefault() annule l'envoi, et la classe erreur colore le message en rouge.

Ouvre index.html dans ton navigateur et teste : avec « No », rien ne part ; avec « Nova », la page se recharge et la barre d'adresse se termine par index.html?pseudo=Nova. Tu viens de voir un paramètre voyager !

4. Le dialogue client-serveur : HTTP

Sur un vrai site, le navigateur envoie une requête HTTP au serveur, qui renvoie une réponse. Avec method="post", la requête ressemble à ceci :

POST /inscrire HTTP/1.1
Host: tournoi.example
Content-Type: application/x-www-form-urlencoded

pseudo=Nova

Et la réponse :

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8

<p>Bienvenue, Nova !</p>

Retiens les deux méthodes : avec GET, les paramètres sont écrits dans l'URL après un ? et séparés par & (?pseudo=Nova&age=16), donc visibles dans l'historique ; avec POST, ils voyagent dans le corps de la requête. Le code d'état résume la réponse : 200 (succès), 404 (ressource introuvable), 403 (accès interdit), 500 (erreur du serveur).

L'ordre des opérations compte : le navigateur demande la page (GET), le serveur l'envoie, le navigateur l'affiche et exécute le JavaScript chez le client ; à l'envoi, le serveur exécute son programme (en Python ou PHP, par exemple), enregistre l'inscription et renvoie une nouvelle page. Attention : POST ne chiffre rien ! Seul HTTPS chiffre l'échange, et un mot de passe ne doit jamais partir en HTTP simple.

À retenir

• HTML structure, CSS met en forme, JavaScript fait réagir la page.
• Un formulaire envoie ses champs à l'adresse action, par la method GET (paramètres dans l'URL) ou POST (dans le corps) ; le name de chaque champ nomme le paramètre.
• addEventListener(type, fonction) exécute une fonction à chaque événement (click, input, submit) ; preventDefault() annule l'action par défaut.
• Le JavaScript s'exécute sur le client, le programme du serveur sur le serveur ; une réponse HTTP porte un code d'état (200, 404, 500…).
• HTTPS chiffre l'échange ; GET et POST, seuls, ne protègent rien.

★ Pour aller plus loin

Le Web est né au CERN, près de Genève : Tim Berners-Lee y propose en 1989 un système d'information qui devient le World Wide Web, et en écrit les briques, HTML, HTTP et les URL, en 1990. JavaScript, lui, a été créé en 1995 par Brendan Eich chez Netscape, en une dizaine de jours, raconte son auteur.

HTTP est « sans mémoire » : chaque requête est indépendante. Pour te reconnaître d'une page à l'autre, le serveur t'envoie un cookie, que ton navigateur lui renvoie ensuite à chaque requête.

Pour jouer au serveur chez toi, tape python -m http.server dans le dossier de ta page, puis ouvre http://localhost:8000 : tu vois passer chaque requête dans le terminal.

Sources pour creuser

• Spécialité NSI (Numérique et sciences informatiques) : 30 leçons avec exercices corrigés – Première, Thibaut Balabonski, Sylvain Conchon, Jean-Christophe Filliâtre et Kim Nguyen (Ellipses).
• developer.mozilla.org/fr (MDN Web Docs) : la référence du HTML, du CSS et du JavaScript, avec un guide sur les formulaires.
• OpenClassrooms, cours en ligne « Créez votre site web avec HTML5 et CSS3 ».
• YouTube : les chaînes Grafikart.fr (tutoriels JavaScript) et Graven - Développement ; sur lumni.fr, cherche « HTML ».
• Le programme de NSI sur eduscol.education.fr.