Nouveaux types d’entrée en HTML5
Ce chapitre couvre en détail ces nouveaux types d’entrée :
Remarque :
- color
- date
- datetime
- datetime-local
- month
- nombre
- range
- search
- tel
- time
- url
- week
Les navigateurs courants ne prennent pas tous en charge les nouveaux types d’entrée, mais vous pouvez déjà les utiliser dans tous les navigateurs courants. Même s’ils ne sont pas pris en charge, ils s’afficheront toujours comme des champs de texte ordinaires.Les navigateurs courants ne prennent pas tous en charge les nouveaux types d’entrée, mais vous pouvez déjà les utiliser dans tous les navigateurs courants. Ils s’afficheront toujours comme un champ de texte ordinaire même s’ils ne sont pas pris en charge.
Type d’entrée : color
Le type couleur est utilisé dans les champs de saisie pour sélectionner des couleurs, comme illustré ci-dessous :
Exemple
Choisissez une couleur dans le sélecteur de couleurs :
Essayez-le »
Type de champ : date
Le type date vous permet de sélectionner une date à partir d'un sélecteur de date.
Exemple
Définissez un contrôleur de date :
Essayez-le »
Type de champ : datetime
Le type datetime vous permet de sélectionner une date (heure UTC).
Exemple
Définissez un contrôleur de date et d'heure (heure locale) :
Essayez-le »
Type de champ : datetime-local
Le type datetime-local permet de sélectionner une date et une heure (sans fuseau horaire).
Exemple
Définissez une date et une heure (sans fuseau horaire) :
Essayez-le »
Type d'entrée : email
Le type email est utilisé pour les champs de saisie qui doivent contenir des adresses e-mail.
Exemple
Lors de l'envoi du formulaire, le champ email valide automatiquement la valeur pour s'assurer qu'elle est valide :
Essayez-le »
Remarque :Le navigateur Safari sur iPhone prend en charge le type d'entrée email et fournit un clavier tactile qui le complète (ajout des options @ et .com).
Type d'entrée : month
Le type month permet de sélectionner un mois.
Exemple
Définissez un mois et une année (sans fuseau horaire) :
Essayez-le »
Type de saisie : number
Le type number est utilisé pour les champs de saisie qui doivent contenir des valeurs numériques.
Vous pouvez également définir des limites sur les nombres qui peuvent être acceptés :
Exemple
Définissez un champ de saisie numérique (avec limites) :
Essayez-le »
Utilisez les attributs suivants pour définir des limites sur le type number :
| Attributes | Description |
|---|---|
| disabled | Pour désactiver le champ de saisie |
| max | Pour définir la valeur maximale |
| maxlength | Pour définir la longueur maximale en caractères |
| min | Pour définir la valeur minimale |
| pattern | Pour définir le motif pour la validation des entrées |
| readonly | Pour rendre le champ de saisie en lecture seule |
| required | Pour rendre le champ de saisie obligatoire |
| size | Pour définir le nombre de caractères visibles |
| Pas | Pour définir l'intervalle numérique autorisé |
| value | Pour définir la valeur par défaut |
Essayez avec tous les attributs de limiteEssayez
Type d'entrée : range
Le type range est utilisé pour les champs de saisie qui doivent contenir une plage de valeurs numériques.
Le type range s'affiche sous forme de curseur.
Exemple
Définissez un champ de saisie à curseur (ne nécessitant pas de valeurs très précises) :
Essayez-le »
Utilisez les attributs suivants pour définir des limites sur le type number :
- max - Pour définir la valeur maximale
- min - Pour définir la valeur minimale
- step - Pour définir l'intervalle numérique autorisé
- value - Pour définir la valeur par défaut
Type d'entrée : search
Le type search est utilisé pour les champs de recherche, tels que la recherche sur site ou la recherche Google.
Exemple
Définir un champ de recherche (similaire à la recherche sur site ou à la recherche Google) :
Essayez-le »
Type d'entrée : tel
Exemple
Définir un champ de saisie de numéro de téléphone :
Essayez-le »
Type d'entrée : time
Le type time vous permet de sélectionner une heure.
Exemple
Définissez un champ de saisie d'heure (sans fuseau horaire) :
Essayez-le »
Type d'entrée : url
Le type url est utilisé pour les champs de saisie qui doivent contenir des adresses URL.
Lors de la soumission du formulaire, le champ url valide automatiquement la valeur.
Exemple
Définissez un champ de saisie URL :
Essayez-le »
Remarque :Le navigateur Safari sur iPhone prend en charge le type de saisie url et fournit un clavier tactile qui le complète (ajout d'options .com).
Type d'entrée : week
Le type week vous permet de sélectionner une semaine et une année.
Exemple
Définissez une semaine et une année (sans fuseau horaire) :
Essayez-le »
Balise <input> HTML5
| Balise | Description |
|---|---|
| <input> | Description de l'élément input |