Skip to content
Related Articles

Related Articles

HTML | DOM Input Color Object
  • Last Updated : 07 Feb, 2019

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 <iframe> element.
    var x = document.getElementById("myColor");
  • It is used to create <iframe> element.
    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.




<!DOCTYPE html>
<html>
  
<head>
    <title
        HTML DOM Input Color Object Property 
    </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.




<!DOCTYPE html>
<html>
  
<head>
    <title
        HTML DOM Input Color Object Property 
    </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 clor 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 :