Balises

Introduction aux formulaires HTML

Les formulaires sont l'un des piliers de l'interactivité sur le web. Ils permettent aux utilisateurs de saisir et d'envoyer des données à un site web. On les retrouve partout : pour se connecter, s'inscrire à une newsletter, effectuer un achat, poster un commentaire, ou encore télécharger un fichier.

Un formulaire HTML est une section d'un document contenant des contrôles interactifs, appelés "champs", qui permettent à un utilisateur de soumettre des informations à un serveur web.

Concrètement, un formulaire est composé de plusieurs éléments :

La balise <form> : C'est le conteneur principal qui englobe tous les champs du formulaire. Elle définit comment et où les données seront envoyées.
Les champs de saisie (<input>, <textarea>, <select>) : Ce sont les éléments avec lesquels l'utilisateur interagit pour fournir des informations (champs de texte, cases à cocher, boutons radio, listes déroulantes, etc.).
Les libellés (<label>) : Ils décrivent le but de chaque champ de saisie, améliorant ainsi l'accessibilité et la clarté du formulaire.
Un bouton de soumission (<button type="submit"> ou <input type="submit">) : C'est l'élément qui, une fois cliqué, déclenche l'envoi des données du formulaire vers le serveur.

Dans ce chapitre, nous allons explorer en détail chacune de ces balises et leurs attributs pour construire des formulaires sémantiques, accessibles et fonctionnels.

Warning

Résistez à la tentation d'utiliser des <br> ou des <p>, voire des <div> pour afficher des formulaires plus "user-friendly". En effet, ces balises sont soit sémantiquement incorrectes, soit complètement inutiles. Nous verrons avec les CSS que nous pourrons afficher ce formulaire sans ajouter des balises supplémentaires.

Balise `<form>`

Un formulaire est un conteneur d'un ou plusieurs champs et devrait contenir au moins un élément de soumission (bouton). Tous les éléments du formulaire doivent être contenus (ou liés) à une balise <form>.

Dans cette balise, il est nécessaire de spécifier les attributs suivants :

Attribut	Description
action	indique l'adresse à laquelle sont envoyées les données
method	la méthode d'envoi des données (soit liées à l'adresse (GET), soit placées dans le corps de la requête HTTP (POST))
enctype	la méthode d'encodage des données

formInscription.html

<h1>Création de votre compte</h1>
<form action="#" method="post" >
    <!-- Tous les champs seront placés ici -->
</form>

Balise `<input>` : champs texte

La plupart des champs d'un formulaire reposent sur la balise <input> et se différencient par l'attribut type.

Plusieurs types de champs permettent à l'utilisateur d'écrire une information textuelle courte :

Texte court: <input type="text" …
Mot de passe: input type="password" …
Url: <input type="url" …
Courriel: <input type="email" …
Nombre: <input type="number" …
Date : <input type="date" …
Heure: <input type="time" …
Caché: <input type="hidden" …

Exemple :

<input type="text" name="nom" id="nom" required placeholder="Entrez votre nom" value=""   >

Comme on peut le voir, la balise input peut contenir différents attributs obligatoires ou optionnels.

Attribut	Description
`type="text"`	Définit le type d'input comme un champ de texte, permettant la saisie de caractères. ( Spécifique aux champs de texte. )
`name="nom"`	Le nom de ce champ, utilisé pour identifier la donnée lors de la soumission du formulaire. Si l'utilisateur entre "Dupont", la valeur envoyée sera nom=Dupont. Obligatoire pour tous les champs interactifs (text, radio, checkbox, select, textarea, etc.) qui envoient des données au serveur. Sans cet attribut, le champ ne sera pas pris en compte lors de la soumission.
`id="nom"`	Attribue un identifiant unique au champ, souvent utilisé pour faire référence au champ via CSS ou JavaScript.
`required`	Indique que ce champ est obligatoire. Si l'utilisateur tente de soumettre le formulaire sans le remplir, une validation sera effectuée, et un message d'erreur s'affichera. ( Spécifique pour tous les champs où une saisie est attendue )
`placeholder="Entrez votre nom"`	Affiche un texte indicatif à l'intérieur du champ avant la saisie, guidant l'utilisateur sur ce qui est attendu. ( Spécifique aux champs de texte. )
`value=""`	Définit la valeur initiale du champ. Ici, il est vide, mais il pourrait être utilisé pour pré-remplir le champ avec une valeur par défaut. ( Spécifique à presque tous les champs de texte. )

en fonction de l'interaction proposée, la balise html aura ses propres attributs.

Exemple de formulaire d'encodage de nom et prénom :

See the Pen HTML : form by Flolec (@Flolec) on CodePen.

Grâce aux valeur des placeholder, l'utilisateur connait les données à entrer. Cependant, les placeholders disparaissent dès que l'utilisateur commence à saisir du texte, ce qui peut rendre l'objectif du champ moins clair. De plus, les lecteurs d'écran, utilisés par les personnes malvoyantes, ne lisent pas toujours les placeholders correctement (accessibilité).

Nous allons donc ajouter des libellés pour rendre les champs identifiables.

Mais avant, voyons comment les données sont récupérées au niveau du serveur.

Comprendre les méthodes d'envoi : GET et POST

Avant de voir comment le serveur récupère les données, il est crucial de comprendre comment ces données lui sont envoyées. C'est le rôle de l'attribut method de la balise <form>, qui définit le verbe HTTP à utiliser pour la requête.

Les deux méthodes les plus courantes pour les formulaires sont GET et POST.

GET :
- Principe : Les données du formulaire sont ajoutées à l'URL de destination (l'attribut action).
- Exemple : http://example.com/traitement.php?nom=Dupont&prenom=Tom
- Visibilité : Les données sont visibles par tous dans la barre d'adresse du navigateur.
- Limites : La longueur de l'URL est limitée (environ 2048 caractères), ce qui restreint la quantité de données.
- Usage typique : Pour des actions qui ne modifient pas de données sensibles, comme une recherche ou l'application de filtres. Les résultats peuvent être mis en favoris ou partagés.
POST :
- Principe : Les données du formulaire sont envoyées dans le corps de la requête HTTP, de manière invisible pour l'utilisateur.
- Visibilité : Les données n'apparaissent pas dans l'URL.
- Limites : Pas de limite de taille pour les données envoyées. C'est la méthode requise pour envoyer des fichiers (enctype="multipart/form-data").
- Usage typique : Pour toutes les actions qui modifient des données sur le serveur (création de compte, envoi de message) ou qui impliquent des informations sensibles (mots de passe, données personnelles).

En résumé :

Caractéristique	GET	POST
Visibilité des données	Dans l'URL (public)	Dans le corps de la requête (caché)
Sécurité	Faible (ne pas utiliser pour les mots de passe)	Élevée (adapté aux données sensibles)
Limite de taille	Oui (limite de l'URL)	Non
Mise en favoris/partage	Possible	Impossible
Usage principal	Récupérer des données	Envoyer/modifier des données

Maintenant que vous comprenez la différence fondamentale entre GET et POST, voyons comment le serveur interprète ces informations.

Au niveau serveur

Comment les données sont-elles récupérées au niveau du serveur ? Prenons l'exemple suivant :

<input type="text" name="nom" id="nom" required placeholder="Entrez votre nom" value=""   >
<input type="text" name="prenom" id="prenom" required placeholder="Entrez votre prenom" value=""   >

Lorsque les données sont envoyées à un serveur via un formulaire, voici comment le processus se déroule de manière simplifiée :

Saisie par l'utilisateur: L'utilisateur remplit le formulaire en ligne (par exemple, en saisissant son nom, son email, etc.).
Soumission du formulaire : Lorsque l'utilisateur clique sur le bouton, toutes les données des champs sont rassemblées sous forme de "paires clé-valeur". Chaque champ du formulaire est identifié par son attribut name et la valeur correspond à ce que l'utilisateur a saisi ou sélectionné.

Dans notre exemple : Si l'utlisateur entre "Dupont" dans le champ name="nom", une paire sera créée comme nom=Dupont. Si l'utlisateur entre "Tom" dans le champ name="prenom", une paire sera créée comme prenom=Tom.
Envoi des données au serveur : Les données sont envoyées au serveur via une méthode HTTP (généralement GET ou POST).
Réception par le serveur : Le serveur reçoit ces paires clé-valeur et les traite. Chaque champ du formulaire est donc "compris" par le serveur via son nom et sa valeur. Pour notre exmple : Le serveur reçoit : nom=Dupont&prenom=Tom (Requête GET).
Traitement : Le code est traité au niveau du serveur. Par exemple, un enregistrement dans une base de données, un envoi d'un email, génération d'une réponse, redirection vers une nouvelle page...
Retour d'information à l'utilisateur : Le serveur envoie une réponse à l'utilisateur. Cela peut être une confirmation de la soumission, un message d'erreur ou une nouvelle page en fonction du traitement des données.

En tant que développeur, il est donc important d'identifier et connaitre comment les infos sont envoyées au serveur. Même si actuellement vos formulaires ne sont pas encore traités via php, il est important de les préparer au mieux.

Visualiser les données envoyées

Que ce soit avec GET ou POST, il est très utile de voir exactement quelles données sont envoyées par le navigateur. Pour cela, les outils de développement des navigateurs sont vos meilleurs alliés.

Ouvrez les outils de développement (généralement avec la touche F12 ou un clic droit > Inspecter).
Allez dans l'onglet Réseau (ou Network).
Soumettez votre formulaire. Une nouvelle ligne correspondant à la requête va apparaître.
Cliquez sur cette ligne. Vous aurez accès à tous les détails de la requête :
- Pour une requête GET : Les données seront visibles directement dans l'URL de la section "En-têtes" (Headers).
- Pour une requête POST : Allez dans la section "Charge utile" (Payload ou Request Body) pour voir les paires clé/valeur qui ont été envoyées dans le corps de la requête.

C'est une compétence fondamentale pour déboguer vos formulaires et comprendre la communication entre le client et le serveur.

Balise `<label>`

Grâce aux valeur des placeholders, l'utilisateur connait les données à entrer. Cependant, les placeholders disparaissent dès que l'utilisateur commence à saisir du texte, ce qui peut rendre l'objectif du champ moins clair. De plus, les lecteurs d'écran, utilisés par les personnes malvoyantes, ne lisent pas toujours les placeholders correctement (accessibilité).

Nous allons donc ajouter des libellés pour rendre les champs identifiables.

Le libellé permet de comprendre la signification du champ.

Deux techniques sont possibles pour lier un intitulé à un champ de formulaire :

Par l'identifiant du champ:

<label for="champ1">libellé</label> <input id="champ1" name="monchamp" type="text" >

L'idpermet de lier l'input au label. La valeur de lid doit donc être identique à la valeur du for

Do this

Liste de courses
<label for="votreNom">Votre nom</label> <input id="votreNom" name="nom" type="text" >

Tip: Vous pouvez donner les mêmes valeurs à l'id, au name et au for

<label for="nom">Votre nom</label> <input id="nom" name="nom" type="text" >

Par l'imbrication du champ dans le libellé:

<label>libellé<input id="champ1" name="monchamp"  type="text" ></label>

Balise `<textarea>`

Pour qu'un utilisateur puisse encoder un long texte, de plusieurs lignes (exemples: une description, un commentaire, ...), il faut utiliser la balise <textarea>. Celle-ci possède les attributs rows (nombre de lignes visibles par défaut) et cols (nombre de caractères visibles par ligne par défaut).

<label>libellé<textarea name="message" ></textarea></label>

Champs de Date et d'Heure

HTML fournit plusieurs types d'input spécialisés pour gérer les dates et les heures. Leur utilisation est fortement encouragée car ils améliorent l'expérience utilisateur en affichant des sélecteurs natifs (calendriers, horloges) et garantissent que les données envoyées au serveur respectent un format standard et fiable.

Voici les types les plus courants :

<fieldset>
    <legend>Exemples de champs temporels</legend>

    <label for="jour">Date :</label>
    <input type="date" id="jour" name="jour_reservation">


    <label for="mois">Mois de facturation :</label>
    <input type="month" id="mois" name="mois_facturation">


    <label for="semaine">Semaine de livraison :</label>
    <input type="week" id="semaine" name="semaine_livraison">


    <label for="heure">Heure du rendez-vous :</label>
    <input type="time" id="heure" name="heure_rdv">
</fieldset>

Résultat :
_{Des styles ont été appliqués pour le rendu visuel}

Exemples de champs temporels Date :

Mois de facturation :

Semaine de livraison :

Heure du rendez-vous :

Format des données envoyées

Le principal avantage de ces champs est la standardisation des données. Voici ce que le serveur reçoit pour chaque type si l'on sélectionne par exemple le 26 octobre 2025 à 15h30 :

type="date" : La valeur est au format AAAA-MM-JJ.
- Exemple : jour_reservation=2025-10-26
type="month" : La valeur est au format AAAA-MM.
- Exemple : mois_facturation=2025-10
type="week" : La valeur est au format AAAA-WSS, où W est un séparateur littéral et SS est le numéro de la semaine (de 01 à 53).
- Exemple : semaine_livraison=2025-W43
type="time" : La valeur est au format hh:mm (horloge de 24 heures).
- Exemple : heure_rdv=15:30

Cette prévisibilité est essentielle pour traiter les données de manière fiable côté serveur.

Des choix exclusifs: les boutons `radio`

Les boutons radio, créés avec <input type="radio">, permettent à l'utilisateur de sélectionner une seule option parmi un groupe de choix mutuellement exclusifs. Imaginez un questionnaire où vous devez choisir votre niveau de satisfaction : "Très satisfait", "Satisfait", ou "Insatisfait". Vous ne pouvez en cocher qu'un seul à la fois.

Le secret pour lier plusieurs boutons radio ensemble est de leur donner exactement le même attribut name. C'est ce qui indique au navigateur qu'ils appartiennent au même groupe de questions.

Chaque bouton radio doit également avoir un attribut value qui définit la valeur qui sera envoyée au serveur si cette option est sélectionnée. Cette valeur n'est pas visible par l'utilisateur, mais elle est essentielle pour le traitement des données.

Pour une meilleure accessibilité et une meilleure expérience utilisateur, il est crucial d'associer chaque bouton radio à une balise <label>. Une bonne pratique consiste à imbriquer l'<input> directement dans le <label>. De cette manière, l'utilisateur peut cliquer non seulement sur le petit cercle du bouton, mais aussi sur le texte du libellé pour faire sa sélection, ce qui est beaucoup plus pratique, surtout sur les appareils mobiles.

Voici un exemple concret pour un choix de civilité :

<fieldset>
    <legend>Civilité</legend>
    <label>
        <input type="radio" name="civilite" value="madame">
        Madame
    </label>
    <label>
        <input type="radio" name="civilite" value="monsieur" checked>
        Monsieur
    </label>
    <label>
        <input type="radio" name="civilite" value="autre">
        Autre
    </label>
</fieldset>

Résultat :

Civilité Madame Monsieur Autre

Analysons cet exemple :

<input type="radio"> : Définit l'élément comme un bouton radio.
name="civilite" : C'est l'attribut clé. Comme les trois boutons ont le même name, le navigateur sait qu'un seul peut être sélectionné. Si vous choisissez "Madame" puis "Monsieur", le premier choix sera automatiquement désélectionné.
value : Si l'utilisateur sélectionne "Monsieur" et soumet le formulaire, la donnée envoyée au serveur sera civilite=monsieur.
<label> : Envelopper l'<input> et le texte dans un <label> rend toute la zone cliquable.
checked : L'attribut checked (sans valeur) permet de pré-cocher une option par défaut au chargement de la page.

Des choix non exclusifs : les `checkboxes`

Contrairement aux boutons radio, les cases à cocher (ou checkboxes), créées avec <input type="checkbox">, permettent à l'utilisateur de sélectionner zéro, une ou plusieurs options dans une liste. C'est idéal pour des questions comme "Quels sont vos centres d'intérêt ?" où plusieurs réponses sont possibles.

Pour que le serveur puisse recevoir plusieurs valeurs pour un même groupe de cases à cocher, il y a une convention importante à respecter : l'attribut name de chaque case doit se terminer par des crochets []. Cela indique au langage côté serveur (comme PHP) de regrouper les valeurs sélectionnées dans un tableau.

Voici un exemple pour sélectionner des centres d'intérêt :

<fieldset>
    <legend>Quels sont vos centres d'intérêt ?</legend>
    <label>
        <input type="checkbox" name="interets[]" value="voyages">
        Voyages
    </label>
    <label>
        <input type="checkbox" name="interets[]" value="lecture" checked>
        Lecture
    </label>
    <label>
        <input type="checkbox" name="interets[]" value="sport">
        Sport
    </label>
</fieldset>

Résultat :

Quels sont vos centres d'intérêt ? Voyages Lecture Sport

Analysons cet exemple :

<input type="checkbox"> : Définit l'élément comme une case à cocher.
name="interets[]" : Toutes les cases partagent le même nom de base (interets), et les crochets [] indiquent que plusieurs valeurs peuvent être envoyées pour ce nom.
value : Comme pour les boutons radio, cette valeur est prédéfinie par le développeur. Elle sera envoyée si la case est cochée.
<label> : L'utilisation d'un <label> qui englobe l'input et le texte est une bonne pratique pour l'accessibilité et l'ergonomie, rendant toute la zone cliquable.
checked : L'attribut checked permet de pré-cocher une ou plusieurs options par défaut.

Comment les données sont-elles envoyées ?

Lors de la soumission, le navigateur envoie une paire clé/valeur pour chaque case qui a été cochée. Si une case n'est pas cochée, rien n'est envoyé pour celle-ci.

Si l'utilisateur laisse "Lecture" coché et coche également "Sport", le serveur recevra les données suivantes (ici, formatées pour une requête GET) :

interets[]=lecture&interets[]=sport

Le serveur interprétera cela comme un tableau de valeurs pour la clé interets, contenant ["lecture", "sport"]. Si aucune case n'avait été cochée, la clé interets n'existerait tout simplement pas dans les données reçues.

Une liste de choix : les listes déroulantes

Pour offrir un grand nombre d'options de manière compacte, la liste déroulante est l'outil idéal. Elle est créée avec la balise <select>, et chaque option de la liste est définie par une balise <option>. C'est une solution parfaite pour des choix comme un pays, une année de naissance, ou une catégorie de produit.

Par défaut, une liste déroulante ne permet de sélectionner qu'une seule valeur.

Voici un exemple pour choisir un mode de livraison :

<label for="livraison">Mode de livraison</label>
<select id="livraison" name="livraison">
    <option value="domicile">Livraison à domicile</option>
    <option value="relais" selected>Livraison en point relais</option>
    <option value="magasin">Retrait en magasin</option>
</select>

Résultat :

Mode de livraison

Analysons cet exemple :

<select> : C'est le conteneur de la liste déroulante. L'attribut name (livraison ici) est essentiel car il servira de clé pour la donnée envoyée.
<option> : Chaque <option> représente un choix possible dans la liste.
- Le texte visible par l'utilisateur est celui placé entre <option> et </option> (ex: "Livraison à domicile").
- L'attribut value contient la valeur réelle qui sera envoyée au serveur (ex: domicile). Il est crucial de toujours définir cette valeur.
Première option vide : Il est courant d'inclure une première <option> avec un value vide. Elle sert d'instruction (placeholder) et permet de s'assurer que l'utilisateur fait un choix actif.
selected : Cet attribut (sans valeur) permet de présélectionner une option au chargement de la page.

Comment les données sont-elles envoyées ?

Lors de la soumission, le navigateur envoie la valeur de l'attribut value de l'<option> qui est actuellement sélectionnée. La clé est fournie par l'attribut name de la balise <select>.

Si l'utilisateur sélectionne "Retrait en magasin" et soumet le formulaire, le serveur recevra :

livraison=magasin

Boutons : `<input>` vs `<button>`

Pour ajouter des boutons à un formulaire, HTML nous offre deux balises principales : <input> et <button>.

<input type="submit|reset|button"> : C'est la méthode historique. Elle est simple et efficace, mais son contenu est limité à du texte simple, défini par l'attribut value.
<button type="submit|reset|button"> : C'est la balise moderne et plus flexible. Son grand avantage est que vous pouvez placer du contenu HTML complexe à l'intérieur (comme des images, des icônes ou du texte formaté), ce qui offre beaucoup plus de possibilités de design.

En règle générale, préférez la balise <button> pour sa flexibilité, sauf si vous avez une bonne raison d'utiliser <input>.

Il existe trois types de boutons principaux, définis par leur attribut type :

type="submit" : C'est le bouton le plus important. Quand on clique dessus, il déclenche la soumission du formulaire, envoyant toutes les données vers l'URL spécifiée dans l'attribut action de la balise <form>.
type="reset" : Ce bouton réinitialise tous les champs du formulaire à leur valeur initiale (celle qu'ils avaient au chargement de la page). C'est utile pour permettre à l'utilisateur d'effacer ses saisies et de recommencer.
type="button" : Ce bouton est "neutre". Il ne fait rien par défaut. Son but est d'être associé à du code JavaScript pour déclencher des actions personnalisées sans soumettre le formulaire (par exemple, afficher/masquer une section, calculer un total, etc.).

<form action="#" method="get">
  <label for="demo-nom">Nom :</label>
  <input type="text" id="demo-nom" name="nom" value="Texte initial">

  <div>
    <button type="submit">
        <strong>Envoyer</strong> &#128233;
    </button>
    <input type="reset" value="Réinitialiser le champ">
    <button type="button" onclick="alert('Action spéciale !')">
        Bouton d'action
    </button>
  </div>
</form>

Résultat :
_{Des styles ont été appliqués pour le rendu visuel}

Saisissez quelque chose dans le champ "Nom", puis testez les boutons :

Le bouton Envoyer tentera de soumettre le formulaire (vous verrez les données apparaître dans l'URL si l'action est #).
Le bouton Réinitialiser effacera votre saisie et restaurera la valeur initiale du champ ("Texte initial").
Le bouton Action exécutera une simple alerte JavaScript sans recharger la page.

Balise `<fieldset>`

Pour aider l'utilisateur à percevoir la structure d'ensemble des champs d'un formulaire, il est parfois nécessaire de regrouper des sous-ensembles de champs. Dans notre exemple, nous allons regrouper toutes les demandes d'informations des données personnelles du client.

Pour cela, nous allons utiliser la balise <fieldset>. Visuellement, par défaut, cette balise va dessiner un cadre autour des champs qu'elle contient. Il est possible d'afficher l'intitulé du groupement via la balise <legend>

<form action="#" method="post" >

    <fieldset>
        <legend>Votre Coordonnées</legend>
        <label for="nom"> Votre nom : </label>
        <input type="text" name="nom" id="nom" required placeholder="Entrez votre nom" value=""   >

        <label for="nom"> Votre prénom : </label>
        <input type="text" name="prenom" id="prenom" required placeholder="Entrez votre prenom" value=""   >

    </fieldset>
    [...code suivant...]
</form>

Visualisez le résultat.

Un <fieldset> qui regroupe tous les champs est inutile. Si vous désirez un encadrement, utilisez plutôt une bordure sur la balise <form>

En résumé

Testing form

Améliorer les formulaires avec les attributs

Au-delà des types de champs, une série d'attributs universels vous permet d'affiner le comportement de vos formulaires pour guider l'utilisateur, contrôler la saisie et valider les données.

Guider l'utilisateur

placeholder : Cet attribut affiche un texte indicatif dans un champ de saisie (comme Entrez votre nom ici). Ce texte disparaît dès que l'utilisateur commence à taper. C'est un excellent moyen de donner un exemple du format attendu, mais attention, il ne remplace pas un <label>, car il n'est pas accessible de la même manière pour tous les utilisateurs.
- Syntaxe : <input type="text" placeholder="Ex: Jean Dupont">
autofocus : En ajoutant cet attribut à un seul élément du formulaire, vous indiquez au navigateur de placer le curseur directement dans ce champ au chargement de la page. C'est très pratique pour les formulaires de connexion ou de recherche, où l'utilisateur peut commencer à taper sans avoir à cliquer d'abord.
- Syntaxe : <input type="search" autofocus>

Contrôler la saisie et l'état des champs

required : Un des attributs les plus utiles. Il rend un champ obligatoire. Le navigateur empêchera la soumission du formulaire tant que ce champ n'est pas rempli et affichera un message d'erreur.
- Syntaxe : <input type="email" required>
disabled : Cet attribut désactive complètement un champ. Il apparaît grisé, l'utilisateur ne peut pas interagir avec, et surtout, sa valeur n'est pas envoyée au serveur lors de la soumission. On l'utilise souvent pour des champs qui ne deviennent actifs qu'après une autre action (par exemple, cocher une case).
- Syntaxe : <input type="text" disabled>
readonly : Similaire à disabled, cet attribut rend un champ non modifiable. La grande différence est que le champ reste visuellement "normal" et sa valeur est bien envoyée au serveur. C'est parfait pour afficher une information que l'utilisateur ne doit pas changer, comme un numéro de client ou une date de commande.
- Syntaxe : <input type="text" value="Client-123" readonly>

Valider les formats et l'historique

pattern : Pour les champs de texte, cet attribut permet de définir une expression régulière (regex) que la valeur saisie doit respecter. C'est un outil très puissant pour valider des formats complexes côté client, comme un numéro de téléphone, un code postal ou une plaque d'immatriculation.
- Syntaxe (pour un code postal belge à 4 chiffres) : <input type="text" pattern="[0-9]{4}">
autocomplete : Cet attribut contrôle si le navigateur doit suggérer des valeurs précédemment saisies. Par défaut, il est activé (autocomplete="on"), ce qui est souvent pratique. Cependant, pour des raisons de sécurité (champs de mot de passe à usage unique, codes de confirmation), vous pouvez le désactiver.
- Syntaxe pour désactiver : <input type="text" autocomplete="off">

Allez plus loin

Note

Pour des illustrations et explications supplémentaires sur les attributs possibles des champs de formulaires, consultez-les sur W3Schools.com

Balises

Introduction aux formulaires HTML

Balise <form>

Balise <input> : champs texte

Comprendre les méthodes d'envoi : GET et POST

Au niveau serveur

Visualiser les données envoyées

Balise <label>

Balise <textarea>

Champs de Date et d'Heure

Format des données envoyées

Des choix exclusifs: les boutons radio

Des choix non exclusifs : les checkboxes

Comment les données sont-elles envoyées ?

Une liste de choix : les listes déroulantes

Comment les données sont-elles envoyées ?

Boutons : <input> vs <button>

Balise <fieldset>

En résumé

Améliorer les formulaires avec les attributs

Guider l'utilisateur

Contrôler la saisie et l'état des champs

Valider les formats et l'historique

Allez plus loin

Balise `<form>`

Balise `<input>` : champs texte

Balise `<label>`

Balise `<textarea>`

Des choix exclusifs: les boutons `radio`

Des choix non exclusifs : les `checkboxes`

Boutons : `<input>` vs `<button>`

Balise `<fieldset>`