Quand vous créez un formulaire, vous utilisez des frameworks ou des créateurs de formulaires. Mais en coulisses, tous reposent sur des formulaires HTML. Si vous comprenez le fonctionnement des formulaires HTML, vous comprenez tout le reste. Vous ne dépendez d'aucun outil ni framework. Vous maîtrisez les fondamentaux.
Cet article présente l'élément form en HTML, les types de champs, les libellés, la validation et la façon dont les formulaires sont réellement envoyés. Pas de framework. Pas de bibliothèque. Juste du HTML et les principes sur lesquels tout le reste repose.
L'élément form en HTML
Un formulaire est un élément HTML qui regroupe des champs et envoie leurs données quelque part. La structure de base est :
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Envoyer</button>
</form>
Trois attributs comptent. L'attribut action indique au formulaire où envoyer les données. "/submit" signifie envoyer vers le point d'accès /submit de votre serveur. Si action est vide, le formulaire s'envoie à la page actuelle. L'attribut method indique comment les données voyagent. POST envoie les données dans le corps de la requête (sécurisé, masqué dans l'URL). GET ajoute les données à l'URL (peu sûr pour des données sensibles, utile pour les recherches). L'attribut enctype n'est nécessaire que pour l'envoi de fichiers. Définissez enctype="multipart/form-data" quand votre formulaire contient un champ de fichier.
Tout ce qui se trouve entre les balises du formulaire fait partie de l'envoi. Quand l'utilisateur clique sur le bouton d'envoi, le navigateur rassemble tous les champs nommés et les envoie à l'URL d'action avec la méthode indiquée.
Les types de champs et leur rôle
text
<input type="text" name="first_name">
Un champ de texte sur une seule ligne. Le navigateur affiche une simple zone de texte. Aucune validation. Tous les caractères sont autorisés.
<input type="email" name="email">
Un champ pour les adresses e-mail. Sur ordinateur, il ressemble à un champ de texte. Sur mobile, le navigateur affiche un clavier e-mail. À l'envoi, le navigateur vérifie que la valeur ressemble à une adresse e-mail (elle contient un @). Validation de base uniquement.
password
<input type="password" name="password">
Un texte masqué par des points ou des astérisques pendant la saisie. La valeur est quand même transmise en clair, donc utilisez toujours HTTPS sur les formulaires avec un champ de mot de passe.
number
<input type="number" name="age">
Sur ordinateur, un champ de texte qui n'accepte que des chiffres. Sur mobile, le navigateur affiche un clavier numérique. Le navigateur empêche la saisie de caractères non numériques.
date
<input type="date" name="birth_date">
Un sélecteur de date. Sur les navigateurs et appareils compatibles, un clic sur le champ ouvre un calendrier. La valeur est au format AAAA-MM-JJ.
checkbox
<input type="checkbox" name="agree" value="yes">
Une case qui s'active et se désactive. Si elle est cochée, la valeur du champ est envoyée. Si elle n'est pas cochée, le champ n'est pas envoyé du tout.
radio
<input type="radio" name="plan" value="starter"> Starter
<input type="radio" name="plan" value="pro"> Pro
Plusieurs boutons radio portant le même nom forment un groupe. Un seul peut être sélectionné à la fois. La valeur du bouton sélectionné est envoyée.
select (liste déroulante)
<select name="country">
<option value="us">États-Unis</option>
<option value="ca">Canada</option>
</select>
Un menu déroulant. La valeur de l'option choisie est envoyée.
textarea
<textarea name="message"></textarea>
Un champ de texte sur plusieurs lignes. Les utilisateurs peuvent écrire des paragraphes. La valeur inclut les retours à la ligne.
file
<input type="file" name="resume">
Un bouton qui ouvre le sélecteur de fichiers de l'appareil. Le fichier choisi est envoyé au serveur. Nécessite enctype="multipart/form-data" sur l'élément form.
hidden
<input type="hidden" name="user_id" value="12345">
Un champ qui n'est pas affiché mais qui est envoyé. Utile pour des données de suivi à inclure que l'utilisateur ne doit pas modifier.
Libellés et accessibilité
Associez toujours les champs à des libellés.
<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email">
L'attribut for du libellé doit correspondre à l'id du champ. Quand c'est bien fait :
Les lecteurs d'écran annoncent le libellé et le champ ensemble, un clic sur le libellé place le curseur dans le champ, et les utilisateurs mobiles disposent d'une zone de toucher plus grande.
Ne supprimez jamais les libellés. Si vous devez en masquer un visuellement, masquez-le avec du CSS mais gardez-le dans le HTML. On parle de libellé « visuellement masqué ».
Regrouper des champs liés
Pour des champs liés, utilisez fieldset et legend.
<fieldset>
<legend>Adresse de livraison</legend>
<input type="text" name="street">
<input type="text" name="city">
</fieldset>
L'élément legend annonce le groupe aux lecteurs d'écran. Les fieldsets aident à organiser visuellement et sémantiquement les boutons radio et les cases à cocher.
Envoi du formulaire et méthodes HTTP
Quand l'utilisateur clique sur le bouton d'envoi, le navigateur rassemble tous les champs nommés, encode les données (application/x-www-form-urlencoded par défaut), envoie une requête HTTP à l'URL d'action avec la méthode (POST ou GET) et attend une réponse.
Le serveur reçoit la requête et peut traiter les données. Elles arrivent sous forme de paires clé-valeur. Si la méthode du formulaire est POST et l'action "/submit", la requête se présente ainsi : POST /submit HTTP/1.1 avec Content-Type défini sur application/x-www-form-urlencoded, puis les données apparaissent sous la forme email=user@example.com&name=John.
Le serveur analyse ces données et répond. Si la réponse est une page, le navigateur la charge. Si la réponse est une redirection, le navigateur se rend à la nouvelle URL.
Validation côté client
Le HTML intègre des attributs de validation. Le navigateur les vérifie avant d'envoyer le formulaire.
required
<input type="text" name="email" required>
Le champ doit avoir une valeur. S'il est vide, le formulaire ne s'envoie pas et le navigateur affiche une erreur.
minlength et maxlength
<input type="password" name="password" minlength="8" maxlength="128">
La valeur doit avoir un nombre de caractères compris entre les limites indiquées.
min et max
<input type="number" name="age" min="18" max="120">
Pour les champs numériques, la valeur doit se situer dans la plage indiquée.
pattern
<input type="text" name="zip_code" pattern="[0-9]{5}">
Une expression régulière que la valeur doit respecter. Un code postal à cinq chiffres correspond à [0-9]{5}.
La validation côté client est un confort pour les utilisateurs. Elle les empêche d'envoyer des données invalides et de voir une erreur venant du serveur. Mais ne vous reposez jamais dessus pour la sécurité. Validez toujours aussi côté serveur.
Comprendre la différence entre type="submit" et type="button"
<button type="submit">Envoyer</button>
<button type="button">Enregistrer</button>
Un bouton avec type="submit" envoie le formulaire au clic. Un bouton avec type="button" ne fait rien par défaut. Utilisez type="button" quand vous voulez y attacher des gestionnaires d'événements JavaScript.
Beaucoup de développeurs utilisent <button> sans préciser le type. Cela revient à type="submit", ce qui est souvent ce qu'on veut. Mais soyez explicite pour éviter les surprises.
Pourquoi comprendre les formulaires HTML
Si vous utilisez un framework JavaScript moderne, vous construisez par-dessus des formulaires HTML. Les frameworks cachent les détails, mais les principes restent les mêmes. Un formulaire s'envoie toujours vers un point d'accès. La validation doit toujours avoir lieu. Le serveur doit toujours traiter les données.
Quand quelque chose casse dans la gestion de votre formulaire, comprendre le HTML aide à déboguer. Vous savez d'où viennent les données, comment elles sont encodées et ce que le serveur doit recevoir. C'est le socle.
La plupart des applications web modernes n'utilisent plus l'envoi de formulaire classique. Elles utilisent JavaScript pour intercepter le formulaire, le valider et envoyer les données avec _blocked_ ou une bibliothèque de requêtes. Mais connaître d'abord la méthode HTML rend ces schémas compréhensibles.
Comment le créateur de formulaires WEMASY applique ces principes
En coulisses, le créateur de formulaires de WEMASY génère des formulaires HTML accessibles avec ces mêmes éléments. Les libellés sont associés aux champs. La validation est gérée côté client et côté serveur. Les données du formulaire sont envoyées de façon sécurisée. Si vous exportez ou personnalisez un formulaire WEMASY, vous travaillez avec des formulaires HTML bâtis sur ces fondamentaux.
Consultez la page des tarifs WEMASY pour les détails sur les fonctions de formulaires et les options de personnalisation.