Apprendre Exploration des Différents Types de Champs de Saisie en HTML

HTML propose de nombreux types de balises <input> permettant de recueillir différents types de données utilisateur. Ci-dessous, un aperçu des types les plus courants.

Email et mot de passe

type="email" : accepte les adresses e-mail et effectue une validation de base par le navigateur ;
type="password" : masque les caractères saisis pour des raisons de sécurité et peut utiliser les attributs minlength et maxlength.

index.html

Nombre

type="number" : accepte des valeurs numériques. Utiliser min, max et step pour contrôler l’intervalle autorisé.

index.html

Téléphone

type="tel" : pour les numéros de téléphone. Aucune validation intégrée. La validation est effectuée manuellement par les développeurs.

index.html

Case à cocher

type="checkbox" : permet de sélectionner plusieurs options. Utiliser checked pour présélectionner.

index.html

Radio

type="radio" : sélection d'une seule option parmi un groupe. Tous les boutons radio doivent partager le même name.

index.html

Curseur de plage

type="range" : contrôle de curseur pour sélectionner une valeur numérique dans une plage. La logique JavaScript est omise dans ce cours.

index.html

index.js

Note

La logique JavaScript est omise dans ce cours.

Date et heure

type="date" : sélecteur de calendrier ;
type="time" : sélecteur d'heure ;
type="datetime-local" : combine les champs de date et d'heure.

index.html

Remarque

Pour une apparence cohérente, les développeurs utilisent souvent des bibliothèques d'interface utilisateur prêtes à l'emploi au lieu des sélecteurs par défaut du navigateur.

Approfondir

Vous avez peut-être remarqué que lorsque vous essayez de remplir certains champs, le navigateur peut déjà suggérer des options de saisie automatique. Le navigateur mémorise les valeurs que vous avez saisies dans les champs et vous les propose ensuite pour l'auto-complétion.

Tout était clair ?

Merci pour vos commentaires !

Section 5. Chapitre 5

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you give examples of how to use each input type in HTML?

What are some best practices for validating user input with these types?

How do I style these input types with CSS?

Glissez pour afficher le menu

HTML propose de nombreux types de balises <input> permettant de recueillir différents types de données utilisateur. Ci-dessous, un aperçu des types les plus courants.

Email et mot de passe

type="email" : accepte les adresses e-mail et effectue une validation de base par le navigateur ;
type="password" : masque les caractères saisis pour des raisons de sécurité et peut utiliser les attributs minlength et maxlength.

index.html

Nombre

type="number" : accepte des valeurs numériques. Utiliser min, max et step pour contrôler l’intervalle autorisé.

index.html

Téléphone

type="tel" : pour les numéros de téléphone. Aucune validation intégrée. La validation est effectuée manuellement par les développeurs.

index.html

Case à cocher

type="checkbox" : permet de sélectionner plusieurs options. Utiliser checked pour présélectionner.

index.html

Radio

type="radio" : sélection d'une seule option parmi un groupe. Tous les boutons radio doivent partager le même name.

index.html

Curseur de plage

type="range" : contrôle de curseur pour sélectionner une valeur numérique dans une plage. La logique JavaScript est omise dans ce cours.

index.html

index.js

Note

La logique JavaScript est omise dans ce cours.

Date et heure

type="date" : sélecteur de calendrier ;
type="time" : sélecteur d'heure ;
type="datetime-local" : combine les champs de date et d'heure.

index.html

Remarque

Pour une apparence cohérente, les développeurs utilisent souvent des bibliothèques d'interface utilisateur prêtes à l'emploi au lieu des sélecteurs par défaut du navigateur.

Approfondir

Tout était clair ?

Merci pour vos commentaires !

Section 5. Chapitre 5