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 form Property
The Input Color form property in HTML DOM returns a reference to the form element that contains the color input. This read-only property is useful for accessing the parent form of a color input element programmatically.
Syntax
Following is the syntax for accessing the form property −
inputColorObject.form
Return Value
The form property returns a reference to the HTMLFormElement object that contains the color input. If the input is not inside a form, it returns null.
Example − Getting Form Reference
Following example demonstrates how to get the form reference of a color input element −
<!DOCTYPE html>
<html>
<head>
<title>Input Color Form Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form id="formForColorsInput">
Color Picker: <input type="color" id="Color" value="#ff0000">
</form>
<button onclick="getFormID()">Get Form ID</button>
<div id="divDisplay"></div>
<script>
function getFormID() {
var inputColor = document.getElementById("Color");
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = 'Form ID for color input: ' + inputColor.form.id;
}
</script>
</body>
</html>
The output displays the form ID when the button is clicked −
Form ID for color input: formForColorsInput
Example − Checking Form Existence
Following example shows how to check if a color input is inside a form −
<!DOCTYPE html>
<html>
<head>
<title>Check Form Existence</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form id="myForm">
<label>Inside Form: <input type="color" id="colorInForm" value="#00ff00"></label>
</form>
<br><br>
<label>Outside Form: <input type="color" id="colorOutside" value="#0000ff"></label>
<br><br>
<button onclick="checkForms()">Check Form Status</button>
<div id="result"></div>
<script>
function checkForms() {
var colorInForm = document.getElementById("colorInForm");
var colorOutside = document.getElementById("colorOutside");
var result = document.getElementById("result");
var status1 = colorInForm.form ? "Form ID: " + colorInForm.form.id : "No form";
var status2 = colorOutside.form ? "Form ID: " + colorOutside.form.id : "No form";
result.innerHTML = "<p>Color input inside form: " + status1 + "</p>" +
"<p>Color input outside form: " + status2 + "</p>";
}
</script>
</body>
</html>
The output shows the form status for both color inputs −
Color input inside form: Form ID: myForm Color input outside form: No form
Example − Accessing Form Methods
Following example demonstrates how to use the form reference to access form methods −
<!DOCTYPE html>
<html>
<head>
<title>Access Form Methods</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form id="colorForm">
<label>Choose Color: <input type="color" id="myColor" value="#ff5733"></label>
<input type="text" placeholder="Your name" value="John Doe">
</form>
<br>
<button onclick="resetForm()">Reset Form</button>
<button onclick="getFormInfo()">Get Form Info</button>
<div id="info"></div>
<script>
function resetForm() {
var colorInput = document.getElementById("myColor");
colorInput.form.reset();
document.getElementById("info").textContent = "Form has been reset!";
}
function getFormInfo() {
var colorInput = document.getElementById("myColor");
var form = colorInput.form;
var info = document.getElementById("info");
info.innerHTML = "<p>Form ID: " + form.id + "</p>" +
"<p>Form elements count: " + form.elements.length + "</p>";
}
</script>
</body>
</html>
This example shows how to reset the form and get information about it using the form property reference −
Form ID: colorForm Form elements count: 2
Key Points
-
The form property is read-only and cannot be modified.
-
It returns
nullif the color input is not contained within a form element. -
The returned reference can be used to access all form properties and methods like
reset(),submit(), etc. -
This property is particularly useful when you need to manipulate the parent form based on color input interactions.
Browser Compatibility
The Input Color form property is supported in all modern browsers that support the HTML5 color input type, including Chrome, Firefox, Safari, Edge, and Opera.
Conclusion
The Input Color form property provides a convenient way to access the parent form of a color input element. It returns a reference to the HTMLFormElement containing the color input, or null if the input is not within a form. This property is essential for form manipulation and validation scenarios involving color inputs.
151 Views
