5568 sujets

Sémantique web et HTML

Bonjour,
Comment faire un sélecteur de couleurs avec Bootstrap ou Html parmi 12 couleurs prédéfinies ?
Merci.
Modérateur
Bonjour,

La question manque de contexte.

Tu veux faire quoi ? Montrer à l'utilisateur une liste de couleurs affichées sous une forme qui reste à définir et récupérer le code (ou le nom?) de la couleur dans une variable javascript pour une utilisation ultérieure dans la page ?

Ou bien tu as tes 12 couleurs affichées sous une forme restant à définir dans un formulaire, et l'utilisateur doit pouvoir cliquer sur l'une d'entre elles puis valide le formulaire et l'information est envoyée au serveur ?

Ou bien est-ce pour faire autre chose ?

Amicalement,
Modifié par parsimonhi (01 Feb 2022 - 14:35)
Dans un formulaire, je veux ajouter un champs pour choisir une couleur parmi 12 couleurs prédéfinies. Afin de choisir une couleur pour mon application de personnalisation de décoration.

Merci
Modérateur
Salut,

SI il n'y en a que 12 et qu'elles sont fixes, je dirais de faire une suite de radio bouton avec la couleur en fond. Partir dans un color picker c'est overkill juste pour ca à mon avis.
Modérateur
Bonjour,

Il existe un <input type="color">. Mais il affiche un "color picker" permettant de choisir n'importe quelle couleur. Donc ce n'est pas très approprié ici. À noter qu'il est possible d'indiquer une liste de couleurs prédéfinies pour un <input type="color">, auquel cas, il va afficher en plus du "color picker" une liste de boutons (un pour chaque couleur prédéfinie), mais ça n'empêche pas l'utilisateur de choisir quand même une autre couleur que celles prédéfinies. Et en plus, c'est malheureusement bogué depuis une éternité dans Firefox. Voir un exemple à https://jsfiddle.net/parsimonhi/1vntr9k0/

Du coup, soit on fait une liste de <input type="radio"> comme le suggère _Laurent (un pour chaque couleur), qu'on recouvre éventuellement avec quelque chose qui serait colorié dans la couleur correspondante, soit on peut faire une liste de <button> coloriés par chacune des couleurs, et au clic sur un bouton mettre à jour avec du js l'attribut "value" d'un <input type="hidden">.

Amicalement,