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 >
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 >
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
Last Updated :
24 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...