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