How to add color picker in a form using HTML ? Last Updated : 17 May, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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: Comment More infoAdvertise with us Next Article How to define a form for user input using HTML5 ? M manaschhabra2 Follow Improve Article Tags : HTML HTML-Tags HTML-Attributes HTML-Questions Similar Reads How to add a date picker in form using HTML ? To add a date picker in a form using HTML, you can use the <input> element with the type attribute set to "date". A date picker is an interactive dropdown that makes it easy to choose the date from a calendar instead of typing it manually. In this article, we will learn how to add a date picke 2 min read How to add a Time picker in Form using HTML5 ? In this article, we will see how to add a Time picker in Form using HTML5. As we know that a Time picker is used to provide tp select a single value from a pre-determined set. Basically, it creates an input field that accepts a time. We can open a time picker by clicking on a clock icon. The UI Desi 1 min read How to add a checkbox in forms using HTML ? In this article, we will learn how to add a checkbox in HTML Forms. Basically, the checkbox is used to select one or more options from a variety of options. It is a multi-control unit that will be presented as a small square box on the screen. Normally, Checkbox has 3 states namely- Checked, uncheck 1 min read How to add Radio Buttons in form using HTML ? In this article, we will learn how to add Radio Buttons in form using HTML. We know that Radio Buttons are used to select only one option out of several options. It is generally used in HTML form. If we want to deselect any option we have to select another option in the case of a radio button. Appro 1 min read How to define a form for user input using HTML5 ? In this article, we will learn how to create a form in a webpage by using the <form> tag. This tag is used to create form for user input. Also there are many elements which are used within form tag. Syntax: <form> Form Content... </form> Example: The following code snippet demonstr 1 min read How to Create Color Picker input box in HTML ? In this article, we will know about the HTML color picker & will understand its implementation through the example. The <input> element of type color in HTML provides the user with an interface to select a color from the default color-picker to interface or design their own color by giving 2 min read Like