UniversitéSultanMoulaySlimane Filières : DUT – GI – S3

EST– Beni Mellal Module : Programmation en Py

thon

Pr. Mohamed Amine MEDDAOUI

Cours des Formulaires HTML

De la structure de base aux techniques avancées et exercices complexes

Table des matières

1. Introduction aux Formulaires HTML

2. Les Fondations : Éléments Essentiels

2.1. L'élément <form>

2.2. L'importance du <label>

2.3. L'élément polyvalent <input>

3. Au-delà de l'Input : Autres Contrôles de Formulaire

3.1. <textarea> pour le texte long

3.2. <select> pour les listes déroulantes

3.3. L'élément <button>

4. Structuration et Sémantique Avancées

4.1. Grouper avec <fieldset> et <legend>

5. Validation, Accessibilité et Envoi des Données

5.1. Validation native avec HTML5

5.2. L'envoi des données : GET vs POST et enctype

6. Exercices Complexes et Composés

6.1. Exercice 1 : Formulaire d'Inscription Complet

6.2. Exercice 2 : Formulaire de Filtre de Recherche Avancé

1. Introduction aux Formulaires HTML

Les formulaires sont l'un des piliers de l'interactivité sur le web. Ils permettent aux utilisateurs
de soumettre des données à un serveur, que ce soit pour se connecter, s'inscrire, effectuer
une recherche, passer une commande ou laisser un commentaire. Un formulaire HTML est
une section d'un document contenant des contrôles interactifs pour soumettre des
informations.

La structure de base d'un formulaire est simple : un élément <form> qui englobe divers
éléments de saisie ( <input> , <textarea> , etc.) et un bouton pour soumettre les
données.

Figure 1 : Anatomie d'un formulaire de connexion simple

<form action="/login" method="post">

<div>
<label for="username">Nom d'utilisateur :</label>
<input type="text" id="username" name="user_name">
</div>
<div>
<label for="password">Mot de passe :</label>
<input type="password" id="password" name="user_password">
</div>
<div>
<button type="submit">Se connecter</button>
</div>
</form>

Nom d'utilisateur : Mot de passe :

Entrez votre nom... Se connecter

2. Les Fondations : Éléments Essentiels

2.1. L'élément <form>

C'est le conteneur de tout formulaire. Ses attributs les plus importants définissent comment et
où les données seront envoyées.

action : L'URL du serveur qui traitera les données du formulaire. Si cet attribut est
omis, les données sont envoyées à l'URL de la page actuelle.
method : La méthode HTTP à utiliser pour envoyer les données. Les deux valeurs
principales sont :
GET : Les données du formulaire sont ajoutées à l'URL spécifiée par l'attribut
action (ex: /search?q=html ). Idéal pour les recherches ou les filtres. Ne
jamais utiliser pour des données sensibles.
POST : Les données du formulaire sont envoyées dans le corps de la requête
HTTP. C'est la méthode à privilégier pour les données sensibles (mots de passe),
les formulaires longs ou les actions qui modifient des données sur le serveur
(création d'un utilisateur).

GET vs POST : Une analogie

Pensez à GET comme une carte postale : tout le monde peut lire l'adresse (l'URL) et le
message (les données).
Pensez à POST comme une lettre dans une enveloppe : le contenu (les données) est
caché pendant le transport.

2.2. L'importance du <label>

L'élément <label> est crucial pour l'accessibilité et l'ergonomie. Il associe un texte

descriptif à un contrôle de formulaire.

L'association se fait via l'attribut for , qui doit correspondre à l' id de l'élément de
formulaire associé. Cette liaison offre deux avantages majeurs :

1. Pour les lecteurs d'écran : Les utilisateurs malvoyants sauront quel champ ils
remplissent.
2. Pour tous les utilisateurs : Cliquer sur le label active ou met le focus sur le contrôle
associé, ce qui augmente la zone cliquable, particulièrement utile pour les cases à
cocher et les boutons radio.

<!-- Bonne pratique -->

<label for="email">Votre adresse e-mail :</label>
<input type="email" id="email" name="user_email">
 <!-- Mauvaise pratique (pas de liaison sémantique) -->
<p>Votre adresse e-mail :</p>
<input type="email" name="user_email">

2.3. L'élément polyvalent <input>

L'élément <input> est le plus utilisé dans les formulaires. Son comportement est déterminé
par son attribut type .

Types d'input courants

type Description Attributs utiles

placeholder ,
Champ de texte sur une seule ligne. La valeur minlength ,
text
par défaut. maxlength ,
pattern

