HTML/Formulare/input/Farbwähler

Aus SELFHTML-Wiki
< HTML‎ | Formulare‎ | input
Wechseln zu: Navigation, Suche

Mit input type="color" haben Sie einen Farbwähler schon im Browser integriert.

  • HTML5
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Farbauswähler mit type="color" ansehen …
    <h1>Wählen Sie Ihre Lieblingsfarbe</h1>
    <input type="color" value="#ff0000">

Was früher viele Zeilen JavaScript erforderte, ist heute in die meisten Browser integriert. Wenn Sie auf das rote Farbfeld klicken, öffnet sich ein Popup, in dem Sie Farben auswählen, definieren und hinzufügen können.

Benutzer alter Browser sehen hier ein Text-Eingabefeld, in das sie die entsprechenden hex-Werte eintragen können. Damit nur Farbwerte eingetragen werden, können Sie mit regulären Ausdrücken Werte vorgeben:

Beispiel: Farbauswähler mit type="color" ansehen …
    <h1>Wählen Sie Ihre Lieblingsfarbe</h1>
    <input type="color" value="#ff0000" id="color" pattern="^#([A-Fa-f0-9]{6})$" required 
           title="Hex-Wert eingeben" placeholder="#COFFEE">

Allerdings werden Browser, die type="color" nicht interpretieren, auch pattern nicht verstehen, deshalb sollten Sie ein Polyfill einbinden: