Open In App

HTML | DOM Input Color Object

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output: 

Before Click on the button:

 color object 

After Click on the button:

 color object 

Supported Browsers: The browser supported by DOM Input Color Object property are listed below:

  • Google Chrome 20
  • Edge 14
  • Firefox 29
  • Opera 12
  • Safari 12.1


Last Updated : 24 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads