Formulaire web

Les éléments de formulaire en HTML sont utilisés pour collecter des données saisies par les utilisateurs dans une page web. Ils constituent la base de nombreuses interactions courantes sur les sites modernes.

Les formulaires peuvent servir à une grande variété de tâches, notamment :

Formulaires d'inscription / création de compte : Permettent à un utilisateur de s'enregistrer sur un site. Ils contiennent typiquement des champs comme le nom d'utilisateur, l'adresse email, le mot de passe, et parfois des informations supplémentaires (adresse, numéro de téléphone, etc.).

Formulaires de connexion : Utilisés pour accéder à un espace personnel via un nom d'utilisateur et un mot de passe.

Formulaires de publication / commentaire : Présents sur les forums, blogs ou réseaux sociaux. Ils permettent d'ajouter du texte, parfois des images, vidéos ou éléments mis en forme.

Formulaires de profil utilisateur : Utilisés pour saisir ou modifier les informations personnelles : biographie, photo de profil, centres d'intérêt, etc.

Formulaires de recherche : Permettent aux utilisateurs de rechercher un contenu spécifique sur un site.

Formulaires de contact : Souvent présents dans les sites vitrine, ils permettent d'envoyer un message (nom, email, objet, contenu du message).

Formulaires de feedback ou de sondage : Utilisés pour recueillir l'avis des utilisateurs via des choix multiples, cases à cocher, zones de texte, échelles de notation, etc.

Formulaires de commande / transaction : Essentiels au commerce en ligne : informations de paiement, adresse de livraison, méthode d'expédition, etc.

Formulaires d'inscription à une newsletter : Généralement composés d'un simple champ email.

Formulaires de réservation ou prise de rendez-vous : Utilisés par les services (médecins, coiffeurs, restaurants…) pour réserver une date et une heure.

➡️ WHATWG - Forms

Eléments de formulaire

Pour comprendre le fonctionnement et la structure des formulaires web, il est important de connaître les différents éléments HTML utilisés pour recueillir des données auprès des utilisateurs. Chaque élément a un rôle précis dans la composition d'un formulaire.

<form> : L'élément de base d'un formulaire. Il englobe tous les champs et définit la manière dont les données seront transmises.

<label> : Associe une étiquette descriptive à un élément de formulaire. Il améliore fortement l'accessibilité et facilite l'interaction utilisateur.

<input> : L'élément le plus polyvalent. Le type d'entrée attendu est défini via l'attribut type.

type="text" : Champ de texte simple.
type="email" : Adresse email.
type="password" : Mot de passe (texte masqué).
type="radio" : Bouton radio (choix unique).
type="checkbox" : Case à cocher (choix multiples possibles).
type="date" : Sélection d'une date.
…

<textarea> : Champ de texte multilignes.

<select> et <option> : Permettent d'afficher une liste déroulante. <select> crée la liste, et chaque <option> représente un choix.

<button> : Crée un bouton. Peut être utilisé pour soumettre, réinitialiser ou effectuer une action spécifique.

Source image

Fonctionnement

Le fonctionnement des formulaires web implique à la fois le frontend et le backend, chacun jouant un rôle clé dans la collecte et le traitement des données utilisateur.

Frontend (côté client)

Création du formulaire : Un formulaire est construit à l'aide d'éléments HTML tels que <form>, <label>, <input>, <textarea>, <select>, <button>, etc.
Interaction utilisateur : L'utilisateur remplit les champs du formulaire. Certains attributs permettent de vérifier automatiquement la validité des données (champs obligatoires, format d'email, etc.).
Envoi des données : Lors de la soumission, les données sont envoyées au serveur via une requête HTTP (GET ou POST, le plus souvent).

Backend (côté serveur)

Réception des données : Le serveur reçoit les données envoyées par le formulaire, via un script backend (PHP, Python, Node.js, …).
Traitement des données : Le serveur valide, transforme, enregistre ou utilise les informations reçues (base de données, envoi d'email, etc.).
Réponse au client : Une réponse est renvoyée, par exemple un message de confirmation, une erreur, ou une redirection.

Source image

Envoi des données

Les éléments d'un formulaire sont regroupés dans la balise <form>, qui définit notamment :

action : L'URL du backend qui recevra les données.
method : La méthode HTTP utilisée (GET ou POST).

Source image

Méthode `GET`

Caractéristiques

Les données sont envoyées dans l'URL, après un ?.
Longueur limitée (selon navigateur/serveur).
Données non confidentielles, car visibles dans l'URL.
Peut être mise en cache.
Idempotente : répéter la requête ne change pas le résultat.

Quand l'utiliser

Formulaires de recherche ou filtrage.
Données non sensibles.
URL partageables ou bookmarkables.
Requêtes simples sans effet secondaire.

Méthode `POST`

Caractéristiques

Les données sont envoyées dans le corps de la requête, pas dans l'URL.
Pas de limite significative de taille.
Non-idempotente : ré-envoyer la requête peut créer plusieurs entrées.
Non mise en cache.

Quand l'utiliser

Formulaires contenant des données sensibles (mots de passe, informations personnelles…).
Envoi de données volumineuses.
Actions ayant des effets (création, modification…).
Manipulation de base de données.

Identification des données

Dans les formulaires HTML, l'attribut name joue un rôle central : il identifie les données envoyées au serveur et permet de structurer l'information. Sans cet attribut, aucune donnée ne serait transmise lors de la soumission du formulaire.

Chaque champ envoyé au serveur est représenté sous la forme d'une paire clé-valeur :

clé → valeur de l'attribut name
valeur → donnée saisie par l'utilisateur

On peut comparer l'attribut name à une variable en programmation : son nom est la clé, sa valeur est ce que l'utilisateur a entré.

Fonctionnement de l'attribut name

Identification unique : chaque élément de formulaire a un name différent, sauf dans des cas spécifiques (boutons radio).
Transmission des données : lors de l'envoi du formulaire, les données sont structurées sous forme de paires name=value.
Regroupement logique : certains éléments (comme les radio buttons) utilisent le même name pour créer un groupe où une seule valeur peut être choisie.

Source image

Exemple

<form action="./form-ctrl.php" method="post">
  <label>First name</label>
  <input name="first-name">

  <label>Last name</label>
  <input name="last-name">

  <label>Email</label>
  <input name="email">

  <button>Send</button>
</form>

Tableaux auto-indexés

Il est possible d'utiliser des noms de champs sous forme de tableaux, grâce à la notation []. Cela indique au serveur que plusieurs valeurs appartiennent au même groupe.

Fonctionnement

L'attribut name="user-data[]" crée automatiquement un tableau.
Lors de la soumission :
- Chaque valeur remplit un nouvel élément du tableau.
- L'index est généré automatiquement côté serveur.

Exemple

<form action="./form-ctrl.php" method="post">
  <label>First name</label>
  <input name="user-data[]">

  <label>Last name</label>
  <input name="user-data[]">

  <label>Email</label>
  <input name="user-data[]">

  <button>Send</button>
</form>

Note

Les indices sont généralement numériques.
La plupart des langages (comme PHP) commencent l'indexation à 0.
Le serveur construit automatiquement le tableau lors de la réception des données.

Tableaux à clés indexées

Une deuxième possibilité consiste à utiliser des clés explicites dans le champ name.

Par exemple : name="user-data[email]"

Cela permet de regrouper des informations structurées en un tableau associatif (équivalent d'un objet clé-valeur).

Fonctionnement

Chaque clé à l'intérieur des crochets devient une clé du tableau côté serveur.
Idéal pour organiser des données liées : adresse, profil utilisateur, produits, etc.

Exemple

<form action="./form-ctrl.php" method="post">
  <label>First name</label>
  <input name="user-data[first-name]">

  <label>Last name</label>
  <input name="user-data[last-name]">

  <label>Email</label>
  <input name="user-data[email]">

  <button>Send</button>
</form>

Note

Côté serveur, les données sont reçues sous forme de tableau associatif (clé-valeur), la structure exacte dépendant du langage utilisé (PHP, Python, Node.js, etc.).

Identification des éléments

Pour garantir une bonne accessibilité, une compréhension immédiate du formulaire et une interaction fluide, chaque élément d'un formulaire doit être correctement identifié. Cela permet non seulement d'améliorer l'expérience utilisateur, mais aussi d'assurer la compatibilité avec les technologies d'assistance (lecteurs d'écran, dispositifs de navigation au clavier, etc.).

Labellisation

Chaque champ doit être associé à un élément <label> descriptif.

C'est une règle fondamentale pour :

Améliorer l'accessibilité : les lecteurs d'écran annoncent le label avant le champ.
Augmenter la zone cliquable : cliquer sur un label met automatiquement le focus dans le champ associé.
Clarifier l'objectif du champ : l'utilisateur sait exactement quelle information fournir.

Association label ↔ input

Pour créer cette association, on utilise :

l'attribut for dans <label>
l'attribut id dans l'élément de formulaire

Les deux valeurs doivent être strictement identiques.

Source image

Exemple

<label for="username">Nom d'utilisateur</label>
<input id="username">

Alternative au `<label>`

Dans certaines situations (contraintes graphiques, design particulier), l'utilisation d'un <label> visible n'est pas possible. Il existe alors plusieurs méthodes pour conserver une bonne accessibilité, mais aucune ne remplace totalement un vrai label visible.

Attributs ARIA

L'attribut aria-label décrit textuellement le champ pour les technologies d'assistance.

Il remplace le label d'un point de vue accessibilité.
Ne s'affiche pas visuellement.

Attribut title

L'attribut title affiche une infobulle au survol ou au focus.

⚠️ Attention :

Peu fiable pour l'accessibilité (souvent ignoré par les lecteurs d'écran).
Ne doit pas être utilisé comme unique méthode d'identification.

