Summary  
This chapter explores various HTML input types and their attributes for collecting and validating user data, including email, password, numeric ranges, telephone numbers, selection controls, and date/time pickers.

General domain of usage  
Web form development

HTML propose de nombreux types de balises `<input>` permettant de collecter différents types de données utilisateur. Voici un aperçu des 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 la sécurité et peut utiliser `minlength` et `maxlength`.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPCEtLSBFbWFpbCBpbnB1dCAtLT4KICA8bGFiZWwgZm9yPSJtYWlsIj5FbWFpbDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9ImVtYWlsIiBpZD0ibWFpbCIgLz4KICAKICA8IS0tIFBhc3N3b3JkIGlucHV0IC0tPgogIDxsYWJlbCBmb3I9InBhc3N3b3JkIj5QYXNzd29yZDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InBhc3N3b3JkIiBpZD0icGFzc3dvcmQiIC8+CiAgCiAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlN1Ym1pdDwvYnV0dG9uPgo8L2Zvcm0+

## Nombre
`type="number"` : accepte les valeurs numériques. Utiliser `min`, `max` et `step` pour contrôler la plage autorisée.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0ieWVhciI+WWVhciBvZiBiaXJ0aDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9Im51bWJlciIgbWluPSIxOTAwIiBtYXg9IjIwMjMiIGlkPSJ5ZWFyIiAvPgoKICA8bGFiZWwgZm9yPSJoZWlnaHQiPkhlaWdodCB3aXRoIDAuMSBzdGVwPC9sYWJlbD4KICA8aW5wdXQgdHlwZT0ibnVtYmVyIiBpZD0iaGVpZ2h0IiBzdGVwPSIwLjEiIG1pbj0iMC4xIiBtYXg9IjEwLjAiIC8+CgogIDxidXR0b24gdHlwZT0ic3VibWl0Ij5TdWJtaXQ8L2J1dHRvbj4KPC9mb3JtPg==

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

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0icGhvbmUiPlBob25lIG51bWJlcjo8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJ0ZWwiIGlkPSJwaG9uZSIgLz4KCiAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlN1Ym1pdDwvYnV0dG9uPgo8L2Zvcm0+

## Case à cocher
`type="checkbox"` : permet de sélectionner plusieurs options. Utiliser `checked` pour présélectionner.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPHA+V2hhdCBpcyB5b3VyIGZhdm9yaXRlIHNlYXNvbj88L3A+CiAgPGxhYmVsPgogICAgV2ludGVyCiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9IndpbnRlciIgdmFsdWU9IndpbnRlciIgY2hlY2tlZCAvPgogIDwvbGFiZWw+CiAgPGxhYmVsPgogICAgU3ByaW5nCiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9InNwcmluZyIgdmFsdWU9InNwcmluZyIgLz4KICA8L2xhYmVsPgogIDxsYWJlbD4KICAgIFN1bW1lcgogICAgPGlucHV0IHR5cGU9ImNoZWNrYm94IiBuYW1lPSJzdW1tZXIiIHZhbHVlPSJzdW1tZXIiIC8+CiAgPC9sYWJlbD4KICA8bGFiZWw+CiAgICBGYWxsCiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9ImZhbGwiIHZhbHVlPSJmYWxsIiAvPgogIDwvbGFiZWw+CjwvZm9ybT4=

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

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPHA+V2hhdCBpcyB5b3VyIGZhdm9yaXRlIGZvb2Q/PC9wPgogIDxsYWJlbD4KICAgIDxpbnB1dCB0eXBlPSJyYWRpbyIgbmFtZT0iZGlzaCIgdmFsdWU9InBhc3RhIiBjaGVja2VkIC8+CiAgICBQYXN0YQogIDwvbGFiZWw+CiAgPGxhYmVsPgogICAgPGlucHV0IHR5cGU9InJhZGlvIiBuYW1lPSJkaXNoIiB2YWx1ZT0icGl6emEiIC8+CiAgICBQaXp6YQogIDwvbGFiZWw+CiAgPGxhYmVsPgogICAgPGlucHV0IHR5cGU9InJhZGlvIiBuYW1lPSJkaXNoIiB2YWx1ZT0iYnVyZ2VyIiAvPgogICAgQnVyZ2VyCiAgPC9sYWJlbD4KICA8bGFiZWw+CiAgICA8aW5wdXQgdHlwZT0icmFkaW8iIG5hbWU9ImRpc2giIHZhbHVlPSJzdGVhayIgLz4KICAgIFN0ZWFrCiAgPC9sYWJlbD4KPC9mb3JtPg==

## Curseur de plage
`type="range"` : contrôle curseur pour sélectionner un nombre dans une plage. La logique JavaScript est omise dans ce cours.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0iZGF5Ij5EYXkgb2YgdGhlIHdlZWs8L2xhYmVsPgogIDxpbnB1dCBpZD0iZGF5IiB0eXBlPSJyYW5nZSIgdmFsdWU9IjUiIG1pbj0iMSIgbWF4PSI3IiBzdGVwPSIxIiAvPgo8L2Zvcm0+CjxwPlNlbGVjdGVkIHZhbHVlOiA8c3BhbiBjbGFzcz0ic2VsZWN0ZWQtdmFsdWUiPjU8L3NwYW4+PC9wPgo8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0Pg==

Y29uc3QgcmFuZ2VJbnB1dCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2lucHV0W3R5cGU9InJhbmdlIl0nKTsKY29uc3Qgb3V0cHV0ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLnNlbGVjdGVkLXZhbHVlJyk7CnJhbmdlSW5wdXQuYWRkRXZlbnRMaXN0ZW5lcignaW5wdXQnLCBlID0+IChvdXRwdXQudGV4dENvbnRlbnQgPSBlLnRhcmdldC52YWx1ZSkpOw==

La logique JavaScript est omise dans ce cours.

Remarque

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

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPCEtLSBEYXRlIGlucHV0IC0tPgogIDxsYWJlbCBmb3I9ImRhdGUiPkRhdGU8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJkYXRlIiBtaW49IjE5NzAtMDEtMDEiIG1heD0iMjA3MC0wMS0wMSIgaWQ9ImRhdGUiIC8+CgogIDwhLS0gVGltZSBpbnB1dCAtLT4KICA8bGFiZWwgZm9yPSJ0aW1lIj5UaW1lPC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGltZSIgaWQ9InRpbWUiIC8+CgogIDwhLS0gRGF0ZSBhbmQgVGltZSBpbnB1dCAtLT4KICA8bGFiZWwgZm9yPSJmdWxsLXRpbWUiPkRhdGUgYW5kIFRpbWU8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJkYXRldGltZS1sb2NhbCIgbWluPSIxOTAwLTAxLTAxVDAwOjAwIiBtYXg9IjIwMDAtMDEtMDFUMDA6MDAiIGlkPSJmdWxsLXRpbWUiIC8+CjwvZm9ybT4=

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.

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.

Approfondir

Quelle est la principale différence entre les champs de saisie `type="email"` et `type="password"` ?

Apprenez les bases du HTML (HyperText Markup Language), le fondement du développement web. Ce cours destiné aux débutants couvre les balises, attributs, éléments et la structuration des pages web. Acquérez des compétences pratiques pour créer des titres, paragraphes, listes, images, liens, formulaires et tableaux. Découvrez les bonnes pratiques, l’optimisation et l’accessibilité web. Commencez votre parcours en développement web avec le HTML.

Explorez le fonctionnement interne du web. Découvrez comment les données circulent à travers les réseaux, le rôle des protocoles, ainsi que les mystères des adresses IP et des noms de domaine. Acquérez une compréhension globale de la manière dont les navigateurs web et les serveurs communiquent pour fournir du contenu web.

Découvrez la puissance des balises pour structurer le contenu, des titres et paragraphes aux listes et tableaux. Apprenez à enrichir les éléments grâce aux attributs.

Le cœur de la structure d'un document HTML. Découverte des composants d'un document HTML, y compris la déclaration doctype, l'en-tête et le corps. Compréhension de la fonction de chaque élément et de leur contribution à la structure globale d'une page web.

Rendez une page web plus attrayante grâce à l'intégration de médias tels que des images, de l'audio et de la vidéo. Manipulez des données structurées sous forme de tableaux.

Découvrez la polyvalence des formulaires HTML. Apprenez à concevoir des formulaires intuitifs et conviviaux en utilisant des concepts et techniques essentiels. Comprenez comment les formulaires permettent l'interaction utilisateur et la soumission de données sur les sites web.

Exploration des différents types de champs de saisie en HTML

Email et mot de passe

Nombre

Téléphone

Case à cocher

Bouton radio

Curseur de plage

Date et heure