Comment créer une entrée de sélecteur de couleurs dans HTML

La méthode de création de l'entrée de sélecteur de couleurs à l'aide de HTML consiste à utiliser l'élément et à définir l'attribut type = "couleur", qui peut appeler l'interface de sélection de couleurs native du navigateur. Sa valeur par défaut est # 000000 (noir), et la valeur de retour est un code couleur HexaDecimal au format hexadécimal (tel que # FF5733). La couleur initiale peut être définie via l'attribut de valeur, et l'accessibilité peut être améliorée avec la balise <baling>, et la couleur sélectionnée par l'utilisateur est obtenue via l'événement d'entrée ou de modification de JavaScript. Cette fonction est largement prise en charge dans les navigateurs traditionnels modernes, notamment Chrome, Firefox, Edge et Safari 12 et plus. Bien qu'il soit impossible de personnaliser directement le style, vous pouvez créer une interface personnalisée en cachant des commandes natives et en combinant JavaScript. Il est également recommandé de fournir aux utilisateurs aveugles de couleur des invites supplémentaires ou des méthodes d'entrée alternatives pour améliorer la convivialité. </baling></prening></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175521564479371.jpeg" class="lazy" alt="Comment créer une entrée de sélecteur de couleurs dans HTML"></p> <p> Pour créer une entrée de sélecteur de couleurs dans HTML, vous pouvez utiliser l'élément <code><input></code> avec l'attribut <code>type="color"</code> . Cela fournit un sélecteur de couleurs intégré qui permet aux utilisateurs de sélectionner une couleur visuellement via une interface native du navigateur.</p> <h3> Syntaxe de base</h3><pre class='brush:php;toolbar:false;'> <entrée type = "couleur" id = "colorpicker" name = "colorpicker">

Cette ligne unique crée un champ de saisie de couleur. Par défaut, il affiche un petit interrupteur carré (souvent gris), qui ouvre une boîte de dialogue de sélecteur de couleurs lors du clic.

Détails clés et utilisation

• Valeur par défaut : la couleur par défaut est #000000 (noir) si aucune valeur n'est spécifiée.
• Format de valeur : la couleur sélectionnée est renvoyée sous forme de chaîne hexadécimale minuscule (par exemple, #ff5733 ).
• Browsers pris en charge : La plupart des navigateurs modernes prennent en charge type="color" , y compris Chrome, Firefox, Edge et Safari (bien que le support Safari soit venu plus tard, de la version 12).

Personnalisation de la couleur par défaut

Vous pouvez définir une couleur initiale à l'aide de l'attribut value :

 <input type = "colore" id = "colorpicker" name = "colorpicker" value = "# ff6b6b">

Cela définit la couleur par défaut sur une nuance de rose.

En utilisant avec une étiquette et une forme

Pour une meilleure accessibilité et une meilleure convivialité, associez l'entrée avec une étiquette:

 <étiquette pour = "ColorPicker"> Choisissez une couleur: </ label>
<input type = "colore" id = "colorpicker" name = "colorpicker" value = "# 0080ff">

Obtenir la couleur sélectionnée avec JavaScript

Vous pouvez récupérer la couleur sélectionnée à l'aide de JavaScript:

 <entrée type = "couleur" id = "colorpicker">
<cript>
  document.getElementById (&#39;colorpicker&#39;). AddEventListener (&#39;Input&#39;, function () {
    console.log (this.value); // produit la couleur sélectionnée au format hexadécimal
  });
</cript>

L'événement input se déclenche en continu lorsque l'utilisateur ajuste la couleur (par exemple, les curseurs en mouvement), tout en change d'incendie uniquement lorsque la sélection est terminée (par exemple, après la fermeture du sélecteur).

Considérations de style

• Vous ne pouvez pas styliser directement le bouton de sélecteur de couleurs dans la plupart des navigateurs en raison des limitations de contrôle de l'interface utilisateur native.
• Des solutions de contournement impliquent de cacher les entrées par défaut et de créer une interface personnalisée, mais cela nécessite un effort JavaScript et de conception supplémentaire.

Notes d'accessibilité

• Incluez toujours une étiquette pour les lecteurs d'écran.
• Fournir des instructions si le choix des couleurs affecte la fonctionnalité (par exemple, "Choisissez une couleur de surbrillance").
• Considérez les utilisateurs ayant une cécité couleur en offrant d'autres méthodes d'entrée ou aperçus.

Fondamentalement, utilisez simplement type="color" et définissez éventuellement une value par défaut. Il est simple, largement pris en charge et fonctionne hors de la boîte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!