Attribut placeholder

Le placeholder peut donner un exemple visuel, mais ne doit jamais remplacer un label, car :

Il disparaît lorsque le champ est rempli.
Il n'est pas toujours lu par les lecteurs d'écran.
Il peut être confondu avec une valeur déjà existante.
Il pose des problèmes de contraste.

Exemple

<form action="./form-ctrl.php" method="post">
  <input
    aria-label="First name"
    name="first-name"
    placeholder="John"
    title="First name"
  >
  <input
    aria-label="Last name"
    name="last-name"
    placeholder="Doe"
    title="Last name"
  >
  <input
    aria-label="Email"
    name="email"
    placeholder="john.doe@example.com"
    title="Email"
  >
  <button>Send</button>
</form>

Validation des données

La validation des données est une étape essentielle dans la gestion des formulaires web. Elle garantit que les informations soumises sont correctes, complètes, cohérentes et sécurisées. Pour être fiable, la validation doit toujours être réalisée à deux niveaux : côté client et côté serveur.

Validation côté client

La validation côté client est effectuée directement dans le navigateur, avant l'envoi des données au serveur.

Objectifs

Améliorer l'expérience utilisateur : L'utilisateur obtient un retour immédiat lorsqu'un champ est vide, mal rempli ou non valide.
Limiter les erreurs : Empêche l'envoi de données incorrectes ou incomplètes.
Réduire la charge serveur : Moins de requêtes inutiles grâce à des formulaires bloqués avant soumission.

Fonctionnement

Les navigateurs implémentent nativement une série de validations grâce aux attributs HTML :

required
minlength / maxlength
min / max
type
pattern
etc.

Pour des validations plus complexes, JavaScript peut être utilisé.

➡️ MDN - Client-side form validation

Validation côté serveur

