Les champs de saisie de formulaire constituent le principal moyen pour les utilisateurs de fournir des informations. HTML propose de nombreux types de champs selon les données requises.

Types de champs courants

Champ de texte

Conçu pour la saisie de données textuelles courtes, telles que les noms d'utilisateur, adresses e-mail ou messages brefs.

<input type="text" />

Champ de mot de passe

Utilisé pour la saisie de mots de passe, où les caractères sont masqués pour des raisons de sécurité.

<input type="password" />

Champ d'adresse e-mail

Utilisé pour collecter les adresses e-mail des utilisateurs. Effectue une validation côté client afin de garantir que la valeur saisie respecte le format d'une adresse e-mail.

<input type="email" />

Champ de numéro de téléphone

Utilisé pour collecter les numéros de téléphone des utilisateurs.

<input type="tel" />

Champ numérique

Utilisé pour la collecte de données numériques auprès des utilisateurs. Affiche un clavier numérique sur les appareils mobiles.

<input type="number" />

Case à cocher

Permet aux utilisateurs de sélectionner une ou plusieurs options parmi une liste de choix. Adapté aux situations où plusieurs sélections sont autorisées, comme la sélection de plusieurs éléments dans une liste ou l'acceptation de conditions générales.

<input type="checkbox" />

Bouton radio

Permet aux utilisateurs de sélectionner une option parmi une liste de choix mutuellement exclusifs. Adapté aux situations où une seule option doit être sélectionnée, comme la sélection du genre ou le choix d'une méthode de paiement.

<input type="radio" />

Champ de fichier

Permet aux utilisateurs de téléverser des fichiers depuis leur appareil, de choisir depuis leur système de fichiers local et de les soumettre avec les données du formulaire. Cette fonctionnalité est particulièrement utile pour joindre des documents ou des images.

<input type="file" />

Champ de date, champ d'heure et champ DateTime

Permet aux utilisateurs de saisir des dates, des heures ou les deux. Fournit des interfaces conviviales pour sélectionner des dates et des heures.

<input type="date" />
<input type="time" />
<input type="datetime-local" />

Saisissez quelque chose dans les champs, et diverses options seront suggérées. Soyez assuré, aucune donnée ne sera collectée.

Vous avez peut-être remarqué qu'il n'est pas très pratique de remplir le formulaire lorsque vous ne comprenez pas ce qui est demandé dans chaque champ. C'est pourquoi les étiquettes viennent à notre secours.