Comme nous l'avons vu précédemment, l'élément le plus puissant d'un formulaire est l'input. Cet élément attend des données de l'utilisateur. Concentrons-nous sur celui-ci.

Types d'input

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é. Garantit la confidentialité en cachant les caractères saisis.

<input type="password" />

Champ d’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 saisie pour téléphone

Utilisé pour la collecte de numéros de téléphone auprès des utilisateurs. Permet la saisie de numéros dans divers formats, y compris les numéros internationaux.

<input type="tel" />

Champ de saisie numérique

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

<input type="number" />

Case à cocher

Permet aux utilisateurs de sélectionner une ou plusieurs options dans 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. Offre des interfaces conviviales pour sélectionner des dates et des heures. Utile pour recueillir des dates de naissance, des horaires de rendez-vous ou des plannings d'événements.

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

Exemple : Saisir une valeur dans les champs pour obtenir différentes suggestions. Aucune donnée ne sera collectée.

Il est possible que vous ayez remarqué que remplir le formulaire n'est pas très pratique lorsque l'on ne comprend pas ce qui est demandé dans chaque champ. C'est pourquoi les libellés sont là pour nous aider.

Étiquettes

Les étiquettes (<label>) sont essentielles pour associer des textes descriptifs aux éléments de saisie de formulaire, améliorant ainsi l’accessibilité et la convivialité. Il est crucial que l’attribut for de la balise <label> corresponde à l’attribut id de l’élément input associé.
Exemple :

<label for="username">Username:</label>
<input type="text" id="username" />

Dans l’exemple ci-dessus :

• Lorsque vous cliquez sur l’étiquette Username:, le champ de saisie correspondant reçoit automatiquement le focus ;
• L’élément label et l’élément input sont reliés grâce aux attributs for et id respectivement ;
• Les attributs for et id ont la même valeur (username).

Faciliter la saisie dans le formulaire en ajoutant des étiquettes aux champs de saisie de l’exemple précédent.
Exemple :

Tutoriel vidéo