Indispensable et incontournable, la validation côté serveur prend place après la soumission du formulaire.

Objectifs

Sécurité : Empêcher les attaques telles que injections SQL, valeurs falsifiées, contenus malveillants, etc.

Note

⚠️ Les validations côté client peuvent être contournées très facilement.

Intégrité des données : S'assurer que toutes les données reçues respectent les contraintes définies (format, longueur, valeurs attendues…).
Redondance nécessaire : Même si un formulaire valide côté client, le serveur doit toujours vérifier à nouveau.

L'attribut `type` sur `<input>`

L'attribut type détermine le type de champ à afficher, ainsi que la validation native que le navigateur doit appliquer.

text : Champ de texte générique (valeur par défaut).

<input type="text">

radio : Boutons radio (une seule option sélectionnable parmi plusieurs).

<input type="radio" value="1">

checkbox : Case à cocher (option activable/désactivable).

<input type="checkbox" value="1">

email : Champ pour une adresse email, avec validation intégrée du format.

<input type="email">

number : Saisie numérique, avec flèches d'incrémentation.

<input type="number">

date : Sélection d'une date via un widget natif du navigateur.

<input type="date">

➡️ WHATWG - The input element

Attribut `pattern` et expression régulière

L'attribut pattern permet de définir une règle de validation personnalisée sur les champs de formulaire HTML, en utilisant une expression régulière (regex). Il s'applique principalement aux champs <input type="text">, <input type="search">, <input type="email">, etc.

Si la valeur saisie ne correspond pas au modèle, le navigateur considère le champ comme invalide.
L'attribut fonctionne uniquement côté client, mais doit être complété par une validation côté serveur.

Qu'est-ce qu'une expression régulière ?

Une expression régulière (regex) est une séquence de caractères décrivant un motif à rechercher dans une chaîne de texte.

Elle permet :

de valider un format (ex. : email, numéro de téléphone, date)
de rechercher du texte
de remplacer ou extraire des parties d'une chaîne

Une regex combine :

des caractères littéraux (abc)
des métacaractères (., *, +, ^, $, [], etc.)
des groupes et opérateurs logiques ((), |)

Exemple : validation d'un numéro mobile suisse

((00|\+)41|0)7[35-9]\d{7}

Décomposition

((00|\+)41|0)

Ce groupe capture les préfixes acceptés :

00 ou + → numéros internationaux
41 → indicatif de la Suisse
0 → format national local

7

Indique qu'il s'agit d'un numéro mobile suisse (tous commencent par 7).

[35-9]

Le chiffre suivant doit être l'un de :

3, 5, 6, 7, 8, 9

→ correspond aux différents opérateurs mobiles suisses.

\d{7}

\d : équivalent à [0-9]
{7} : exactement 7 chiffres

→ garantit la longueur valide d'un numéro mobile.

Cette regex valide donc les numéros mobiles suisses dans tous les formats usuels (local ou international).

➡️ RegExr

Exemple : validation d'un email

Le WHATWG propose la regex suivante pour définir une adresse email valide :

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

➡️ WHATWG - Valid email address

🚨 Attention

Cette regex n'est pas garantie comme étant celle utilisée par tous les navigateurs.
Elle ne couvre pas parfaitement toutes les possibilités autorisées par les RFC officielles.
Le navigateur applique sa propre logique de validation pour <input type="email">.

Validation CSS

Les pseudo-classes de validation CSS permettent de cibler et styliser les éléments de formulaire en fonction de leur état de validation. Elles offrent un retour visuel immédiat à l'utilisateur, améliorant ainsi l'ergonomie et la compréhension des erreurs ou des champs valides.

Elles s'appliquent sur :

<input>
<select>
<textarea>

Pseudo-classes principales

:valid : Sélectionne les éléments dont la valeur satisfait les règles de validation (attributs type, pattern, required, min, max, etc.).

:invalid : Cible les éléments dont la valeur ne respecte pas les contraintes définies (format email incorrect, valeur hors plage, champ requis vide, etc.).

