Balise HTMLFormulaires

<input>

Un champ de formulaire : texte, e-mail, mot de passe, nombre, date, curseur, case à cocher, fichier et bien plus encore.

Affichage: inline-block
Balise fermante: Aucune, élément vide
Contenu autorisé: Aucun, l’élément est vide

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Attributs
Attributs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

HTML

<style>
  .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
  .fields label { display: grid; gap: 4px; }
  .fields .inline { display: flex; align-items: center; gap: 6px; }
  .fields fieldset { border: 0; margin: 0; padding: 0; }
  .fields legend { padding: 0; margin-bottom: 4px; }
</style>
<form class="fields">
  <label>Prénom <input type="text" name="name" placeholder="par ex. Léa"></label>
  <label>E-mail <input type="email" name="email" placeholder="lea@example.com"></label>
  <label>Mot de passe <input type="password" name="password"></label>
  <label>Âge <input type="number" name="age" min="7" max="99" value="16"></label>
  <label>Minutes d’étude par jour <input type="range" name="minutes" min="10" max="120" step="10" value="30"></label>
  <label>Début du cours <input type="date" name="start"></label>
  <label>Couleur du thème <input type="color" name="accent" value="#8b5cf6"></label>
  <label>Rechercher un cours <input type="search" name="q" placeholder="HTML, CSS…"></label>
  <label>Photo de profil <input type="file" name="avatar" accept="image/*"></label>
  <label class="inline"><input type="checkbox" name="newsletter" checked> Je veux recevoir la newsletter</label>
  <fieldset>
    <legend>Niveau</legend>
    <label class="inline"><input type="radio" name="level" value="beginner" checked> Débutant</label>
    <label class="inline"><input type="radio" name="level" value="advanced"> Avancé</label>
  </fieldset>
</form>

Aperçu

Définition et utilisation

L’élément <input> est l’élément de formulaire le plus polyvalent qui existe. Son apparence et son comportement dépendent de l’attribut type : le même <input> peut être un champ de texte, un champ de mot de passe, un curseur, un sélecteur de couleur, une case à cocher ou un bouton pour envoyer des fichiers. C’est un élément vide, il n’a donc pas de balise fermante.

Choisir le bon type est un vrai confort. Sur un téléphone, type="email" affiche un clavier avec le symbole @, type="tel" un clavier numérique, et type="date" un calendrier natif. Le navigateur vérifie aussi le format tout seul : un champ e-mail ne laissera pas passer une adresse sans @, et un champ numérique rejettera une valeur hors de la plage min et max.

Chaque champ a besoin d’une étiquette <label>, car le texte de l’attribut placeholder disparaît dès que vous commencez à écrire, et il ne remplace pas une étiquette. Pour que la valeur d’un champ arrive au serveur, le champ doit avoir un attribut name.

Syntaxe

<input type="text" name="nom">

Attributs

