Simple Color Picker Input Field In HTML Form

By Faruque Ahamed Mollick

In this simple HTML tutorial, I am going to tell you how to create an HTML form input field where the user can choose a color.

To create a color picker for input field you can use input field type color like you can see in below line of code:

<input type="color" name="chosecolorr" value="#336600">

Below is the example of color picker input field with HTML form tag:

<form action="/action_page.php">
  Chose color:
  <input type="color" name="chosecolor" value="#336600">
  <input type="submit">
</form>

The above example will create a form like you can see below:

Chose color:

You can set the default color that will already be set by giving the color code inside input value. Actually, whenever you choose a color from the color picker input type, it will add the CSS color code for that color in the input field.

How to get HTML form data in PHP variable?

Now, another thing I think I should tell you. The input type color is not supported in some browser. These are Internet Explorer 11 and earlier versions or Safari 9.1 and earlier versions. The modern browsers support this color type input field.

So you can see that it is very easy to create a color picker input field. It is just easy like you create an input textbox field. Just you need to set the input type as “color” instead of input type “text”. Also if you want to set a default value, then put the color code of CSS instead of putting usual text.

Simple Color Picker Input Field In HTML Form

Leave a Reply Cancel reply