}

How to use HTML5 input type color in Form Component

Created:

HTML input type color

Modern browsers, like Firefox, support the input type color which allows the user to pick up a color and it will be saved as a hexadecimal color.

The color picker control should be used in the form field of your web application or just use javascript to read the selected color by the user.

Here is an example HTML code which uses the color input type:

<div>
   <input type="color" id="userColor" name="userColor" value="#ffffff">
   <label for="userColor">User Color</label>
</div>

We recommend to use hexacolors of 6 digits on the value attribute (default value of the input type color).

Once the user clicks on the input:

color picker input example

The following color picker will be shown:

color picker input example pop up

You can also show a list of predefined colors to the user to pick up. You will need to use the list attribute of the input control.

color picker input example pop up

<div>
   <input type="color" id="userColor" name="userColor" list="userColors">
</div>
<datalist id="userColors">
  <option value="#00ffff">
  <option value="#ff00ff">
  <option value="#ffff00">
  <option value="#ffaa00">
</datalist>