Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to add color picker in a form using HTML ?

  • Last Updated : 05 Oct, 2021

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.  

Approach:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • First, we create an HTML document that contains an <input> tag.
  • Use the type attribute with the <input> element.
  • Set the type attribute to value “color”.

Syntax

<input type="color">

Example: 



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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!