HTML | DOM Input Color Object

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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

Small things always make you to think big

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.