Formulaire web

Les éléments de formulaire en HTML sont utilisés pour collecter des données des utilisateurs dans les pages web.

Formulaires d'inscription ou de création de compte : Utilisés sur les sites web pour permettre aux utilisateurs de créer un nouveau compte. Ils comprennent généralement des champs pour le nom d'utilisateur, l'adresse email, le mot de passe et parfois des informations supplémentaires comme l'adresse ou le numéro de téléphone.

Formulaires de connexion : Permettent aux utilisateurs de se connecter à leur compte en utilisant leur nom d'utilisateur et mot de passe.

Formulaires de publication ou de commentaire : Utilisés pour permettre aux utilisateurs de créer de nouveaux posts ou de commenter des posts existants. Ils peuvent inclure des champs pour le texte, des options pour ajouter des images ou des vidéos, et parfois des outils de mise en forme.

Formulaires de profil utilisateur : Permettent aux utilisateurs de saisir ou de modifier des informations personnelles sur leur profil, telles que leur bio, leur photo de profil, leurs intérêts, etc.

Formulaires de recherche : Présents sur de nombreux sites web, ils permettent aux utilisateurs de saisir des termes de recherche pour trouver des informations spécifiques sur le site.

Formulaires de contact : Utilisés pour permettre aux visiteurs de laisser un message ou de contacter les propriétaires du site. Ils peuvent inclure des champs pour le nom, l'email, le sujet et le message.

Formulaires de feedback ou de sondage : Conçus pour recueillir les avis des utilisateurs sur un produit, un service ou une expérience. Ils peuvent inclure des questions à choix multiples, des cases à cocher, des échelles de notation, etc.

Formulaires de commande ou de transaction : Utilisés dans les boutiques en ligne pour gérer le processus d'achat. Ils peuvent demander des informations sur le paiement, les options de livraison et les détails du client.

Formulaires d'inscription à une newsletter : Permettent aux utilisateurs de s'abonner à des bulletins d'information ou des mises à jour par email. Ils requièrent généralement seulement une adresse email.

Formulaires de réservation ou de prise de rendez-vous : Utilisés par les entreprises de services pour permettre aux clients de réserver des rendez-vous ou des services en ligne.

Etc.

➡️ WHATWG - Forms

Éléments de formulaire

Pour comprendre le fonctionnement et la structure des formulaires web, il est essentiel de se familiariser avec les différents éléments de formulaire en HTML, chacun ayant un rôle spécifique dans la collecte et la gestion des données utilisateur.

<form> : L'élément de base qui englobe tous les autres éléments de formulaire. Il définit comment les données seront envoyées et traitées.

<label> : Fournit une étiquette pour les éléments de formulaire, améliorant l'accessibilité et l'interaction utilisateur.

<input> : C'est l'élément le plus utilisé. Il utilise différentes valeurs pour l'attribut type pour spécifier le type de données attendu.

type="text" : Pour une entrée de texte simple.
type="email" : Pour une adresse email.
type="password" : Pour les mots de passe.
type="radio" : Boutons radio pour une sélection unique.
type="checkbox" : Cases à cocher pour des sélections multiples.
type="date" : Widget pour la sélection d'une date.
…

<textarea> : Pour des entrées textuelles sur plusieurs lignes.

<select> et <option> : Créent une liste déroulante. <select> définit la liste, et <option> représente les choix individuels.

<button> : Pour les boutons personnalisés. Peut être utilisé pour soumettre un formulaire, réinitialiser les valeurs des éléments, ou comme simple bouton d'action.

Etc.

Source image

Fonctionnement

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

Frontend (côté client)

Création du formulaire : Les formulaires sont créés en utilisant HTML. Des éléments tels que <form>, <label>, <input>, <textarea>, <select>, <button> sont utilisés pour structurer le formulaire et récolter les données.
Interaction utilisateur : L'utilisateur remplit le formulaire et soumet les données. Des attributs spécifiques sur les éléments de formulaire permettent de vérifier la conformité des données (comme la saisie des champs obligatoires, le format de l'email, etc.) avant l'envoi.
Envoi des données : Lorsque l'utilisateur soumet le formulaire, les données sont envoyées au serveur via une requête HTTP, généralement en utilisant la méthode POST ou GET.

Backend (côté serveur)

Réception des données : Le serveur reçoit les données du formulaire, souvent via un script écrit dans un langage de programmation côté serveur comme PHP, Python, Node.js, etc.
Traitement des données : Le serveur effectue un traitement sur les données reçues, comme des validations supplémentaires, le stockage dans une base de données, ou des actions en fonction des données (comme l'envoi d'emails ou de notifications).
Réponse au client : Après le traitement, le serveur envoie une réponse au client, qui peut être une page de confirmation, un message d'erreur ou une redirection vers une autre page, selon le résultat du traitement.