minlength ,
Comme text , mais les caractères saisis sont
password maxlength ,
masqués.
pattern

Champ pour une adresse e-mail. Le navigateur

multiple (pour
email peut valider le format et adapter le clavier sur
plusieurs adresses)
mobile.

Champ pour un nombre. Affiche des contrôles

number min , max , step
pour incrémenter/décrémenter.

date Affiche un sélecteur de date natif au navigateur. min , max

Case à cocher (sélection multiple ou unique).

checkbox Les cases d'un même groupe doivent avoir le checked
même name .

Bouton radio (sélection unique parmi un

radio groupe). Tous les boutons d'un même groupe checked
doivent avoir le même name .
 type Description Attributs utiles

Permet à l'utilisateur de sélectionner un ou accept (ex:

plusieurs fichiers. Nécessite "image/png,
file
enctype="multipart/form-data" sur le image/jpeg"),
<form> . multiple

value (change le
submit Un bouton qui soumet le formulaire.
texte du bouton)

Champ non visible par l'utilisateur, mais dont la

hidden valeur est envoyée avec le formulaire. Utile pour value
des données techniques (ID, jeton CSRF).

3. Au-delà de l'Input : Autres Contrôles de Formulaire

3.1. <textarea> pour le texte long

Pour la saisie de texte sur plusieurs lignes (commentaires, descriptions, etc.), l'élément
<textarea> est le bon choix.

rows : Définit la hauteur visible en nombre de lignes.

cols : Définit la largeur visible en nombre de caractères. (Moins utilisé aujourd'hui, on
préfère le CSS).
Le texte pré-rempli se place entre les balises <textarea> et </textarea> .

<label for="comment">Laissez un commentaire :</label>

<textarea id="comment" name="user_comment" rows="5" placeholder="Votre message

3.2. <select> pour les listes déroulantes

L'élément <select> crée une liste déroulante. Chaque option est définie par un élément
<option> .

L'attribut value de l' <option> est la valeur envoyée au serveur. Si omis, c'est le
texte de l'option qui est envoyé.
 L'attribut selected sur une <option> la définit comme valeur par défaut.
L'attribut multiple sur le <select> permet de sélectionner plusieurs options
(généralement avec Ctrl/Cmd + Clic).

Pour une meilleure organisation, on peut grouper les options avec <optgroup> et son
attribut label .

Figure 2 : Liste déroulante avec groupes d'options

<label for="device-select">Choisissez votre appareil :</label>

<select name="device" id="device-select">
<option value="">--Veuillez choisir une option--</option>
<optgroup label="Smartphones">
<option value="iphone">iPhone</option>
<option value="samsung">Samsung Galaxy</option>
</optgroup>
<optgroup label="Ordinateurs">
<option value="macbook">MacBook</option>
<option value="surface" selected>Microsoft Surface</option>
</optgroup>
</select>

3.3. L'élément <button>

Bien que <input type="submit"> fonctionne, l'élément <button> est souvent plus
flexible. Il peut contenir du HTML, comme des images ou des icônes, ce qui n'est pas
possible avec un input.

<button type="submit"> : Soumet le formulaire (comportement par défaut).

<button type="reset"> : Réinitialise tous les champs du formulaire à leur valeur
initiale.
<button type="button"> : Ne fait rien par défaut. Utile pour déclencher des actions
JavaScript.

<!-- Bouton de soumission avec une icône (nécessite une bibliothèque d'icônes)
<button type="submit">
 <i class="icon-save"></i> Enregistrer
</button>

4. Structuration et Sémantique Avancées

4.1. Grouper avec <fieldset> et <legend>

Pour les formulaires longs et complexes, il est essentiel de regrouper les champs liés. Les
éléments <fieldset> et <legend> sont conçus pour cela.

<fieldset> : Crée un groupe de champs. Visuellement, il est souvent représenté par

une boîte.
<legend> : Fournit un titre (une légende) pour le <fieldset> . C'est le premier
enfant de <fieldset> .

Cette structure améliore considérablement la sémantique et l'accessibilité, car les lecteurs

d'écran annoncent la légende du groupe avant de lire les labels des champs qu'il contient.

Figure 3 : Utilisation de fieldset pour un formulaire d'adresse

<fieldset>
<legend>Adresse de livraison</legend>

<label for="street">Rue :</label>

<input type="text" id="street" name="delivery_street">

<label for="city">Ville :</label>

<input type="text" id="city" name="delivery_city">

<label for="zip">Code Postal :</label>

<input type="text" id="zip" name="delivery_zip">
</fieldset>

5. Validation, Accessibilité et Envoi des Données

5.1. Validation native avec HTML5

HTML5 a introduit des attributs puissants pour valider les formulaires côté client, sans
nécessiter de JavaScript.

required : Rend un champ obligatoire.

minlength / maxlength : Spécifie le nombre minimum/maximum de caractères
pour les champs textuels.
min / max : Spécifie la valeur minimum/maximum pour les champs numériques ou de
date.
pattern : Permet de valider la saisie à l'aide d'une expression régulière (RegEx).
C'est un outil très puissant pour des formats personnalisés (ex: code postal, numéro de
téléphone, mot de passe complexe).

