Aller au contenu

Chapitre 3 : Formulaires et requêtes HTTP

Programme officiel (B.O.)

B.O. spécial n° 1 du 22 janvier 2019 - NSI Première

Contenus Capacités attendues Commentaires
Interaction client-serveur. Requêtes HTTP, réponses du serveur. Distinguer les méthodes GET et POST. Décrire la structure d'une requête HTTP et de la réponse correspondante.
Formulaires d'une page Web. Analyser le fonctionnement d'un formulaire simple. Distinguer les transmissions de paramètres par l'URL (GET) et par le corps de la requête (POST).

1. Les formulaires HTML

1.1 À quoi sert un formulaire ?

Un formulaire est un ensemble de composants graphiques (champs de saisie, boutons, listes déroulantes...) qui permet à l'utilisateur d'envoyer des données au serveur. C'est le mécanisme fondamental de l'interaction homme-machine sur le Web.

Exemples de formulaires courants : connexion à un site, inscription, barre de recherche, commentaires, commandes en ligne.

1.2 Structure d'un formulaire

<form action="/traitement" method="post">
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom">

    <label for="email">Email :</label>
    <input type="email" id="email" name="email">

    <button type="submit">Envoyer</button>
</form>
Attribut de <form> Rôle
action URL du programme serveur qui traitera les données
method Méthode HTTP utilisée (get ou post)

Important

L'attribut name de chaque champ est indispensable : c'est le nom sous lequel la donnée sera envoyée au serveur. Sans name, la valeur du champ n'est pas transmise.

1.3 Les types de champs de saisie

Champs textuels

<input type="text" name="prenom" placeholder="Votre prénom">
<input type="email" name="email" placeholder="[email protected]">
<input type="password" name="mdp" placeholder="Mot de passe">
<input type="number" name="age" min="0" max="120">
<input type="date" name="naissance">
<input type="url" name="site">
<textarea name="commentaire" rows="4" cols="50"></textarea>
Type Affichage Validation
text Champ texte libre Aucune
email Champ texte Vérifie le format email
password Caractères masqués Aucune
number Champ numérique avec flèches Vérifie que c'est un nombre
date Sélecteur de date Format de date
url Champ texte Vérifie le format URL

Choix

<!-- Case à cocher (choix multiples) -->
<input type="checkbox" name="option1" value="a"> Option A
<input type="checkbox" name="option2" value="b"> Option B

<!-- Bouton radio (choix unique) -->
<input type="radio" name="niveau" value="seconde"> Seconde
<input type="radio" name="niveau" value="premiere"> Première
<input type="radio" name="niveau" value="terminale"> Terminale

<!-- Liste déroulante -->
<select name="matiere">
    <option value="nsi">NSI</option>
    <option value="maths">Mathématiques</option>
    <option value="physique">Physique</option>
</select>

Boutons radio

Pour que les boutons radio soient mutuellement exclusifs (un seul choix possible), ils doivent avoir le même attribut name.

Boutons

<button type="submit">Envoyer</button>
<button type="reset">Réinitialiser</button>
<button type="button">Action JavaScript</button>
Type Comportement
submit Soumet le formulaire (envoie les données)
reset Remet tous les champs à leur valeur initiale
button Aucun comportement par défaut (utilisé avec JavaScript)

1.4 Attributs utiles des champs

<input type="text" name="nom"
       required                    <!-- champ obligatoire -->
       placeholder="Entrez votre nom"  <!-- texte indicatif -->
       maxlength="50"             <!-- longueur maximale -->
       value="Alice"              <!-- valeur par défaut -->
>

1.5 Validation côté client avec JavaScript

Avant d'envoyer les données au serveur, on peut vérifier leur validité en JavaScript :

<form id="inscription">
    <label for="pseudo">Pseudo (3 à 20 caractères) :</label>
    <input type="text" id="pseudo" name="pseudo">
    <span id="erreur" style="color: red;"></span>
    <br>
    <button type="submit">S'inscrire</button>
</form>

let formulaire = document.getElementById("inscription");
let champPseudo = document.getElementById("pseudo");
let messageErreur = document.getElementById("erreur");

formulaire.addEventListener("submit", function(e) {
    let pseudo = champPseudo.value;
    if (pseudo.length < 3 || pseudo.length > 20) {
        e.preventDefault();    // empêche l'envoi du formulaire
        messageErreur.textContent = "Le pseudo doit contenir entre 3 et 20 caractères.";
    } else {
        messageErreur.textContent = "";
    }
});

e.preventDefault() empêche le comportement par défaut du formulaire (l'envoi des données) pour permettre d'afficher un message d'erreur à l'utilisateur.

Attention

La validation côté client (JavaScript) améliore l'expérience utilisateur mais ne suffit pas pour la sécurité. Un utilisateur peut désactiver JavaScript ou modifier les requêtes. Le serveur doit toujours re-valider les données reçues.

2. Les requêtes HTTP

2.1 Le protocole HTTP

HTTP (HyperText Transfer Protocol) est le protocole de communication entre le client (navigateur) et le serveur Web. Chaque interaction suit le schéma requête → réponse.

Client                                Serveur
  │                                      │
  │──── Requête HTTP ──────────────────►│
  │     (méthode, URL, en-têtes, corps) │
  │                                      │
  │◄─── Réponse HTTP ─────────────────│
  │     (code, en-têtes, corps)          │

2.2 Structure d'une requête HTTP

Une requête HTTP se compose de :

  1. La ligne de requête : méthode + URL + version HTTP
  2. Les en-têtes (headers) : informations complémentaires
  3. Le corps (body) : les données envoyées (pour POST)

Exemple de requête GET :

GET /page.html HTTP/1.1
Host: www.exemple.fr
Accept: text/html
Accept-Language: fr

Exemple de requête POST :

POST /connexion HTTP/1.1
Host: www.exemple.fr
Content-Type: application/x-www-form-urlencoded

identifiant=alice&motdepasse=secret

2.3 Structure d'une réponse HTTP

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

<!DOCTYPE html>
<html>...

La première ligne contient le code de statut :

Code Signification
200 OK - la requête a réussi
301 Redirection permanente
403 Accès interdit (Forbidden)
404 Page non trouvée (Not Found)
500 Erreur interne du serveur

2.4 Méthode GET

La méthode GET transmet les paramètres dans l'URL, après le caractère ? :

https://www.exemple.fr/recherche?q=NSI&page=1

Les paramètres sont des paires nom=valeur séparées par &.

<form action="/recherche" method="get">
    <input type="text" name="q" placeholder="Rechercher...">
    <button type="submit">Chercher</button>
</form>

Si l'utilisateur tape « Python » et valide, le navigateur envoie :

GET /recherche?q=Python HTTP/1.1

Caractéristiques de GET :

  • Les paramètres sont visibles dans l'URL (barre d'adresse)
  • L'URL peut être mise en favori ou partagée
  • La taille des données est limitée (environ 2 000 caractères pour l'URL)
  • Utilisé pour les lectures (recherche, consultation)

2.5 Méthode POST

La méthode POST transmet les paramètres dans le corps de la requête, invisibles dans l'URL :

<form action="/connexion" method="post">
    <input type="text" name="identifiant">
    <input type="password" name="motdepasse">
    <button type="submit">Se connecter</button>
</form>

La requête envoyée :

POST /connexion HTTP/1.1
Host: www.exemple.fr
Content-Type: application/x-www-form-urlencoded

identifiant=alice&motdepasse=secret

Caractéristiques de POST :

  • Les paramètres sont invisibles dans l'URL
  • L'URL ne peut pas être mise en favori avec les données
  • Pas de limite pratique de taille pour les données
  • Utilisé pour les modifications (connexion, inscription, envoi de fichier)

2.6 Comparaison GET / POST

Critère GET POST
Paramètres dans... L'URL Le corps de la requête
Visibilité Visibles dans la barre d'adresse Non visibles dans l'URL
Mise en favori Oui (URL complète) Non
Taille des données Limitée (~2 000 car.) Pas de limite pratique
Usage typique Recherche, consultation Connexion, inscription, envoi de données
Sécurité Données exposées dans l'URL Données dans le corps (pas dans l'historique)

Attention

La méthode POST n'est pas sécurisée en soi : les données transitent en clair si le site n'utilise pas HTTPS. La seule différence est que les données n'apparaissent pas dans l'URL. Pour une vraie sécurité, il faut utiliser HTTPS (HTTP + chiffrement TLS).

3. Côté serveur : traitement des données

3.1 Le rôle du serveur

Quand le formulaire est soumis, le serveur reçoit les données et les traite avec un programme côté serveur (en Python, PHP, JavaScript/Node.js...).

Le serveur peut :

  • Stocker les données dans une base de données
  • Vérifier les identifiants de connexion
  • Générer une page HTML de réponse personnalisée
  • Envoyer un email de confirmation

3.2 Exemple avec Python (Flask)

Voici un exemple simplifié de serveur Web en Python utilisant le micro-framework Flask :

from flask import Flask, request

app = Flask(__name__)

@app.route("/inscription", methods=["POST"])
def inscription():
    nom = request.form["nom"]
    email = request.form["email"]
    return f"<h1>Bienvenue {nom} !</h1><p>Email enregistré : {email}</p>"

app.run()

Ce programme :

  1. Reçoit les données du formulaire via request.form
  2. Extrait les champs nom et email
  3. Renvoie une page HTML personnalisée

Hors programme

La programmation côté serveur (Flask, PHP, Node.js...) n'est pas au programme de Première NSI. Cet exemple est donné pour comprendre le rôle du serveur dans l'interaction client-serveur.

4. Exemple complet : formulaire de contact

HTML (contact.html) : 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Contact</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 500px; margin: 50px auto; }
        label { display: block; margin-top: 15px; font-weight: bold; }
        input, textarea, select { width: 100%; padding: 8px; margin-top: 5px; }
        button { margin-top: 20px; padding: 10px 30px; background: #3498db; color: white; border: none; cursor: pointer; }
        button:hover { background: #2980b9; }
        .erreur { color: red; font-size: 14px; }
        .succes { color: green; font-weight: bold; }
    </style>
</head>
<body>
    <h1>Formulaire de contact</h1>
    <form id="formContact" action="/contact" method="post">
        <label for="nom">Nom :</label>
        <input type="text" id="nom" name="nom" required>

        <label for="email">Email :</label>
        <input type="email" id="email" name="email" required>

        <label for="sujet">Sujet :</label>
        <select id="sujet" name="sujet">
            <option value="question">Question</option>
            <option value="bug">Signaler un problème</option>
            <option value="suggestion">Suggestion</option>
        </select>

        <label for="message">Message :</label>
        <textarea id="message" name="message" rows="5" required></textarea>

        <p id="feedback" class="erreur"></p>
        <button type="submit">Envoyer</button>
    </form>

    <script src="contact.js"></script>
</body>
</html>

JavaScript (contact.js) : 

let formulaire = document.getElementById("formContact");
let feedback = document.getElementById("feedback");

formulaire.addEventListener("submit", function(e) {
    let nom = document.getElementById("nom").value.trim();
    let email = document.getElementById("email").value.trim();
    let message = document.getElementById("message").value.trim();

    // Validation
    if (nom.length < 2) {
        e.preventDefault();
        feedback.textContent = "Le nom doit contenir au moins 2 caractères.";
        feedback.className = "erreur";
        return;
    }

    if (message.length < 10) {
        e.preventDefault();
        feedback.textContent = "Le message doit contenir au moins 10 caractères.";
        feedback.className = "erreur";
        return;
    }

    feedback.textContent = "Formulaire valide, envoi en cours...";
    feedback.className = "succes";
});

À retenir

  • Un formulaire HTML (<form>) permet à l'utilisateur d'envoyer des données au serveur.
  • Chaque champ doit avoir un attribut name pour que sa valeur soit transmise.
  • Les types de champs principaux : text, email, password, number, checkbox, radio, select.
  • La méthode GET transmet les paramètres dans l'URL (visible, limité, pour les lectures).
  • La méthode POST transmet les paramètres dans le corps de la requête (invisible dans l'URL, pour les modifications).
  • Une requête HTTP = ligne de requête + en-têtes + corps. Une réponse = code de statut + en-têtes + corps.
  • Les codes de statut courants : 200 (OK), 404 (non trouvé), 500 (erreur serveur).
  • La validation côté client (JavaScript) améliore l'ergonomie mais le serveur doit toujours re-valider.
  • e.preventDefault() empêche le comportement par défaut d'un événement (envoi de formulaire, suivi de lien...).