Skip to content
Related Articles

Related Articles

HTML | DOM Input Color Object

View Discussion
Improve Article
Save Article
  • Last Updated : 15 Jul, 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>                   

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
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

Note: It is not supported by Internet Explorer 11.0 and earlier versions or Safari 9.1 and earlier versions.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!