Types d'Entrée

HTML fournit divers éléments <input> qui vous permettent de capturer différents types de données des utilisateurs. Explorons quelques types d'entrée couramment utilisés :

email et mot de passe

• type="email": utilisé pour les champs de saisie d'email qui nécessitent une adresse email valide. Le navigateur valide automatiquement l'adresse email, invitant l'utilisateur à corriger les entrées invalides ;
• type="password": utilisé pour les champs de mot de passe où le texte saisi est masqué pour des raisons de sécurité. Vous pouvez également spécifier les attributs minLength et maxLength pour définir les exigences de longueur du mot de passe.

number

type="number": utilisé pour les entrées numériques. Vous pouvez définir une plage spécifique avec les attributs min et max et définir une valeur de pas spécifique avec l'attribut step.

telephone

type="tel": destiné à la saisie de numéros de téléphone, mais il ne réalise aucune validation de l'entrée. Il appartient au développeur de valider l'entrée et de s'assurer qu'il s'agit d'un numéro de téléphone valide.

case à cocher

type="checkbox": permet à l'utilisateur de sélectionner une ou plusieurs options parmi des choix prédéfinis. L'attribut checked rend une case à cocher cochée par défaut.

radio

type="radio": crée un ensemble d'options où une seule option peut être sélectionnée. Un bouton radio représente chaque option, et en choisir un désélectionne automatiquement les autres. Chaque bouton radio doit avoir un attribut value unique pour l'identifier.

range

type="range": crée un contrôle de curseur qui permet aux utilisateurs de sélectionner une valeur dans une plage spécifique. Vous pouvez appliquer les attributs min, max, step, et value pour définir son comportement.

Remarque

JavaScript n'est pas l'objectif de ce cours, donc la logique derrière sera ignorée.

date et heure

• type="date": permet aux utilisateurs de sélectionner une date à partir d'un calendrier popup;
• type="time": permet aux utilisateurs de saisir une heure au format 24 heures;
• type="datetime-local": combine les entrées de temps et de date.

Exemple:

Remarque

Pour un style cohérent sur différents appareils, des solutions prêtes à l'emploi sont souvent utilisées pour les calendriers contextuels et les entrées de temps.