Source image

Envoi des données

Les composants d'un formulaire web sont définis à l'intérieur de la balise <form> en HTML, qui sert de conteneur pour les différents éléments de saisie de données.

L'attribut action de cette balise spécifie l'URL de la ressource serveur (backend) qui est chargée de traiter les données soumises.
L'attribut method détermine la méthode HTTP utilisée pour envoyer le formulaire, avec GET et POST comme méthodes les plus couramment employées, chacune étant adaptée à des scénarios d'utilisation spécifiques.

Source image

Méthode `GET`

La méthode HTTP GET dans les formulaires web possède des spécificités et des scénarios d'utilisation particuliers.

Spécificités de la méthode GET

Transmission de données dans l'URL : Avec GET, les données du formulaire sont envoyées via l'URL. Elles apparaissent dans la partie "query" de l'URI, qui est la partie de l'URL suivant le symbole ?.
Limitation de longueur : Étant donné que les données sont transmises dans l'URL, leur longueur est limitée. Cette limitation dépend du navigateur et du serveur, mais en général, il est conseillé de ne pas dépasser 2000 caractères.
Non-confidentialité : Les données envoyées via GET sont visibles à quiconque peut voir l'URL, ce qui les rend inadaptées pour transmettre des informations sensibles comme les mots de passe.
Mise en cache : Les requêtes GET peuvent être mises en cache par le navigateur et les serveurs proxy, ce qui peut améliorer les performances pour les requêtes répétitives.
Idempotence : Une caractéristique importante de GET est son idempotence, ce qui signifie que plusieurs requêtes identiques auront le même effet qu'une seule requête.

Scénarios d'utilisation de la méthode GET

Recherche et filtrage : GET est idéal pour les requêtes de recherche ou les filtrages où les paramètres peuvent être sauvegardés dans l'URL, facilitant le partage de l'URL ou le retour à une recherche précédente.
Données non sensibles : Utilisée pour envoyer des données non confidentielles, car elles seront visibles dans l'URL.
Bookmarking et partage d'URL : Comme les données sont incluses dans l'URL, celle-ci peut être mise en signet, partagée, ou réutilisée facilement.
Chargements de page simples : GET est souvent utilisée pour des demandes simples où aucune action autre que la récupération de données n'est nécessaire.

Méthode `POST`

La méthode HTTP POST dans les formulaires web présente des spécificités différentes de la méthode GET et est utilisée dans d'autres scénarios.

Spécificités de la méthode POST

Transmission de données dans le corps de la requête : Avec POST, les données sont envoyées dans le corps de la requête HTTP et non dans l'URL, offrant une meilleure sécurité et une confidentialité accrue pour les informations sensibles.
Pas de limite de taille : Contrairement à GET, POST n'a pas de limite de taille significative pour les données transmises, ce qui la rend idéale pour l'envoi de grandes quantités d'informations.
Non-idempotence : Une requête POST n'est pas idempotente, ce qui signifie que l'envoi répété de la même requête peut avoir des effets différents, comme créer plusieurs entrées dans une base de données.
Pas de mise en cache : Les réponses aux requêtes POST ne sont généralement pas mises en cache par les navigateurs ou les serveurs proxy.

Scénarios d'utilisation de la méthode POST

Soumission de formulaire avec données sensibles : Idéale pour les formulaires de connexion, d'inscription, ou tout formulaire contenant des informations sensibles comme les mots de passe ou les détails personnels.
Envoi de grandes quantités de données : Utilisée pour les formulaires qui nécessitent le transfert de grandes quantités de données, comme les formulaires de saisie de texte long ou le téléchargement de fichiers.
Actions avec effets secondaires : POST est utilisée pour les actions qui ont des effets secondaires, comme la création ou la mise à jour de données sur le serveur.
Interactions avec les bases de données : Souvent utilisée pour les opérations qui impliquent l'insertion, la mise à jour ou la suppression de données dans une base de données.

Identification des données

Dans les formulaires HTML, les données sont identifiées et organisées à l'aide de l'attribut name sur les éléments de formulaire. Cet attribut joue un rôle crucial dans le traitement des données de formulaire, aussi bien côté client que côté serveur, et son fonctionnement peut être comparé à celui des variables dans les langages de programmation.

Fonctionnement de l'attribut name dans les formulaires HTML

Identification unique : Chaque élément de formulaire (comme <input>, <textarea>, ou <select>) se voit attribuer un name unique. Lorsque le formulaire est soumis, les données sont envoyées au serveur sous la forme de paires clé-valeur, où la clé est la valeur de l'attribut name de l'élément de formulaire, et la valeur est la donnée saisie ou sélectionnée par l'utilisateur.
Regroupement de données : Pour les éléments comme les boutons radio, plusieurs éléments peuvent partager le même name mais avoir des valeurs différentes. Cela permet de regrouper logiquement ces éléments sous une seule entité.

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

Dans les formulaires HTML, il est possible d'utiliser des noms de champs sous forme de tableaux auto-indexés.

Utilisation : Pour créer un tableau auto-indexé, on ajoute [] après le nom dans l'attribut name. Par exemple, name="user-data[]".

Fonctionnement : Lorsque le formulaire est soumis, le serveur reçoit les données sous forme de tableau, chaque élément ayant un index automatique. Ceci est particulièrement utile pour des éléments comme les cases à cocher, où l'utilisateur peut sélectionner plusieurs options.

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

Dans les formulaires HTML, lorsqu'on utilise des noms de champs sous forme de tableaux auto-indexés (en utilisant name="fieldname[]"), le comportement exact de l'indexation dépend du langage de programmation côté serveur qui traite le formulaire.

Cependant, il y a des conventions générales :

Index numérique : Les indices sont typiquement numériques. Lorsque le formulaire est soumis, le serveur reçoit les données sous forme de tableau avec des indices numériques.
Point de départ de l'indexation : Dans la plupart des langages de programmation côté serveur, comme PHP, l'indexation commence à zéro. Cela signifie que le premier élément du tableau aura l'index 0, le second 1, et ainsi de suite. Toutefois, cette convention peut varier en fonction du langage et de la configuration du serveur. Il est donc toujours recommandé de vérifier la documentation spécifique du langage utilisé pour le traitement des formulaires.
Traitement automatique : Le serveur traite ces noms de champs comme des tableaux et assigne automatiquement les indices lors de la réception des données. L'utilisateur n'a pas besoin de spécifier les indices manuellement dans le HTML.

Tableaux à clés indexées

Dans les formulaires HTML, il est également possible d'utiliser des noms de champs sous forme de tableaux à clés indexées.

Utilisation : On spécifie une clé dans les crochets, comme par exemple name="item[quantity]" ou name="item[color]".

Fonctionnement : Cette méthode permet de regrouper des données liées sous une seule entité. Par exemple, si vous avez un formulaire pour commander plusieurs types d'articles, chaque article peut avoir une quantité, une couleur, etc. Ces données sont ainsi organisées de manière structurée et facile à traiter côté serveur.

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

Lorsque les données de formulaire sont envoyées avec des noms de champs sous forme de tableaux à clés indexées (par exemple, name="item[quantity]" ou name="user[age]"), elles sont interprétées côté serveur comme des tableaux associatifs ou des objets, en fonction du langage de programmation utilisé pour le traitement.

Identification des éléments

Pour une meilleure accessibilité et une interaction utilisateur intuitive, chaque élément d'un formulaire web doit être clairement identifiable.

Labellisation : Chaque élément de formulaire doit être accompagné d'un élément <label> descriptif. Cette pratique améliore l'accessibilité, en particulier pour les utilisateurs qui dépendent des lecteurs d'écran, et permet également une interaction plus naturelle pour tous les utilisateurs.

Association label-champs : Utilisez l'attribut for dans l'élément <label> pour le lier à l'élément de formulaire correspondant. La valeur de l'attribut for doit correspondre à la valeur de l'attribut id de l'élément de formulaire.

Source image

Interaction améliorée : Lorsqu'un utilisateur clique sur un label, le navigateur met automatiquement le focus sur l'élément de formulaire associé, ce qui simplifie la saisie de données.

Exemple

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

Alternative au `<label>`

Lorsque l'utilisation d'un élément <label> n'est pas possible, par exemple pour des raisons esthétiques ou de design, il est recommandé d'adopter des mesures alternatives pour conserver l'accessibilité et la compréhension du formulaire.

Attributs ARIA : L'utilisation d'attributs ARIA tels que aria-label fournit un contexte accessible aux technologies d'assistance. Par exemple, aria-label="Nom d'utilisateur" peut être utilisé pour décrire le rôle de l'élément de formulaire.

Infobulles d'aide : L'attribut title peut être utilisé pour ajouter une infobulle qui apparaît au survol ou lors du focus sur l'élément, offrant ainsi une indication supplémentaire sur la fonction de l'élément de formulaire. Il est important de noter que l'attribut title n'est pas toujours accessible via le clavier ou lu par les lecteurs d'écran, donc il ne devrait pas être le seul moyen d'indication.

Texte d'exemple : L'attribut placeholder peut être utilisé pour montrer un exemple de texte ou une indication du type de contenu attendu dans le champ de formulaire. Cependant, le placeholder ne doit pas être utilisé comme substitut à une étiquette, car il présente plusieurs limites en termes d'accessibilité et d'expérience utilisateur.

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

Il est essentiel de valider les données soumises via un formulaire web pour assurer leur intégrité et leur conformité aux attentes du système. La validation doit s'effectuer à la fois du côté client et du côté serveur pour plusieurs raisons.

Validation Côté Client

Expérience utilisateur : La validation côté client est mise en place pour guider les utilisateurs lors de la saisie des données, en fournissant des retours immédiats sur la validité des informations entrées, telles que les champs obligatoires ou le format de données spécifique (par exemple, l'adresse email ou le numéro de téléphone).
Performance : Elle permet de réduire le trafic inutile vers le serveur en empêchant l'envoi de formulaires avec des données incorrectes ou incomplètes.
Techniques : Les navigateurs modernes offrent des fonctionnalités de validation, comme les attributs required, minlength, maxlength, min, max, type ou pattern. Il est également courant d'utiliser des scripts JavaScript pour des validations plus complexes ou personnalisées.

➡️ MDN - Client-side form validation

Validation Côté Serveur

Sécurité : La validation côté serveur est cruciale car elle constitue la dernière ligne de défense contre les données incorrectes ou malveillantes. Les validations côté client peuvent être contournées (par exemple, si l'utilisateur désactive JavaScript ou modifie les données avant l'envoi).
Intégrité des Données : Cela garantit que toutes les données répondent aux critères de validation avant d'être traitées ou stockées dans une base de données, protégeant ainsi contre les erreurs de données et les attaques potentielles, telles que les injections SQL.
Redondance : Même si les données ont été validées côté client, elles doivent être revérifiées côté serveur car elles peuvent ne pas provenir de l'interface utilisateur prévue, comme dans le cas de requêtes forgées ou de l'utilisation de l'API par des tiers.

Attribut `type` sur les éléments `<input>`

L'attribut type sur les éléments <input> en HTML spécifie le type de contrôle à afficher. Cet attribut est essentiel pour définir le comportement et l'apparence de l'élément, ainsi que pour valider son contenu.

text : Pour des entrées de texte génériques. C'est le type par défaut.

<input type="text">

radio : Pour les boutons radio, permettant à l'utilisateur de sélectionner une seule option parmi plusieurs.

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

checkbox : Pour les cases à cocher, permettant de sélectionner ou de désélectionner une option.

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

email : Pour les champs de saisie d'email, avec validation de format intégrée.

<input type="email">

number : Pour les entrées numériques, avec des contrôles d'augmentation/diminution.

<input type="number">

date : Pour sélectionner une date à partir d'un calendrier.

<input type="date">

Etc.

Chaque type a ses propres caractéristiques et est optimisé pour une utilisation spécifique, améliorant ainsi l'expérience utilisateur et la collecte de données.

➡️ WHATWG - The input element

Attribut `pattern` et expression régulière

L'attribut pattern est utilisé dans les formulaires HTML pour définir une contrainte de validation sur les entrées de type texte, telle qu'un champ de saisie <input>. Il prend comme valeur une expression régulière qui spécifie le modèle que la valeur de l'entrée doit respecter pour être considérée comme valide.

Les expressions régulières (regex) sont des séquences de caractères qui forment un modèle de recherche. Elles sont utilisées pour vérifier si une chaîne de caractères contient certaines sous-chaînes spécifiques, pour remplacer des sous-chaînes par d'autres, ou pour extraire des sous-chaînes d'une chaîne plus grande.

Une regex se compose de caractères littéraux (comme abc qui correspondrait exactement à la séquence "abc") et de métacaractères qui ont une signification spéciale (comme . qui correspond à n'importe quel caractère ou ^ et $ qui correspondent respectivement au début et à la fin d'une chaîne).

Exemple

Validation d'un numéro de téléphone mobile suisse :

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

((00|\+)41|0) : Ce groupe capture le préfixe du numéro de téléphone.

(00|\+) : Ce sous-groupe capture soit 00, soit le symbole +, pour les formats internationaux où les numéros de téléphone peuvent commencer par 00 ou par +.
41 : Code de pays pour la Suisse.
| : Opérateur logique "OU" en regex.
0 : Capture le format où le numéro commence directement par 0, commun pour les appels locaux en Suisse.

7 : Spécifie que le numéro doit commencer par un 7, indicatif des téléphones mobiles en Suisse.

[35-9] : Indique que le chiffre suivant le 7 doit être un 3, 5, 6, 7, 8, ou 9, correspondant aux opérateurs mobiles suisses.

\d{7} :

\d : Représente un chiffre (équivalent à [0-9]).
{7} : Indique que le chiffre précédent doit être répété exactement sept fois, assurant que le numéro a la longueur correcte après le préfixe.

Cette regex garantit que seuls les numéros de téléphone suisses valides, tant en formats internationaux que locaux, sont acceptés pour les téléphones mobiles.

➡️ RegExr

Note

Les expressions régulières sont très utilisées dans divers contextes de programmation et de traitement de données pour la recherche et la manipulation de textes selon des motifs spécifiques : validation de données, traitement de texte (rechercher/remplacer), analyse de logs, etc.

Email

Le WHATWG définit cette expression régulière pour valider une adresse email :

/^[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])?)*$/

Source

🚨 Cette regex ne garantit pas qu'elle est utilisée dans tous les navigateurs web pour valider un <input type="email">, ni qu'elle respecte à 100% les RFC officielles.

Validation CSS

Les pseudo-classes de validation CSS sont des sélecteurs spéciaux qui permettent de cibler des éléments de formulaire <input>, <select> ou <textarea> en fonction de leur état de validation. Elles sont très utiles pour appliquer des styles spécifiques aux éléments valides ou invalides, améliorant ainsi l'expérience utilisateur en fournissant un retour visuel immédiat sur la validité des données saisies.

:valid : Cible tous les éléments de formulaire qui contiennent des valeurs valides.

:invalid : Cible les éléments de formulaire qui contiennent des valeurs invalides.

:required : Cible les éléments de formulaire qui ont l'attribut required.

:optional : Cible les éléments de formulaire qui ne sont pas marqués comme required.

:in-range et :out-of-range : Pour les éléments avec des attributs min et/ou max, ces pseudo-classes ciblent les éléments dont la valeur est respectivement dans ou hors de la plage spécifiée.

:read-only et :read-write : Ciblent respectivement les éléments en lecture seule et ceux éditables.

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

Au niveau HTML, les moyens de soumettre un formulaire sont principalement basés sur les éléments et les attributs HTML standards.

Touche clavier Return : Dans la plupart des navigateurs, appuyer sur la touche Entrée (Return) alors que le focus est sur un champ de saisie d'un formulaire provoquera la soumission de ce formulaire.

Bouton de soumission (<input type="submit">) : Un bouton de soumission standard qui, lorsqu'il est cliqué, envoie le formulaire à l'adresse indiquée dans l'attribut action du formulaire.

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

Bouton (<button type="submit">) : Un élément <button> avec l'attribut type défini sur submit agira comme un bouton de soumission.

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

Note

De nos jours, il est recommandé d'utiliser l'élément <button> pour soumettre des formulaires en HTML pour plusieurs raisons :

Contenu riche : La balise <button> peut englober du HTML, ce qui permet d'insérer non seulement du texte mais aussi des icônes et d'autres éléments HTML, offrant ainsi une flexibilité accrue pour le design.
Sémantique améliorée : L'élément <button> a une signification sémantique claire, indiquant qu'il s'agit d'une action de bouton, ce qui peut être bénéfique pour l'accessibilité et la compréhension du code.
Facilité de mise en forme : Les styles CSS peuvent être appliqués plus uniformément sur l'élément <button> que sur les <input type="submit">, réduisant ainsi les incohérences et les bugs de rendu entre différents navigateurs.

Tip

L'attribut type sur l'élément <button> peut avoir les valeurs : submit (défaut), reset ou button.

Keyword	State	Brief description
submit	Submit Button	Submits the form.
reset	Reset Button	Resets the form.
button	Button	Does nothing.

Ainsi, le code suivant produit un bouton de soumission de formulaire :

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

Formulaire web

Élé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

Attribut type sur les éléments <input>

Attribut pattern et expression régulière

Validation CSS

Soumission du formulaire

Méthode `GET`

Méthode `POST`

Alternative au `<label>`

Attribut `type` sur les éléments `<input>`

Attribut `pattern` et expression régulière