Come usare un HTML input color

Questa guida è dedicata alla spiegazione di un componente HTML, l’elemento input type=”color” e alla sua funzione all’interno di una pagina web, e ti spiegherò inoltre come usare un HTML input di tipo “color” in differenti modi.

Se vuoi approfondire questo argomento non perderti il corso gratuito HTML e inizia ad imparare il linguaggio del web in tutte le sue sfaccettature.

Input type=”color” HTML

In HTML tutti gli input sono elementi ideati per l’uso lato client (client-side), cioè ad essere usati dagli utenti in visita in una specifica pagina web, per la loto interazione diretta. Lo scopo di un elemento di tipo input è quella di fornire ai visitatore oggetti cliccabili e dinamici per l’invio di valori e informazioni, come avviene generalmente in qualsiasi modulo online (form).

L’input di tipo “color” è probabilmente uno degli elementi HTML meno usati, o comunque difficile da trovare nelle comuni pagine web poiché la sua funzione è quella di restituire un valore sotto forma di codice HEX (formato esadecimale), detto in parole semplici, questo input consente alle persone di scegliere un colore. Come puoi capire dunque all’interno di un modulo/form HTML, questo tipo di input trova difficile posto (ad esempio un modulo di iscrizione o registrazione ad un sito o ad una newsletter, oppure ad un modulo di contatto. In questi casi non ha senso aggiungere un input per la scelta di un colore).

Tuttavia l’input type=”color” è spesso usato in combinazione con JavaScript, perché grazie ad esso è possibile scambiare/gestire colori all’interno di un applicazione web, o per la modifica grafica di oggetti e testo.

Sintassi

Qui di seguito di spiegherò in breve la sintassi da usare con un input di tipo “color” in HTML. Consiglio uno studio più approfondito di questo linguaggio per comprendere appieno i seguenti codici.

La sintassi di base usata per definire un input di questo genere è la seguente:

<input type="color">

È possibile arricchire il codice aggiungendo un valore HEX predefinito:

<input type="color" value="#00ff00">

Sono disponibili altri attributi standard come per gli altri elementi HTML di tipo input, come i selettori.

Per l’invio di dati attraverso via server, con linguaggio PHP ad esempio, è necessario inserire tale tag HTML in un modulo <form>:

<form method="post">
   <input type="color" name="colore">
      ...
</form>

Estetica e comportamento

L’input HTML di tipo “color” si presenta con un estetica dedicata ed unica che può variare a seconda del browser web utilizzato. In Google Chrome e in Mozilla Firefox l’aspetto estetico di questo elemento è differente (come puoi vedere dall’immagine sottostante) ma il comportamento è lo stesso.

L’input color si comporta in maniera simile ad un pulsante: al click farà aprire una nuova finestrella chiamata “color picker” che consente all’utente di scegliere un colore.

Input color di Chrome
Input color di Chrome con il color picker dedicato
input color e color picker di mozilla
Input color di Mozilla Firefox con il color picker nativo di Windows

Anche il color picker può essere di diversa entità, ad esempio nelle più recenti versioni di Chrome (o altri browser basati su Chromium) potrà essere visualizzato un color picker dedicato, altrimenti verrà usato quello nativo presente nel sistema operativo del computer in uso.

Input color con JavaScript

Come accennato nel precedente paragrafo, JavaScript è il miglior strumento per usare i valori forniti da un input color. Con JavaScript puoi gestire i colori generati dall’elemento HTML ed usarli a piacere. Se non sai programmare con JavaScript puoi sempre imparare tramite il nostro corso gratuito.

Un esempio:

<input type="color" id="input-color" value="#00ff00">
<script>
  var color = document.getElementById('input-color');
  console.log(color.value);
       //   #00ff00
</script>

Oppure:

<input type="color" id="input-color" value="#ffffff" onchange="document.body.style.background = this.value">

Qui in basso puoi provare il codice interattivo:

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

CAPTCHA