type
text | email | password | number | range | date | time | datetime-local | month | week | color | checkbox | radio | file | search | tel | url | hidden | submit | reset | button | image
Le genre de champ, text par défaut. Le type détermine l’apparence, le clavier affiché sur un téléphone et les règles de validation. Un champ hidden est invisible et conserve une valeur envoyée avec le formulaire. Un type que le navigateur ne prend pas en charge se transforme en simple champ de texte. C’est le cas par exemple de month et week, qui ne fonctionnent pas dans tous les navigateurs.
name
texte
Le nom sous lequel la valeur du champ arrive au serveur, par exemple email=lea@example.com. Les champs sans name ne sont pas envoyés. Des boutons radio portant le même nom forment un groupe dans lequel on ne peut sélectionner qu’une seule option.
value
texte
La valeur initiale du champ. Dans les champs de texte, c’est le texte saisi au départ ; dans les cases à cocher et les boutons radio, la valeur envoyée une fois sélectionnée ; et dans les boutons submit et button, le texte affiché sur le bouton.
placeholder
texte
Une indication visible dans un champ vide, idéalement un exemple du format attendu. Elle disparaît dès que l’utilisateur commence à écrire, donc elle ne remplace jamais une étiquette <label>.
required
attribut booléen
Le champ doit être rempli, ou la case cochée, avant que le formulaire puisse s’envoyer. Si vous essayez d’envoyer un champ vide, le navigateur affiche un message et y place le curseur. Un champ qui respecte les règles correspond au sélecteur :valid, et un champ invalide à :invalid.
disabled
attribut booléen
Désactive le champ : impossible de cliquer dessus, de l’atteindre avec la touche Tab ou de le modifier, et sa valeur ne sera pas envoyée avec le formulaire. Le navigateur grise généralement un champ ainsi désactivé.
readonly
attribut booléen
Un champ en lecture seule : vous pouvez le sélectionner, en copier le texte et l’atteindre avec la touche Tab, mais vous ne pouvez pas changer sa valeur. Contrairement à disabled, la valeur sera envoyée. Cela fonctionne pour les champs de texte, de nombre et de date, mais pas pour les cases à cocher, les boutons radio, les curseurs ni les champs de couleur.
checked
attribut booléen
Sélectionne une case à cocher (checkbox) ou un bouton radio (radio) au départ. Dans un groupe de boutons radio portant le même nom, un seul au maximum devrait avoir checked.
min / max / step
nombre, date ou heure
Déterminent la plage et le pas des valeurs dans les champs number, range, date, time et apparentés. step="50" permet de choisir uniquement des valeurs par pas de 50 (0, 50, 100 et ainsi de suite), et step="any" supprime la contrainte de pas. Les flèches et le curseur respectent ces limites, et une valeur hors de la plage échoue à la validation.
minlength / maxlength
nombre de caractères
Le plus petit et le plus grand nombre de caractères autorisés dans un champ de texte. maxlength empêche simplement d’en saisir davantage, tandis que minlength est vérifié lors de l’envoi du formulaire. Un champ vide sans required passe cette validation.
pattern
expression régulière
Un motif auquel toute la valeur du champ doit correspondre, par exemple un code postal au format 00000. Le navigateur compare le motif à tout le texte, vous n’avez donc pas besoin d’ajouter ^ et $. Placez la description du format attendu près du champ ou dans l’attribut title, que certains navigateurs ajoutent au message d’erreur.
multiple
attribut booléen
Permet de donner plusieurs valeurs à la fois : dans un champ file, choisir plusieurs fichiers, et dans un champ email, saisir plusieurs adresses séparées par des virgules.
accept
types MIME ou extensions de fichiers
Indique à la fenêtre de sélection de fichiers quoi afficher, par exemple image/* (n’importe quelle image), .pdf ou image/png, image/jpeg. Ce n’est qu’un filtre dans la boîte de dialogue, que l’utilisateur peut contourner, donc vérifiez quand même le type de fichier sur le serveur.
list
id d’un élément `<datalist>`
Relie le champ à une liste de suggestions <datalist>. L’utilisateur voit des propositions pendant qu’il écrit, mais peut toujours saisir sa propre valeur.
autocomplete
on | off | nom de la donnée, par ex. email, username, current-password, new-password, one-time-code
Indique au navigateur et au gestionnaire de mots de passe quel type de donnée correspond au champ. Avec current-password, le gestionnaire suggère le mot de passe enregistré ; avec new-password, il propose d’en générer un robuste ; et one-time-code permet de coller un code reçu par SMS en un seul geste. Dans un formulaire de connexion, marquez le champ de l’identifiant comme username, même si c’est un e-mail qu’on y saisit.
autofocus
attribut booléen
Place le curseur dans le champ dès le chargement de la page. Utilisez-le avec parcimonie, au plus une fois par page, et seulement là où le champ est la raison principale de la visite, comme un champ de recherche. Un saut de focus soudain désoriente les utilisateurs de lecteurs d’écran.

Attribut	Valeurs	Description
type	text \| email \| password \| number \| range \| date \| time \| datetime-local \| month \| week \| color \| checkbox \| radio \| file \| search \| tel \| url \| hidden \| submit \| reset \| button \| image	Le genre de champ, `text` par défaut. Le type détermine l’apparence, le clavier affiché sur un téléphone et les règles de validation. Un champ `hidden` est invisible et conserve une valeur envoyée avec le formulaire. Un type que le navigateur ne prend pas en charge se transforme en simple champ de texte. C’est le cas par exemple de `month` et `week`, qui ne fonctionnent pas dans tous les navigateurs.
name	texte	Le nom sous lequel la valeur du champ arrive au serveur, par exemple `email=lea@example.com`. Les champs sans `name` ne sont pas envoyés. Des boutons radio portant le même nom forment un groupe dans lequel on ne peut sélectionner qu’une seule option.
value	texte	La valeur initiale du champ. Dans les champs de texte, c’est le texte saisi au départ ; dans les cases à cocher et les boutons radio, la valeur envoyée une fois sélectionnée ; et dans les boutons `submit` et `button`, le texte affiché sur le bouton.
placeholder	texte	Une indication visible dans un champ vide, idéalement un exemple du format attendu. Elle disparaît dès que l’utilisateur commence à écrire, donc elle ne remplace jamais une étiquette `<label>`.
required	attribut booléen	Le champ doit être rempli, ou la case cochée, avant que le formulaire puisse s’envoyer. Si vous essayez d’envoyer un champ vide, le navigateur affiche un message et y place le curseur. Un champ qui respecte les règles correspond au sélecteur `:valid`, et un champ invalide à `:invalid`.
disabled	attribut booléen	Désactive le champ : impossible de cliquer dessus, de l’atteindre avec la touche Tab ou de le modifier, et sa valeur ne sera pas envoyée avec le formulaire. Le navigateur grise généralement un champ ainsi désactivé.
readonly	attribut booléen	Un champ en lecture seule : vous pouvez le sélectionner, en copier le texte et l’atteindre avec la touche Tab, mais vous ne pouvez pas changer sa valeur. Contrairement à `disabled`, la valeur sera envoyée. Cela fonctionne pour les champs de texte, de nombre et de date, mais pas pour les cases à cocher, les boutons radio, les curseurs ni les champs de couleur.
checked	attribut booléen	Sélectionne une case à cocher (`checkbox`) ou un bouton radio (`radio`) au départ. Dans un groupe de boutons radio portant le même nom, un seul au maximum devrait avoir `checked`.
min / max / step	nombre, date ou heure	Déterminent la plage et le pas des valeurs dans les champs `number`, `range`, `date`, `time` et apparentés. `step="50"` permet de choisir uniquement des valeurs par pas de 50 (0, 50, 100 et ainsi de suite), et `step="any"` supprime la contrainte de pas. Les flèches et le curseur respectent ces limites, et une valeur hors de la plage échoue à la validation.
minlength / maxlength	nombre de caractères	Le plus petit et le plus grand nombre de caractères autorisés dans un champ de texte. `maxlength` empêche simplement d’en saisir davantage, tandis que `minlength` est vérifié lors de l’envoi du formulaire. Un champ vide sans `required` passe cette validation.
pattern	expression régulière	Un motif auquel toute la valeur du champ doit correspondre, par exemple un code postal au format `00000`. Le navigateur compare le motif à tout le texte, vous n’avez donc pas besoin d’ajouter `^` et `$`. Placez la description du format attendu près du champ ou dans l’attribut `title`, que certains navigateurs ajoutent au message d’erreur.
multiple	attribut booléen	Permet de donner plusieurs valeurs à la fois : dans un champ `file`, choisir plusieurs fichiers, et dans un champ `email`, saisir plusieurs adresses séparées par des virgules.
accept	types MIME ou extensions de fichiers	Indique à la fenêtre de sélection de fichiers quoi afficher, par exemple `image/*` (n’importe quelle image), `.pdf` ou `image/png, image/jpeg`. Ce n’est qu’un filtre dans la boîte de dialogue, que l’utilisateur peut contourner, donc vérifiez quand même le type de fichier sur le serveur.
list	id d’un élément `<datalist>`	Relie le champ à une liste de suggestions `<datalist>`. L’utilisateur voit des propositions pendant qu’il écrit, mais peut toujours saisir sa propre valeur.
autocomplete	on \| off \| nom de la donnée, par ex. email, username, current-password, new-password, one-time-code	Indique au navigateur et au gestionnaire de mots de passe quel type de donnée correspond au champ. Avec `current-password`, le gestionnaire suggère le mot de passe enregistré ; avec `new-password`, il propose d’en générer un robuste ; et `one-time-code` permet de coller un code reçu par SMS en un seul geste. Dans un formulaire de connexion, marquez le champ de l’identifiant comme `username`, même si c’est un e-mail qu’on y saisit.
autofocus	attribut booléen	Place le curseur dans le champ dès le chargement de la page. Utilisez-le avec parcimonie, au plus une fois par page, et seulement là où le champ est la raison principale de la visite, comme un champ de recherche. Un saut de focus soudain désoriente les utilisateurs de lecteurs d’écran.

L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.

Attributs en pratique

type

Le genre de champ, text par défaut. Le type détermine l’apparence, le clavier affiché sur un téléphone et les règles de validation. Un champ hidden est invisible et conserve une valeur envoyée avec le formulaire. Un type que le navigateur ne prend pas en charge se transforme en simple champ de texte. C’est le cas par exemple de month et week, qui ne fonctionnent pas dans tous les navigateurs.

HTML

<form>
  <p><label>Téléphone <input type="tel" name="phone" placeholder="06 00 10 02 00"></label></p>
  <p><label>Site web <input type="url" name="website" placeholder="https://"></label></p>
  <p><label>Heure du cours <input type="time" name="time" value="18:30"></label></p>
  <p><label>Date limite <input type="datetime-local" name="deadline"></label></p>
  <p><label>Mois de début <input type="month" name="month"></label></p>
  <input type="hidden" name="course" value="html-101">
  <p>
    <input type="submit" value="Envoyer">
    <input type="reset" value="Effacer">
    <input type="button" value="Aperçu">
  </p>
</form>

Aperçu

name

texte

Le nom sous lequel la valeur du champ arrive au serveur, par exemple email=lea@example.com. Les champs sans name ne sont pas envoyés. Des boutons radio portant le même nom forment un groupe dans lequel on ne peut sélectionner qu’une seule option.

HTML

<p>Comment voulez-vous apprendre ?</p>
<label><input type="radio" name="mode" value="video"> Vidéo</label>
<label><input type="radio" name="mode" value="text"> Texte</label>
<label><input type="radio" name="mode" value="practice"> Exercices</label>

Aperçu

value

texte

La valeur initiale du champ. Dans les champs de texte, c’est le texte saisi au départ ; dans les cases à cocher et les boutons radio, la valeur envoyée une fois sélectionnée ; et dans les boutons submit et button, le texte affiché sur le bouton.

HTML

<p><label>Nom d’utilisateur <input type="text" name="username" value="lea_code"></label></p>
<p><label><input type="checkbox" name="topics" value="css" checked> CSS</label></p>
<input type="submit" value="Enregistrer les modifications">

Aperçu

placeholder

texte

Une indication visible dans un champ vide, idéalement un exemple du format attendu. Elle disparaît dès que l’utilisateur commence à écrire, donc elle ne remplace jamais une étiquette <label>.

HTML

<label for="phone">Téléphone</label>
<input type="tel" id="phone" name="phone" placeholder="par ex. 06 00 10 02 00">

Aperçu

required

attribut booléen

Le champ doit être rempli, ou la case cochée, avant que le formulaire puisse s’envoyer. Si vous essayez d’envoyer un champ vide, le navigateur affiche un message et y place le curseur. Un champ qui respecte les règles correspond au sélecteur :valid, et un champ invalide à :invalid.

HTML

<form>
  <label>E-mail <input type="email" name="email" required></label>
  <button>Envoyer</button>
</form>

Aperçu

disabled

attribut booléen

Désactive le champ : impossible de cliquer dessus, de l’atteindre avec la touche Tab ou de le modifier, et sa valeur ne sera pas envoyée avec le formulaire. Le navigateur grise généralement un champ ainsi désactivé.

HTML

<p><label>Code promo <input type="text" name="promo" value="AUTOMNE2026" disabled></label></p>
<p><label><input type="checkbox" name="certificate" disabled> Certificat (après la fin du cours)</label></p>

Aperçu

readonly

attribut booléen

Un champ en lecture seule : vous pouvez le sélectionner, en copier le texte et l’atteindre avec la touche Tab, mais vous ne pouvez pas changer sa valeur. Contrairement à disabled, la valeur sera envoyée. Cela fonctionne pour les champs de texte, de nombre et de date, mais pas pour les cases à cocher, les boutons radio, les curseurs ni les champs de couleur.

HTML

<label>Votre lien de parrainage
  <input type="url" name="referral" value="https://www.codeworlds.com/?ref=lea" size="34" readonly>
</label>

Aperçu

checked

attribut booléen

Sélectionne une case à cocher (checkbox) ou un bouton radio (radio) au départ. Dans un groupe de boutons radio portant le même nom, un seul au maximum devrait avoir checked.

HTML

<p><label><input type="checkbox" name="reminders" checked> Rappels d’étude</label></p>
<p>
  <label><input type="radio" name="plan" value="monthly"> Mensuel</label>
  <label><input type="radio" name="plan" value="yearly" checked> Annuel</label>
</p>

Aperçu

min / max / step

nombre, date ou heure

Déterminent la plage et le pas des valeurs dans les champs number, range, date, time et apparentés. step="50" permet de choisir uniquement des valeurs par pas de 50 (0, 50, 100 et ainsi de suite), et step="any" supprime la contrainte de pas. Les flèches et le curseur respectent ces limites, et une valeur hors de la plage échoue à la validation.

HTML

<p><label>Nombre de participants <input type="number" name="seats" min="1" max="10" value="1"></label></p>
<p><label>Budget en € <input type="range" name="budget" min="0" max="500" step="50" value="150"></label></p>
<p><label>Date limite <input type="date" name="date" min="2026-10-01" max="2026-12-31"></label></p>

Aperçu

minlength / maxlength

nombre de caractères

Le plus petit et le plus grand nombre de caractères autorisés dans un champ de texte. maxlength empêche simplement d’en saisir davantage, tandis que minlength est vérifié lors de l’envoi du formulaire. Un champ vide sans required passe cette validation.

HTML

<form>
  <label>Nom d’utilisateur
    <input type="text" name="username" minlength="3" maxlength="16" required>
  </label>
  <button>Créer un compte</button>
</form>

Aperçu

pattern

expression régulière

Un motif auquel toute la valeur du champ doit correspondre, par exemple un code postal au format 00000. Le navigateur compare le motif à tout le texte, vous n’avez donc pas besoin d’ajouter ^ et $. Placez la description du format attendu près du champ ou dans l’attribut title, que certains navigateurs ajoutent au message d’erreur.

HTML

<form>
  <label>Code postal
    <input type="text" name="postal" pattern="[0-9]{5}" placeholder="00000" title="Cinq chiffres">
  </label>
  <button>Vérifier</button>
</form>

Aperçu

multiple

attribut booléen

Permet de donner plusieurs valeurs à la fois : dans un champ file, choisir plusieurs fichiers, et dans un champ email, saisir plusieurs adresses séparées par des virgules.

HTML

<p><label>Captures d’écran du projet <input type="file" name="screens" accept="image/*" multiple></label></p>
<p><label>Inviter des amis <input type="email" name="friends" size="34" placeholder="emma@example.com, hugo@example.com" multiple></label></p>

Aperçu

accept

types MIME ou extensions de fichiers

Indique à la fenêtre de sélection de fichiers quoi afficher, par exemple image/* (n’importe quelle image), .pdf ou image/png, image/jpeg. Ce n’est qu’un filtre dans la boîte de dialogue, que l’utilisateur peut contourner, donc vérifiez quand même le type de fichier sur le serveur.

HTML

<p><label>Avatar (PNG ou JPG) <input type="file" name="avatar" accept="image/png, image/jpeg"></label></p>
<p><label>CV en PDF <input type="file" name="cv" accept=".pdf,application/pdf"></label></p>

Aperçu

list

id d’un élément `<datalist>`

Relie le champ à une liste de suggestions <datalist>. L’utilisateur voit des propositions pendant qu’il écrit, mais peut toujours saisir sa propre valeur.

HTML

<label>Langage préféré
  <input type="text" name="language" list="languages">
</label>
<datalist id="languages">
  <option value="JavaScript">
  <option value="Python">
  <option value="TypeScript">
  <option value="Go">
</datalist>

Aperçu

autocomplete

on | off | nom de la donnée, par ex. email, username, current-password, new-password, one-time-code

Indique au navigateur et au gestionnaire de mots de passe quel type de donnée correspond au champ. Avec current-password, le gestionnaire suggère le mot de passe enregistré ; avec new-password, il propose d’en générer un robuste ; et one-time-code permet de coller un code reçu par SMS en un seul geste. Dans un formulaire de connexion, marquez le champ de l’identifiant comme username, même si c’est un e-mail qu’on y saisit.

HTML

<form>
  <p><label>E-mail <input type="email" name="email" autocomplete="username"></label></p>
  <p><label>Mot de passe <input type="password" name="password" autocomplete="current-password"></label></p>
  <p><label>Code reçu par SMS <input type="text" name="code" inputmode="numeric" autocomplete="one-time-code"></label></p>
</form>

Aperçu

autofocus

attribut booléen

Place le curseur dans le champ dès le chargement de la page. Utilisez-le avec parcimonie, au plus une fois par page, et seulement là où le champ est la raison principale de la visite, comme un champ de recherche. Un saut de focus soudain désoriente les utilisateurs de lecteurs d’écran.

HTML

<label>Rechercher une leçon <input type="search" name="q" autofocus></label>

Aperçu

Dans un aperçu intégré dans une iframe, le navigateur peut ignorer autofocus.

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Associez chaque champ à une étiquette : enveloppez-le dans <label>, ou donnez un id au champ et indiquez-le dans <label for="…">. Cliquer sur l’étiquette placera alors le curseur dans le champ.
N’utilisez pas type="number" pour les numéros de téléphone, les codes postaux ou les numéros de carte. Ce type ajoute des flèches pour augmenter la valeur et sert pour des nombres sur lesquels on calcule, pas pour des suites de chiffres. Choisissez type="tel" ou type="text" avec inputmode="numeric".
La validation du navigateur (required, pattern, min) aide l’utilisateur, mais ne protège pas le serveur. Vérifiez toujours aussi les données côté serveur.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez HTML dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours