
- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
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.
- Related Articles
- How to use input type field with date field in HTML?
- How to use input type field with steps in HTML?
- How to use range input type in HTML?
- How to use month input type in HTML?
- How to use time input type in HTML?
- How to use datetime input type in HTML?
- How to use email input type in HTML?
- How to use search input type in HTML?
- How to use telephone input type in HTML?
- How to use URL input type in HTML?
- How to use week input type in HTML?
- How to use year input type in HTML?
- HTML DOM Input Color type Property
- How to Create a Color Picker using HTML, CSS, and JavaScript?
- How to use a textarea (a multi-line text input field) in HTML?
