Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use input type field with the color picker in HTML?
In this article, we are going to learn how to use input type field with the color picker in HTML.
We use <input type="color"> for input fields with color. It will allow us to select a color from color picker.
A color picker will be visible when we will click on the default color box. Here, you can set the default color also with the value attribute in the input field - this value needs to be set in hexadecimal because colors are represented as six-digit hexadecimal values following a hashtag.
Syntax
Following is the syntax to use input type field with color picker in HTML.
<input type="color" >
Example
Following is the example program to use input type field with color picker in HTML.
<!DOCTYPE html> <html> <body> <form > <label for="onecolor">Select color:</label> <input type="color" id="onecolor" name="onecolor" value="#ff0000"><br><br> <input type="submit"> </form> </body> </html>
Example
Following is another example program to use input type field with color picker in HTML.
<!DOCTYPE html> <html> <head> <title>HTML input color</title> </head> <body> <form action = "" method = "get"> Select which color you want for your website:<br><br> <input type="color" name="favcolor" value="#FFFFF"><br> <input type="submit" value="submit"> </form> </body> </html>
After clicking on the color picker box, we can choose the color we want.
Example
Following is one more example program to use input type field with color picker in HTML.
<!DOCTYPE html> <html> <center> <body> <h1>How to use input type field with the color picker in HTML?</h1> <style> input[type=color] { width: 10%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid Blue; border-radius: 4px; } </style> <form> <label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor" value="#ff0000"><br><br> <input type="submit"> </form> <p><b>Note:</b> type="color" is not supported in Internet Explorer 11 or Safari 9.1 versions.</p> </body> </center> </html>
After clicking on the color picker box, we can choose the color we want.
2K+ Views