Exemple de pattern pour un mot de passe complexe

Le pattern suivant exige au moins 8 caractères, une majuscule, une minuscule, un chiffre
et un caractère spécial :

<label for="pwd">Mot de passe :</label>

<input type="password" id="pwd" name="pwd" required
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,}"
title="Doit contenir au moins 8 caractères, une majuscule, une minus

L'attribut title est important ici : son contenu est affiché par le navigateur si la
validation du pattern échoue, guidant ainsi l'utilisateur.

5.2. L'envoi des données : GET vs POST et enctype

Nous avons déjà abordé GET et POST . Un autre attribut crucial de <form> est enctype ,
qui spécifie comment les données du formulaire doivent être encodées avant d'être envoyées
au serveur.
 enctype Description Quand l'utiliser ?

Valeur par défaut. Les espaces

Pour la plupart des
application/x-www- sont convertis en '+', les
formulaires simples (texte,
form-urlencoded caractères spéciaux sont
nombres, etc.).
encodés.

Les données sont envoyées en Obligatoire si le

multipart/form- plusieurs parties. Aucune formulaire contient un
data conversion de caractère n'est <input
effectuée. type="file"> .

Les espaces sont conservés,

mais pas les autres caractères Rarement utilisé en
text/plain
spéciaux. Principalement pour production.
le débogage.

6. Exercices Complexes et Composés

Mettons maintenant en pratique tous ces concepts avec des exercices qui combinent
plusieurs éléments et techniques.

6.1. Exercice 1 : Formulaire d'Inscription Complet

Objectif : Créer un formulaire d'inscription détaillé pour un service en ligne. Ce

formulaire doit être bien structuré, accessible et inclure une validation côté client.

Spécifications :

1. Le formulaire doit être divisé en trois sections logiques avec <fieldset> :

"Informations personnelles", "Informations du compte" et "Préférences".
2. Informations personnelles :
Nom complet ( text , obligatoire).
Date de naissance ( date , obligatoire).
Adresse e-mail ( email , obligatoire).
3. Informations du compte :
 Mot de passe : obligatoire, 8 caractères minimum, doit contenir au moins
une majuscule, une minuscule et un chiffre. Fournir une aide via l'attribut
title .
Confirmation du mot de passe (ce champ ne sera pas validé en HTML pur,
mais il doit être présent).
4. Préférences :
Type d'abonnement ( radio ) : Gratuit, Premium, Entreprise. "Premium" doit
être sélectionné par défaut.
Centres d'intérêt ( checkbox ) : Technologie, Sport, Art, Musique.
L'utilisateur peut en choisir plusieurs.
Photo de profil ( file ) : Accepter uniquement les images JPEG et PNG.
5. Une case à cocher pour accepter les "Termes et Conditions" doit être présente et
obligatoire.
6. Le formulaire doit être envoyé avec la méthode POST .

Solution Proposée

<form action="/register" method="post" enctype="multipart/form-data">

<fieldset>
<legend>Informations personnelles</legend>
<p>
<label for="fullname">Nom complet :</label>
<input type="text" id="fullname" name="full_name" require
</p>
<p>
<label for="birthdate">Date de naissance :</label>
<input type="date" id="birthdate" name="birth_date" requi
</p>
<p>
<label for="email">Adresse e-mail :</label>
<input type="email" id="email" name="user_email" required
</p>
</fieldset>

<fieldset>
<legend>Informations du compte</legend>
<p>
<label for="password">Mot de passe :</label>
 <input type="password" id="password" name="user_password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Doit contenir au moins 8 caractères, une ma
</p>
<p>
<label for="confirm_password">Confirmez le mot de passe :
<input type="password" id="confirm_password" name="confir
</p>
</fieldset>

<fieldset>
<legend>Préférences</legend>
<p>Type d'abonnement :</p>
<input type="radio" id="free" name="subscription" value="free
<label for="free">Gratuit</label><br>
<input type="radio" id="premium" name="subscription" value="p
<label for="premium">Premium</label><br>
<input type="radio" id="enterprise" name="subscription" value
<label for="enterprise">Entreprise</label>

<p>Centres d'intérêt :</p>

<input type="checkbox" id="tech" name="interests" value="tech
<label for="tech">Technologie</label><br>
<input type="checkbox" id="sport" name="interests" value="spo
<label for="sport">Sport</label><br>
<input type="checkbox" id="art" name="interests" value="art">
<label for="art">Art</label><br>
<input type="checkbox" id="music" name="interests" value="mus
<label for="music">Musique</label>

<p>
<label for="avatar">Photo de profil :</label>
<input type="file" id="avatar" name="user_avatar" accept=
</p>
</fieldset>

<p>
<input type="checkbox" id="terms" name="accept_terms" require
<label for="terms">J'accepte les <a href="/terms">Termes et C
</p>

<button type="submit">S'inscrire</button>
 <button type="reset">Réinitialiser</button>

</form>

6.2. Exercice 2 : Formulaire de Filtre de Recherche Avancé

Objectif : Créer un formulaire de recherche pour un site e-commerce de produits

électroniques. Ce formulaire ne soumet pas de données pour "créer" quelque chose,
mais pour filtrer une liste de produits. Il utilisera donc la méthode GET .

Spécifications :

1. Le formulaire doit utiliser la méthode GET .

2. Filtres principaux :
Champ de recherche par mot-clé ( search ).
Catégories de produits ( checkbox ) : Ordinateurs, Smartphones,
Accessoires.
Marques ( select avec multiple ) : Grouper les marques par catégorie
avec <optgroup> (ex: Apple, Dell pour Ordinateurs; Samsung, Google
pour Smartphones).
3. Filtres avancés :
Fourchette de prix : deux champs number , un pour le prix minimum
( min_price ) et un pour le maximum ( max_price ).
État du produit ( radio ) : Neuf, Reconditionné, Tous. "Tous" doit être la
valeur par défaut.
4. Options de tri :
Un select pour trier les résultats par : Pertinence, Prix croissant, Prix
décroissant.
5. Le bouton de soumission doit s'appeler "Appliquer les filtres".

Solution Proposée

<form action="/products/search" method="get">

<fieldset>
<legend>Filtrer les produits</legend>

<p>
<label for="search_query">Rechercher :</label>
<input type="search" id="search_query" name="q" placehold
</p>

<div>
<p>Catégories :</p>
<input type="checkbox" id="cat_computers" name="category"
<label for="cat_computers">Ordinateurs</label>
<input type="checkbox" id="cat_smartphones" name="categor
<label for="cat_smartphones">Smartphones</label>
<input type="checkbox" id="cat_accessories" name="categor
<label for="cat_accessories">Accessoires</label>
</div>

<p>
<label for="brands">Marques (sélection multiple possible)
<select id="brands" name="brand" multiple size="5">
<optgroup label="Ordinateurs">
<option value="apple">Apple</option>
<option value="dell">Dell</option>
<option value="hp">HP</option>
</optgroup>
<optgroup label="Smartphones">
<option value="samsung">Samsung</option>
<option value="google">Google</option>
<option value="oneplus">OnePlus</option>
</optgroup>
</select>
</p>

<fieldset>
<legend>Fourchette de prix</legend>
<label for="min_price">Min :</label>
<input type="number" id="min_price" name="min_price" min=
<label for="max_price">Max :</label>
<input type="number" id="max_price" name="max_price" min=
</fieldset>

<div>
 <p>État :</p>
<input type="radio" id="condition_all" name="condition" v
<label for="condition_all">Tous</label>
<input type="radio" id="condition_new" name="condition" v
<label for="condition_new">Neuf</label>
<input type="radio" id="condition_refurb" name="condition
<label for="condition_refurb">Reconditionné</label>
</div>

<p>
<label for="sort_by">Trier par :</label>
<select id="sort_by" name="sort">
<option value="relevance">Pertinence</option>
<option value="price_asc">Prix croissant</option>
<option value="price_desc">Prix décroissant</option>
</select>
</p>

</fieldset>

<button type="submit">Appliquer les filtres</button>

</form>

Point à noter : Après soumission, l'URL pourrait ressembler à ceci :

/products/search?
q=ordinateur&category=computers&brand=apple&min_price=500&sort=price_asc
Ceci illustre parfaitement le fonctionnement de la méthode GET .

Cours généré le 2025-10-18. La maîtrise des formulaires HTML est une compétence
fondamentale pour tout développeur web.