Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Color Object
The HTML DOM Input Color Object represents an HTML input element with type="color". This object provides methods and properties to interact with color picker elements through JavaScript, allowing developers to create, access, and manipulate color input fields programmatically.
Syntax
Following is the syntax for creating an input color object −
var colorObject = document.createElement("input");
colorObject.type = "color";
Following is the syntax for accessing an existing color input −
var colorObject = document.getElementById("colorId");
Properties
The Input Color Object supports several properties that allow you to control its behavior and appearance −
| Property | Description |
|---|---|
| autocomplete | Sets or returns the value of the autocomplete attribute of the color picker |
| autofocus | Sets or returns whether the color picker should be focused when the page loads |
| defaultValue | Sets or returns the default value of the color picker (usually #000000) |
| disabled | Sets or returns whether the color picker is disabled |
| form | Returns a reference to the form that contains the color picker |
| name | Sets or returns the value of the name attribute of the color picker |
| type | Returns the type of form element (always "color" for color inputs) |
| value | Sets or returns the value of the color picker in hexadecimal format (#rrggbb) |
Creating a Color Input Dynamically
Example
Following example shows how to create a color input element dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Create Color Input Dynamically</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<button onclick="createColorInput()">Create Color Picker</button>
<div id="container"></div>
<script>
function createColorInput() {
var colorObject = document.createElement("input");
colorObject.type = "color";
colorObject.id = "dynamicColor";
colorObject.name = "backgroundColor";
colorObject.value = "#ff5733";
var label = document.createElement("label");
label.textContent = "Choose Background Color: ";
var container = document.getElementById("container");
container.appendChild(label);
container.appendChild(colorObject);
}
</script>
</body>
</html>
Clicking the button creates a color picker with an initial orange color value.
Accessing Color Input Properties
Example − Name Property
Following example demonstrates how to access and modify the name property of a color input −
<!DOCTYPE html>
<html>
<head>
<title>Input Color Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="colorForm">
<label>Color Picker: </label>
<input type="color" id="colorPicker" name="primaryColor" value="#3498db">
</form>
<button onclick="changeNameValue()">Change Name Value</button>
<div id="displayResult" style="margin-top: 10px; padding: 10px; background-color: #f9f9f9;"></div>
<script>
var inputColor = document.getElementById("colorPicker");
var displayResult = document.getElementById("displayResult");
displayResult.textContent = 'Current name: ' + inputColor.name;
function changeNameValue() {
if(inputColor.name == 'primaryColor'){
inputColor.name = 'secondaryColor';
} else {
inputColor.name = 'primaryColor';
}
displayResult.textContent = 'Current name: ' + inputColor.name;
}
</script>
</body>
</html>
The output shows the current name property value and allows you to toggle between "primaryColor" and "secondaryColor" −
Color Picker: [color picker showing blue] [Change Name Value] Current name: primaryColor (After clicking: Current name: secondaryColor)
Example − Value and DefaultValue Properties
Following example shows how to work with the value and defaultValue properties −
<!DOCTYPE html>
<html>
<head>
<title>Color Input Value Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<label>Select Color: </label>
<input type="color" id="colorInput" value="#e74c3c">
<button onclick="showValues()">Show Values</button>
<button onclick="resetToDefault()">Reset to Default</button>
<div id="info" style="margin-top: 15px;"></div>
<script>
var colorInput = document.getElementById("colorInput");
var info = document.getElementById("info");
function showValues() {
info.innerHTML =
'<p>Current value: ' + colorInput.value + '</p>' +
'<p>Default value: ' + colorInput.defaultValue + '</p>' +
'<p>Type: ' + colorInput.type + '</p>';
}
function resetToDefault() {
colorInput.value = colorInput.defaultValue;
info.innerHTML = '<p style="color: green;">Reset to default value: ' + colorInput.defaultValue + '</p>';
}
</script>
</body>
</html>
This example displays the current value, default value, and input type, and allows resetting the color to its default value.
Form Integration
Example − Color Input in Form Submission
Following example demonstrates how color inputs work within forms −
<!DOCTYPE html>
<html>
<head>
<title>Color Input Form Integration</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="themeForm">
<h3>Website Theme Configuration</h3>
<label>Primary Color: </label>
<input type="color" id="primaryColor" name="primary" value="#2c3e50"><br><br>
<label>Secondary Color: </label>
<input type="color" id="secondaryColor" name="secondary" value="#ecf0f1"><br><br>
<button type="button" onclick="previewTheme()">Preview Theme</button>
<button type="button" onclick="getFormData()">Get Form Data</button>
</form>
<div id="preview" style="margin-top: 20px; padding: 15px; border: 1px solid #ccc;">
Theme Preview Area
</div>
<div id="formData" style="margin-top: 10px;"></div>
<script>
function previewTheme() {
var primary = document.getElementById("primaryColor").value;
var secondary = document.getElementById("secondaryColor").value;
var preview = document.getElementById("preview");
preview.style.backgroundColor = secondary;
preview.style.color = primary;
preview.style.borderColor = primary;
preview.textContent = "Theme applied with colors: " + primary + " and " + secondary;
}
function getFormData() {
var form = document.getElementById("themeForm");
var formData = new FormData(form);
var result = "Form Data:<br>";
for (let [name, value] of formData) {
result += name + ": " + value + "<br>";
}
document.getElementById("formData").innerHTML = "<pre>" + result + "</pre>";
}
</script>
</body>
</html>
This example shows how color inputs can be used in practical scenarios like theme configuration, with real-time preview and form data extraction.
Conclusion
The HTML DOM Input Color Object provides a comprehensive interface for working with color picker elements in web applications. Through its properties like value, name, and disabled, developers can create dynamic, interactive color selection interfaces that integrate seamlessly with forms and JavaScript applications.
207 Views
