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 lui.

Types d'Input

Saisie de texte

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

<input type="text" />

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

<input type="password" />

Saisie d'email

Utilisé pour collecter des adresses e-mail auprès des utilisateurs. Effectue une validation côté client pour s'assurer que la valeur saisie est valide au format e-mail.

<input type="email" />

Entrée Téléphonique

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

<input type="tel" />

Entrée Numérique

Utilisé pour collecter des données numériques auprès des utilisateurs. Fournit un clavier numérique sur les appareils mobiles pour une saisie facile.

<input type="number" />

Case à Cocher

Permet aux utilisateurs de sélectionner une ou plusieurs options parmi une liste de choix. Convient pour les scénarios où plusieurs sélections sont autorisées, comme sélectionner plusieurs éléments d'une liste ou accepter des termes et conditions.

<input type="checkbox" />

Bouton Radio

Permet aux utilisateurs de sélectionner une option parmi une liste de choix mutuellement exclusifs. Convient aux scénarios où une seule option doit être sélectionnée, comme la sélection du sexe ou le choix d'un mode de paiement.

<input type="radio" />

Entrée de Fichier

Permet aux utilisateurs de télécharger 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 lors de l'attachement de documents ou d'images.

<input type="file" />

Entrée de Date, Entrée de Temps, et Entrée DateHeure

Permet aux utilisateurs de saisir des dates, des heures ou les deux. Fournit des interfaces conviviales pour sélectionner des dates et des heures. Utile pour capturer les dates de naissance, les heures de rendez-vous ou les horaires d'événements.

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

Exemple : Entrez quelque chose dans les champs, et ils vous proposeront diverses options. Ne vous inquiétez pas ; 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.

Étiquettes

Les étiquettes (<label>) sont essentielles pour lier les étiquettes de texte aux éléments de saisie de formulaire, améliorant 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:, elle se concentre automatiquement sur le champ de saisie correspondant ;
• L'étiquette label et l'élément input sont liés ensemble en utilisant les attributs for et id, respectivement ;
• Les attributs for et id ont la même valeur (username).

Facilitons le remplissage du formulaire en ajoutant des étiquettes aux champs de saisie de l'exemple précédent.
Exemple:

Tutoriel Vidéo