How to add color picker in a form using HTML ?
Last Updated :
17 May, 2023
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 >
GeeksForGeeks
</ 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:
Share your thoughts in the comments
Please Login to comment...