:required : Sélectionne tous les éléments ayant l'attribut required.

:optional : Sélectionne les éléments qui ne sont pas requis.

:in-range : Cible les éléments dont la valeur est comprise entre min et max.

:out-of-range : Cible les éléments dont la valeur est en dehors de la plage définie.

:read-only : Sélectionne les éléments en lecture seule (readonly).

:read-write : Cible les éléments modifiables (sans readonly).

Exemple

<form action="./form-ctrl.php" method="post">
  <label>First name</label>
  <input name="first-name">

  <label>Last name</label>
  <input name="last-name" required>

  <label>Email</label>
  <input type="email">

  <label>Comment</label>
  <textarea></textarea>

  <button>Send</button>
</form>

textarea:optional {
  /* blue */
  background-color: #d1ecf1;
}

input:valid {
  /* green */
  background-color: #d4edda;
}

input:invalid {
  /* red */
  background-color: #f8d7da;
}

input:required {
  /* yellow */
  background-color: #fff3cd;
}

Soumission du formulaire

La soumission d'un formulaire HTML peut se faire de plusieurs façons. Ces mécanismes sont intégrés au fonctionnement standard des navigateurs et ne nécessitent pas forcément de JavaScript.

Touche clavier Enter / Return

Dans la majorité des navigateurs, appuyer sur la touche Entrée lorsqu'un champ de saisie est sélectionné déclenche automatiquement la soumission du formulaire, à condition qu'au moins un bouton de type submit soit présent dans le formulaire.

Fonctionne sur les champs <input type="text">, <input type="email">, etc.
Ne fonctionne pas sur textarea (car Entrée crée une nouvelle ligne).

Bouton de soumission <input type="submit">

Historique et toujours fonctionnel, cet élément crée un bouton simple permettant de soumettre un formulaire.

<input type="submit" value="Envoyer">

Avantage : très simple, compatible avec tous les navigateurs. Limite : ne peut contenir que du texte, pas d'éléments HTML.

Bouton <button type="submit">

Recommandé aujourd'hui, car plus flexible. Tout élément <button> avec type="submit" soumettra le formulaire lors du clic :

<button type="submit">Envoyer</button>

Il est également possible d'omettre type="submit" car c'est la valeur par défaut dans un formulaire :

<form action="./form-ctrl.php" method="post">
    <button>Envoyer</button>
</form>

Pourquoi préférer <button> ?

Il est recommandé d'utiliser <button> plutôt que <input type="submit"> :

Contenu riche : peut contenir des icônes, images, SVG, balises HTML.
Accessibilité renforcée : plus explicite, mieux compris par les lecteurs d'écran.
Style CSS plus fiable : évite les incohérences d'apparence entre navigateurs.
Plus flexible pour le responsive.

Exemple avec icône :

<button type="submit">
  <img src="icon-send.svg" alt="">
  Envoyer
</button>

Types de boutons HTML

L'attribut type d'un <button> peut prendre trois valeurs :

Valeur	Rôle	Description
submit	Submit Button	Soumet le formulaire (valeur par défaut).
reset	Reset Button	Réinitialise tous les champs du formulaire.
button	Generic Button	Ne fait rien par défaut. Utile avec JS.

<button type="reset">Annuler</button>
<button type="button">Action JS</button>
<button type="submit">Envoyer</button>

Formulaire web

Eléments de formulaire

Fonctionnement

Envoi des données

Méthode GET

Méthode POST

Identification des données

Tableaux auto-indexés

Tableaux à clés indexées

Identification des éléments

Alternative au <label>

Validation des données

Validation côté client

Validation côté serveur

L'attribut type sur <input>

Attribut pattern et expression régulière

Validation CSS

Soumission du formulaire

Méthode `GET`

Méthode `POST`

Alternative au `<label>`

L'attribut `type` sur `<input>`

Attribut `pattern` et expression régulière