MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

<input type="color">

L'élément <input type="color"> est une version spécifique de l'élément <input> qui permet de créer un champ de saisie pour sélectionner une couleur et envoyer le code de la couleur correspondante. L'interface utilisateur du sélecteur de couleurs doit, a minima, accepter un code couleur sous forme de texte (cf. la spécification).

Catégories de contenu Contenu de flux, contenu phrasé, contenu interactif, contenu énuméré, contenu étiquetable, contenu associé au formulaire, contenu tangible.
Contenu autorisé Aucun, c'est un élément vide.
Omission de balises Cet élément doit avoir une balise ouvrante et ne doit pas avoir de balise fermante.
Éléments parents autorisés Tout élément qui accepte du contenu phrasé.
Interface DOM HTMLInputElement

Attributs

Cet élément peut inclure les attributs universels. Il prend également en charge les attributs suivants :

autocompleteHTML5
Cet attribut permet de régler le remplissage automatique de la valeur. S'il vaut true, le sélecteur de couleur prendra automatiquement la valeur de la couleur précédemment sélectionnée.
autofocusHTML5
Cet attribut booléen permet d'indiquer que le sélecteur de couleur reçoit le focus au chargement de la page. Au sein d'un document, seul un élément peut avoir l'attribut autofocus.
defaultvalue
Cet attribut permet de définir la valeur par défaut du sélecteur de couleur.
disabled

Cet attribut booléen indique que le sélecteur de couleur est désactivé et qu'il est impossible d'interagir avec. Les valeurs des champs d'un formulaire qui sont désactivés ne sont pas envoyées lors de l'envoi du formulaire.

name
Le nom associé au sélecteur de couleur. La valeur de cet attribut est envoyé avec les données du formulaire.
value
La valeur de la couleur présélectionnée dans le sélecteur de couleur. La valeur de cet attribut doit être une chaîne de caractères avec 7 caractères, commençant par « # » puis composée d'un code couleur au format hexadécimal (#FF0000 sera par exemple la couleur rouge).

Exemples

Présélectionner une couleur avec value

HTML

<input type="color"  value="#ff0000" />

Résultat

Aperçu statique

Voici un aperçu du sélecteur de couleur affiché dans Chrome sur un ordinateur macOS :

This is how an input type color looks on Mac and within Chrome

Spécifications

Spécification État Commentaires
WHATWG HTML Living Standard Standard évolutif  
HTML5 Recommendation  
HTML 4.01 Specification Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 12 1.0 (1.7 ou moins) 2 1.0 1.0
type="color" 20.0 38 29.0 (29.0) [1] Pas de support 11.01 10
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) 4.0 (2.0) (Oui) (Oui) (Oui)
type="color" 4.4 27.0 (27.0) ? (Oui) ?

[1]  This is not implemented for Windows Touch yet.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, josephcab
 Dernière mise à jour par : SphinxKnight,