HTML | DOM Input Color Object

Last Updated : 24 Aug, 2022

The Input Color Object property in HTML DOM is used to create and access the <input> element within the object. The <input> is used to enter data in the input field. Declaration of input control that allow user to input data is can be done by <input> elements are used within a <form>.

Syntax:

It is used to access the <input> element with the type "color".

var x = document.getElementById("myColor");

It is used to create <input> element with the type "color".

var x = document.createElement("INPUT");

Property Values:

autocomplete: It is used to set or return the autocomplete attribute of a color picker.
autofocus: It is used to set or return the color picker when page automatically get focus.
defaultValue: It is used to set or return the default value of color picker.
disabled: It is used to set or return the color picker is disabled, or not.
form: It returns the reference of form that contains the color picker.
list: It returns the reference of element that contains the color picker.
name: It is used to set or return the name attribute of a color picker.
type: It returns the type of form element the color picker.
value: It is used to set or return the value attribute of a color picker.

Example 1: This example describes the getElementById() method to access <input> element with type = "color" attribute.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> 
        HTML DOM Input Color Object 
    </title>
</head>
<body>
    <h2>
        HTML DOM Input Color Object Property 
    </h2>
    <p>
        Select your favorite color: 
        <input type = "color" value = "#009900"
            id = "color">
    </p>
    <p>Click on the button to get the color value</p>
    <button onclick = "myGeeks()">
        Click Here!
    </button>
    <p id = "GFG"></p>
    
    <!-- script to return the input color -->
    <script>
        function myGeeks() {
            var x = document.getElementById("color").value;
            document.getElementById("GFG").innerHTML = x;
        }
    </script>
</body>
</html>

Output:

Before Click on the button:

color object

After Click on the button:

color object

Example 2: This example describes the document.createElement() method to create <input> element with type = "color" attribute.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> 
        HTML DOM Input Color Object 
    </title>
</head>
<body>
    <h2>
        HTML DOM Input Color Object Property 
    </h2>
    <button onclick = "myGeeks()">
        Click Here!
    </button>
    
    <!-- script to create input color element -->
    <script>
        function myGeeks() {
            
            /* Create input element */
            var x = document.createElement("INPUT");
            
            /* Set color attribute */
            x.setAttribute("type", "color");
            
            /* Set color value */
            x.setAttribute("value", "#009900");
            
            document.body.appendChild(x);
        }
    </script>
</body>
</html>