How to add color picker in a form using HTML ?
In this article, we will learn how to add a color picker in a form using HTML. As we know, a color picker is also known as a color-chooser. It is an interface in which a user can select a single color from multiple collections of background colors. When we submitted the color, the browser convert it into string form.
Approach:
- First, we create an HTML document that contains a <input> tag.
- Use the type attribute with the <input> element.
- Set the type attribute to value “color”.
Syntax
<input type="color">
Example: In this example, we will add color in the type attribute to the input element.
HTML
<!DOCTYPE html> < html > < head > < title > How to add a color picker in form using HTML? </ title > </ head > < body style = "text-align: center;" > < h1 > w3wiki </ h1 > < h2 > How to add a color picker in Form using HTML? </ h2 > < form > < label >First Name</ label > < input type = "text" name = "fname" >< br />< br > < label >Last name</ label > < input type = "text" name = "lname" >< br /> < p > Select your favorite color: < input type = "color" value = "red" id = "color" /> </ p > < input type = "submit" value = "submit" > </ form > </ body > </ html > |
Output:
Contact Us