The color is input type field which allows user to select color. The user can select from color picker. The color picker is often needed in certain web based application. The input element with type attribute whose value is color represents color for setting elements value to represent simple color. The browser would display a color well which allows the user to pick the exact color they want to submit.
The color input type has following attribute:
- list: It provides list of the colors to be choosed from color picker.
Syntax of color Input Type
<input type="color" name="some-name"/>
Browser support
The color input type is supported by Google Chrome 20.0 and above version and Opera 11.0 and above version.
HTML5 Color Input Type Example
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>color input type</title> </head> <body> <form> select color:<input type="color" name="your favourite color" list=""> </form> </body> </html>
As shown in the above program, we have used color input type to choose color as user wants to submit the form.
HTML5 Color Demo
- Save the file as color_example.html in your system.
- Just open file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.
When the execution process is completed successfully, we will get the following output:
When we run the program, we will get above picture saying select color which will open a list of colors to be select from color picker-well when user click on that.
HTML5 URL Input Type