Séance n°5 : Les formulaires Web

Rôle des formulaires

En conception de sites et d'applications Web, les formulaires constituent la passerelle fondamentale d'interaction entre l'utilisateur et le système d'information. Ils permettent de recueillir des données saisies par l'internaute (identifiants de connexion, coordonnées, choix d'options, commentaires, dates, téléversements de documents) et de les transmettre à un serveur Web pour traitement, enregistrement en base de données ou calcul.

Composants élémentaires d'un formulaire

Un formulaire est constitué de composants interactifs variés. Parmi les plus répandus :

• Les champs de texte monolignes :
• Les listes déroulantes de sélection : Sélectionner un pays Tunisie Algérie Maroc
• Les boutons d'action : Soumettre les données
• Les cases à cocher (sélection multiple) : Je veux : Une pizza Des frites Une boisson
• Les boutons radio (choix exclusif) : Je suis : Un garçon Une fille

Auto-évaluation & Prérequis

Vérifiez vos acquis et réflexes fondamentaux avant de détailler la syntaxe des formulaires.

1. Rôle indispensable de l'attribut name

Que se passe-t-il si un champ de saisie (ex: <input type="text">) ne possède pas d'attribut name lors de l'envoi du formulaire ?

2. Quand privilégier impérativement la méthode POST ?

Pourquoi ne doit-on jamais utiliser la méthode GET pour envoyer un mot de passe ou des données confidentielles ?

Attributs de la balise <form>

Tout formulaire Web s'encadre obligatoirement entre la balise ouvrante <form> et la balise fermante </form> :

<form action="traitement.php" method="post" target="_self">
  <!-- Contrôles de saisie, étiquettes et boutons -->
</form>

Attributs fondamentaux de la balise <form> :

• action="URL" : spécifie l'adresse URL du script ou de la page côté serveur chargée de réceptionner et de traiter les données (ex : action="contact.php"). Si la valeur est "#" ou vide, les données sont soumises à la même page.
• method="GET | POST" : indique la méthode HTTP employée pour transmettre les données au serveur.
• target="_self | _blank | _parent | _top" : indique la cible d'affichage de la réponse renvoyée par le serveur (ex. _blank pour ouvrir le résultat dans un nouvel onglet).

Autres attributs possibles (hors programme) :

• autocomplete="on | off" : active ou désactive la mémorisation et la suggestion automatique des valeurs par le navigateur sur l'ensemble du formulaire.
• enctype="..." : définit l'encodage des données envoyées. Par défaut, la valeur est application/x-www-form-urlencoded. Lors de l'envoi de fichiers (via <input type="file">), il est indispensable de spécifier enctype="multipart/form-data" avec la méthode POST.

Méthodes de transmission

Le protocole HTTP propose deux méthodes fondamentales pour transférer des données de formulaire. Le choix de la méthode influe directement sur la visibilité, la sécurité, la mise en cache et le volume des données transmises.

Observation réseau

Pour observer concrètement la différence entre les deux méthodes, testons les deux formulaires ci-dessous qui transmettent les mêmes champs vers la même page réceptrice (assets/miniprojet07/loggedin.html).

Expérience 1 : Analyse de la méthode POST

Ouvrez les Outils de développement de votre navigateur avec la touche F12 (ou Ctrl + Shift + I), sélectionnez l'onglet Réseau (Network), puis cliquez sur le bouton Login (POST) :

Expérience 2 : Analyse de la méthode GET

Cliquez sur le lien « return to course... » pour revenir à cette page. Réactivez l'enregistrement dans l'onglet Réseau (Network) de F12, puis cliquez sur le bouton Login (GET) :

Formulaire d'authentification

Examinons un formulaire complet de connexion (login) stylisé pour comprendre l'assemblage des éléments :

Code HTML source

<form id="example01" action="#" method="post">
  <input type="text" name="login" placeholder="Login">
  <input type="password" name="pass" placeholder="Password" autocomplete="new-password">
  <label><input type="checkbox" name="rememberme" checked> Remember me</label>
  <button type="submit">Log me in</button>
</form>

Feuille de style CSS associée : 📄 Consulter le code CSS (login.txt)

Exploration détaillée du code

• Conteneur <form> : délimite le formulaire, spécifie l'action et impose la méthode POST.
• Champ texte (type="text") : reçoit le nom d'utilisateur. L'attribut placeholder="Login" fournit une indication textuelle temporaire.
• Champ mot de passe (type="password") : masque la saisie par des ronds ou étoiles. L'attribut autocomplete="new-password" gère la complétion par les gestionnaires de mots de passe.
• Case à cocher (type="checkbox") : permet de mémoriser la session. L'attribut booléen checked la coche par défaut.
• Étiquette englobante (<label>) : rend le texte « Remember me » cliquable pour cocher ou décocher la case.
• Bouton de soumission (<button type="submit">) : déclenche la validation et l'expédition du formulaire.

Travail demandé

1. Créer un fichier HTML nommé login.html.
2. Insérer la structure HTML5 minimale et recopier le code du formulaire ci-dessus.
3. Appliquer la feuille de style CSS disponible via le lien login.txt.
4. Tester la saisie et observer l'interaction avec le bouton et la case à cocher.

Champs de saisie textuels et numériques

Les champs textuels et numériques permettent à l'utilisateur de taper des valeurs libres ou encadrées par des règles de format précises.

<input type="text" name="np" 
       value="Mariem" placeholder="Nom &amp; Prénom">

<input type="password" name="pwd" 
       value="secret" placeholder="Mot de passe">

<textarea name="histoire" cols="20" rows="3"
          placeholder="Raconter votre histoire"></textarea>

<input type="number" name="note" value="10.0" 
       min="0.0" max="20.0" step="0.25">

<input type="email" name="mail" 
       placeholder="Votre adresse mail">

<input type="tel" name="phone" 
       pattern="[2459][0-9] [0-9]{3} [0-9]{3}" 
       placeholder="Votre téléphone">

Champs temporels et intervalles

HTML5 intègre nativement des sélecteurs spécialisés pour les dates, les heures et les curseurs de réglage numérique :

<input type="date" name="voyage" value="2026-10-01" 
       min="2026-01-01" max="2026-12-31">

<input type="time" name="appt" 
       min="08:00" max="18:00" step="900" value="14:00">

<input type="datetime-local" name="exam" 
       min="2026-09-15" max="2027-06-30" 
       value="2026-09-15T08:00">

<input type="range" name="volume" 
       min="0" max="100" step="5" list="ticks">
<datalist id="ticks">
  <option value="0" label="0%"></option>
  <option value="25" label="25%"></option>
  <option value="50" label="50%"></option>
  <option value="75" label="75%"></option>
  <option value="100" label="100%"></option>
</datalist>

Boutons radio, Cases à cocher et Étiquettes

La sélection d'options repose sur des composants au comportement bien distinct : choix exclusif avec les boutons radio, choix multiple avec les cases à cocher, et association ergonomique grâce aux étiquettes.

<label>
  <input type="radio" name="se" value="x86"> Windows 32bits
</label><br>
<label>
  <input type="radio" name="se" value="x64" checked> Windows 64bits
</label><br>
<label>
  <input type="radio" name="se" value="Linux"> Linux distribution
</label>

<label>
  <input type="checkbox" name="media" value="Livre" checked> Livre
</label><br>
<label>
  <input type="checkbox" name="media" value="Magazine" checked> Magazine
</label><br>
<label>
  <input type="checkbox" name="media" value="Roman"> Roman
</label><br>
<label>
  <input type="checkbox" name="media" value="Encyclopédie"> Encyclopédie
</label>

<!-- 1. Syntaxe implicite (englobante) -->
<label>
  <input type="checkbox" name="cgu"> J'accepte les conditions
</label>

<!-- 2. Syntaxe explicite (recommandée) -->
<label for="demo-nom">Nom d'utilisateur :</label>
<input type="text" id="demo-nom" name="demo-nom">

Importance ergonomique de l'élément <label>

L'élément <label> associe un libellé textuel à son contrôle de formulaire. Il offre deux avantages capitaux :

1. Accessibilité : les synthèses vocales annoncent le libellé dès que le champ reçoit le focus.
2. Zone cliquable étendue : un clic de souris sur le texte active ou coche instantanément le champ associé.

Deux syntaxes équivalentes sont possibles :

• Syntaxe implicite (englobante) : <label><input type="checkbox" name="..."> Mon libellé</label>
• Syntaxe explicite (via identifiant) : <label for="monId">Mon libellé</label> <input type="checkbox" id="monId" name="...">

Listes déroulantes et Suggestions

Lorsque le nombre d'options est élevé, les listes déroulantes compactent l'espace d'affichage tout en structurant les choix. La balise <datalist> permet quant à elle de suggérer des valeurs sans restreindre la saisie libre.

<select name="fruit">
  <option value="">-- Choisir un fruit --</option>
  <option value="pomme">Pomme</option>
  <option value="fraise" selected>Fraise</option>
  <option value="orange">Orange</option>
  <option value="banane">Banane</option>
</select>

<select name="fruit_cat">
  <optgroup label="Fruits locaux">
    <option value="pomme">Pomme</option>
    <option value="fraise" selected>Fraise</option>
    <option value="orange">Orange</option>
    <option value="raisin">Raisin</option>
  </optgroup>
  <optgroup label="Fruits importés">
    <option value="banane">Banane</option>
    <option value="avocat">Avocat</option>
    <option value="kiwi">Kiwi</option>
  </optgroup>
</select>

<select name="fruits" size="5" multiple>
  <option value="pomme">Pomme</option>
  <option value="fraise" selected>Fraise</option>
  <option value="orange">Orange</option>
  <option value="banane" selected>Banane</option>
  <option value="kiwi">Kiwi</option>
</select>

<input type="text" name="hero" list="heroes-list">
<datalist id="heroes-list">
  <option value="Spiderman">
  <option value="Superman">
  <option value="Batman">
  <option value="Megaman">
  <option value="Catman">
</datalist>

Boutons d'action

Les boutons déclenchent des actions interactives essentielles : soumettre les données saisies au serveur, réinitialiser les champs à leur état initial ou exécuter un traitement en JavaScript. En HTML5, on utilise la balise polyvalente <button> (ou l'élément <input>) avec l'attribut type adéquat :

<!-- Balise button (recommandée) -->
<button type="submit">Soumettre</button>

<!-- Syntaxe alternative avec input -->
<input type="submit" value="Soumettre">

<!-- Balise button (recommandée) -->
<button type="reset">Réinitialiser (RAZ)</button>

<!-- Syntaxe alternative avec input -->
<input type="reset" value="Réinitialiser">

<!-- Balise button (recommandée) -->
<button type="button" onclick="alert('Action !')">
  Exécuter script
</button>

<!-- Syntaxe alternative avec input -->
<input type="button" value="Exécuter script">

Différence clé entre <button> et <input type="...">

Contrairement à <input> dont l'intitulé est restreint à une simple chaîne de texte brut (attribut value), la balise <button>...</button> est un conteneur qui peut embarquer du contenu HTML riche (icônes, images, mise en gras, etc.) :

<button type="submit" class="btn btn-primary">
  <strong>✓ Valider</strong> l'inscription
</button>

Regroupement et attributs d'état

1. Regroupement logique avec <fieldset> et <legend>

Pour organiser un formulaire dense, <fieldset> trace un cadre englobant et <legend> en définit le titre sémantique :

<fieldset>
  <legend>Identité</legend>
  <label for="cin">CIN :</label> 
  <input type="text" id="cin" name="cin" size="8" maxlength="8">
  
  <label for="nom">Nom :</label> 
  <input type="text" id="nom" name="nom">
</fieldset>

2. Attributs d'état : disabled vs readonly

<!-- Lecture seule : valeur envoyée lors du submit -->
<input type="text" value="Code fixe" readonly>

<!-- Désactivé : valeur NON transmise lors du submit -->
<input type="text" value="Non modifiable" disabled>
<textarea disabled>Zone inactive</textarea>

Application 7 : Formulaire de contact

Aperçu du modèle visuel attendu

Cahier des charges & Spécifications

• Les champs obligatoires doivent être signalés par un astérisque (*) et comporter l'attribut required.
• Le champ Poste actuel est une liste déroulante organisée avec <optgroup> selon la hiérarchie suivante :
  • Web : Frontend developer, Backend developer, Fullstack developer
  • Data science : Datascience engineer
  • Autres : Python developer, C++ developer
• Insérer une zone de texte multiligne <textarea> pour la rédaction du message.
• Fournir les boutons de soumission (Envoyer) et de réinitialisation (Annuler).
• Mise en forme CSS : centrer le formulaire, appliquer des espacements internes (padding) confortables, des bordures adoucies et une harmonie de couleurs élégante.

Application 8 : Personnages de bandes dessinées

Question 1 : Identification par zone de liste

1. Les images des personnages servent d'étiquettes (<label>) pour sélectionner la liste déroulante située juste en dessous.
2. Les éléments de la zone de liste sont présentés dans la figure ci-après :
   
3. Chacune des quatre listes doit obligatoirement être renseignée par l'utilisateur (attribut required).

Question 2 : Boutons radio avec avatars

1. Les images des personnages sont des étiquettes (<label>) qui activent le bouton radio situé au-dessus d'elles.
2. Les valeurs respectives transmises par les trois boutons radio sont : a, b et c.
3. L'utilisateur doit obligatoirement sélectionner une réponse parmi les trois propositions.

Question 3 : Champ de texte avec suggestions (datalist)

1. Le champ de texte est lié à une <datalist> qui propose les suggestions suivantes :
   • Spiderman
   • Superman
   • Batman
   • Megaman
   • Catman
2. La saisie d'une réponse à cette question est obligatoire.

Question 4 : Cases à cocher multiples

1. Les images des personnages sont des étiquettes (<label>) qui permettent de cocher la case correspondante.
2. Les valeurs respectives associées aux cases sont : a, b, c et d.
3. La réponse à cette question est facultative (aucune obligation de saisie).

Question 5 : Champ numérique borné

1. Le champ de saisie est de type numérique (type="number").
2. Les valeurs permises sont comprises entre 1 (minimum) et 20 (maximum). Le champ affiche la valeur 5 par défaut.
3. La réponse à cette question est obligatoire.

Application 9 : Observation des Quasars

Question 1 : Identification du télescope (readonly & password)

1. Un champ de texte en lecture seule affiche la station active : VLT Paranal - Télescope 4. Sa valeur est transmise au serveur mais reste non modifiable par l'élève.
2. Un champ mot de passe permet de saisir le code de l'opérateur. Il est obligatoire et doit comporter au moins 4 caractères (attribut minlength="4").

Question 2 : Heure d'observation (type="time")

1. Le champ de saisie temporelle (type="time").
2. Le champ affiche l'heure 22:30 par défaut et sa saisie est obligatoire.

Question 3 : Décalage vers le rouge (type="range" & output)

1. Le contrôle est un curseur d'intervalle.
2. Les bornes autorisées vont de 0 (minimum) à 8 (maximum) avec un incrément de 0.5 (step="0.5"). La valeur par défaut est 2.
3. La valeur sélectionnée est affichée dynamiquement à côté du curseur dans une balise <output> grâce à l'attribut oninput.

Question 4 : Raie spectrale dominante (type="color")

1. Le champ permet de choisir visuellement une couleur grâce au type sélecteur chromatique (type="color").
2. La valeur initiale proposée est le rouge : #ff0000.

Question 5 : Bandes spectrales observées (select multiple)

1. La zone de liste est à choix multiples (attribut multiple).
2. Le nombre de lignes affichées simultanément est fixé à 4 (attribut size="4").
3. La liste propose 5 bandes : Ondes radio (sélectionnée par défaut), Infrarouge, Spectre visible (sélectionnée par défaut), Ultraviolet et Rayons X.
4. La sélection d'au moins une bande est obligatoire.

Question 6 : Données brutes & Bouton d'action (file & button)

1. Un bouton d'action JavaScript (<button type="button">) déclenche l'affichage d'un message d'alerte lors du clic (événement onclick="alert(...)") sans recharger la page ni soumettre le formulaire.