Sélection d’une couleur en HTML5 : input type color

Ce contenu a 1 an. Merci de lire cette page en gardant son âge en tête.

Une petite astuce aujourd’hui pour pallier aux lourdes librairies javascript de Color Picker, le type color d’un champ input en HTML5.

Sélection d’une couleur en HTML5 grâce au champ input type color

Présentation du code input

On ne va pas s’attarder sur de nombreuses explications et nous allons passer directement à la présentation du code. En HTML5 le type color fait son apparition et est très vite implémenté dans les navigateurs modernes.
Voyons cela :

Voir le code sur CodePen.io

Évènements à écouter

Comme la plupart des champs de formulaire, le type color est audible sur 2 évènements principaux : input et change.

Validation du champ

C’est pas pour vous embêter avec les détails mais pour ceux que ça intéresse, si le navigateur ne parvient pas à convertir la saisie de l’utilisateur en valeur hexadécimale, alors la pseudo-class CSS :invalid sera appliquée à l’élément. Du coup les webdesigners sont contents.

Valeur de retour

C’est bien beau de pouvoir choisir une couleur dans un formulaire mais que me retourne ce champ ?

Comme il n’est pas encore possible de définir un pattern à l’heure de l’écriture de cet article, le input type color ne renvoie qu’une valeur hexadécimale de la couleur sélectionnée.
Il est vivement recommandé d’attribuer une valeur par défaut grâce à l’attribut HTML value. Sinon, par défaut ce champs affichera du noir (#000000).

Prise en charge des navigateurs pour le type color

Actuellement la prise en charge n’est pas exceptionnelle. Elle va varier en fonction de l’OS et du navigateur.
Je vous invite à lire le tableau de prise en charge de Mozilla.

Auteur

Infographiste passionné par son métier, il passe le plus clair de son temps à vouloir tout apprendre et tout savoir faire. Heureusement les journées sont limitées à 24 heures.
Aujourd’hui spécialisé dans la mise en page (maquettiste PAO) et dans le webdesign, il a tendance à déborder sur la 3D et la vidéo quand le temps le lui permet.

Ce contenu a 1 an. Merci de lire cette page en gardant son âge en tête.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *