Input type: color

14 marzo 2011

L’elemento input con type=color dovrebbe creare un color picker, quel tipo particolare di widget utile per la selezione di un colore a partire da una palette di colori. Una volta selezionato il colore, il campo passa alla nostra pagina di ricezione un colore RGB esadecimale composto da 6 cifre.

Questo tipo input ad oggi non è molto supportato. Per la sua implementazione sui nostri siti si può però ricorrere ad una qualsiasi delle tante soluzioni Javascript disponibili.

Opera e il type color

Nella maggior parte dei browser non c’è alcuna differenza tra un campo di tipo text e un campo color, ma su Opera abbiamo un comportamento particolare:

  1. Visivamente abbiamo una select particolare con i colori (esempio in figura 33).
  2. Se clicchiamo abbiamo una scelta dei colori base (esempio in figura 34).
  3. Se clicchiamo su “Altro” richiamiamo il color picker di sistema (esempio su Opera su Mac OS X in figura 35).

Figura 33 – Input color su Opera: stato iniziale

screenshot

Figura 34 – Input color su Opera: selezione del colore

screenshot

Figura 35 – Input color su Opera: color-picker di sistema

screenshot

Esempi d’uso

Un input di tipo color si crea così:

<form>
  <label>Seleziona il colore di sfondo:
    <input type="color" name="mybackground">
  </label>
  <input type="reset"  value="Resetta la form">
  <input type="submit" value="Invia">
</form>

Tabella del supporto sui browser

Form: nuovi tipi di input Internet Explorer Firefox Safari Google Chrome Opera
color No No Parziale Parziale 11.0+

Tutte le lezioni

1 ... 30 31 32 ... 51

Se vuoi aggiornamenti su Input type: color inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su Input type: color

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy