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 type Property
The HTML DOM Input Color type property returns or sets the value of the type attribute of a color input element. This property allows you to get the current input type or dynamically change it to a different input type such as text, radio, or other valid input types.
Syntax
Following is the syntax for returning the type value −
inputColorObject.type
Following is the syntax for setting the type value −
inputColorObject.type = stringValue
Return Value
The property returns a string representing the current type of the input element (e.g., "color", "text", "radio").
String Values
The stringValue can be any valid HTML input type −
| stringValue | Details |
|---|---|
| color | Defines that input type is a color picker |
| text | Defines that input type is a text input field |
| radio | Defines that input type is a radio button |
| checkbox | Defines that input type is a checkbox |
| Defines that input type is an email input field |
Example − Getting and Setting Input Type
Following example demonstrates how to get the current type of a color input and dynamically change it to a text input −
<!DOCTYPE html>
<html>
<head>
<title>Input Color Type Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form id="colorForm">
<label>Color Picker: </label>
<input type="color" id="colorInput" name="primaryColor" value="#0000ff">
</form>
<button onclick="getTypeAndChange()">Get Type & Change to Text</button>
<button onclick="resetToColor()">Reset to Color</button>
<div id="output" style="margin-top: 10px; padding: 8px; background-color: #f0f0f0;"></div>
<script>
var inputColor = document.getElementById("colorInput");
var output = document.getElementById("output");
// Display initial type
output.innerHTML = 'Current Type: ' + inputColor.type;
function getTypeAndChange() {
if(inputColor.type == 'color'){
var currentValue = inputColor.value;
inputColor.type = 'text';
inputColor.value = currentValue;
output.innerHTML = 'Type changed to: ' + inputColor.type + '<br>Value: ' + currentValue;
}
}
function resetToColor() {
var currentValue = inputColor.value;
inputColor.type = 'color';
inputColor.value = currentValue;
output.innerHTML = 'Type reset to: ' + inputColor.type + '<br>Value: ' + currentValue;
}
</script>
</body>
</html>
The output shows the current input type and allows you to toggle between color and text types −
Color Picker: [Blue Color Picker] [Get Type & Change to Text] [Reset to Color] Current Type: color (After clicking "Get Type & Change to Text": Type changed to: text, Value: #0000ff) (After clicking "Reset to Color": Type reset to: color, Value: #0000ff)
Example − Checking Multiple Input Types
Following example shows how to check and display the type property of different input elements −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Input Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form>
<p>Color: <input type="color" id="colorField" value="#ff0000"></p>
<p>Text: <input type="text" id="textField" value="Sample text"></p>
<p>Email: <input type="email" id="emailField" value="user@example.com"></p>
</form>
<button onclick="showAllTypes()">Show All Input Types</button>
<div id="typeDisplay" style="margin-top: 10px; padding: 8px; background-color: #f9f9f9;"></div>
<script>
function showAllTypes() {
var colorType = document.getElementById("colorField").type;
var textType = document.getElementById("textField").type;
var emailType = document.getElementById("emailField").type;
document.getElementById("typeDisplay").innerHTML =
'Color input type: ' + colorType + '<br>' +
'Text input type: ' + textType + '<br>' +
'Email input type: ' + emailType;
}
</script>
</body>
</html>
Clicking the button displays the type property of each input element −
Color: [Red Color Picker] Text: [Sample text] Email: [user@example.com] [Show All Input Types] (After clicking: Color input type: color, Text input type: text, Email input type: email)
Example − Dynamic Type Conversion
Following example demonstrates converting between different input types dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Type Conversion</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<div>
<label>Input Element: </label>
<input type="color" id="dynamicInput" value="#00ff00">
</div>
<div style="margin-top: 10px;">
<button onclick="changeToText()">Change to Text</button>
<button onclick="changeToColor()">Change to Color</button>
<button onclick="changeToEmail()">Change to Email</button>
</div>
<div id="status" style="margin-top: 10px; padding: 8px; border: 1px solid #ccc;"></div>
<script>
var input = document.getElementById("dynamicInput");
var status = document.getElementById("status");
updateStatus();
function changeToText() {
input.type = "text";
input.value = "Text input";
updateStatus();
}
function changeToColor() {
input.type = "color";
input.value = "#ff6600";
updateStatus();
}
function changeToEmail() {
input.type = "email";
input.value = "example@domain.com";
updateStatus();
}
function updateStatus() {
status.innerHTML = 'Current type: ' + input.type + '<br>Current value: ' + input.value;
}
</script>
</body>
</html>
The buttons allow you to dynamically change the input type and observe how both the appearance and functionality change −
Input Element: [Green Color Picker] [Change to Text] [Change to Color] [Change to Email] Current type: color Current value: #00ff00
Conclusion
The HTML DOM Input Color type property provides a way to get or set the type attribute of an input element. This property is particularly useful for creating dynamic forms where input types need to be changed based on user interactions or application logic.
210 Views
