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 <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:
After Click on the button:
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:
After Click on the button:
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
Please Login to comment...