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 Fieldset Object
The HTML DOM Fieldset object represents the HTML <fieldset> element, which groups related form controls and labels. This object provides properties and methods to dynamically create, access, and manipulate fieldset elements using JavaScript.
The <fieldset> element is commonly used to group form inputs, checkboxes, radio buttons, and other controls together with an optional <legend> element that provides a caption for the group.
Syntax
Following is the syntax for creating a fieldset element using JavaScript −
var fieldsetElement = document.createElement("FIELDSET");
To access an existing fieldset element by its ID −
var fieldsetElement = document.getElementById("fieldsetId");
Properties
Following are the properties available for the Fieldset object −
| Property | Description |
|---|---|
| disabled | Sets or returns whether the fieldset is disabled. When true, all form controls within the fieldset are disabled. |
| form | Returns a reference to the form element that contains the fieldset. Read-only property. |
| name | Sets or returns the value of the name attribute of the fieldset element. |
| type | Returns the string "fieldset" indicating the element type. Read-only property. |
Creating a Fieldset Element
Following example demonstrates how to create a fieldset element dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Create Fieldset Element</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Fieldset Object Example</h2>
<p>Create a fieldset element by clicking the button below:</p>
<button onclick="createField()">CREATE FIELDSET</button>
<br><br>
<script>
function createField() {
var f = document.createElement("FIELDSET");
var legend = document.createElement("LEGEND");
var legendText = document.createTextNode("User Information");
legend.appendChild(legendText);
f.appendChild(legend);
var txt = document.createTextNode("FIELDSET element created with legend");
f.appendChild(txt);
document.body.appendChild(f);
}
</script>
</body>
</html>
The output shows a button that creates a fieldset with a legend when clicked −
Fieldset Object Example Create a fieldset element by clicking the button below: [CREATE FIELDSET] (After clicking: A bordered fieldset appears with "User Information" as legend and text inside)
Working with Fieldset Properties
Example − Disabled Property
Following example shows how to use the disabled property to enable or disable a fieldset −
<!DOCTYPE html>
<html>
<head>
<title>Fieldset Disabled Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form>
<fieldset id="userInfo">
<legend>Personal Details</legend>
<label>Name: <input type="text" name="name"></label><br><br>
<label>Email: <input type="email" name="email"></label><br><br>
<label>Phone: <input type="tel" name="phone"></label>
</fieldset>
</form>
<br>
<button onclick="toggleFieldset()">Toggle Fieldset</button>
<p id="status">Status: Enabled</p>
<script>
function toggleFieldset() {
var fieldset = document.getElementById("userInfo");
fieldset.disabled = !fieldset.disabled;
var status = fieldset.disabled ? "Disabled" : "Enabled";
document.getElementById("status").textContent = "Status: " + status;
}
</script>
</body>
</html>
Clicking the toggle button alternately enables and disables all form controls within the fieldset −
Personal Details Name: [input field] Email: [input field] Phone: [input field] [Toggle Fieldset] Status: Enabled
Example − Form and Name Properties
Following example demonstrates accessing the form, name, and type properties −
<!DOCTYPE html>
<html>
<head>
<title>Fieldset Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form id="myForm" name="registrationForm">
<fieldset id="contactFieldset" name="contactInfo">
<legend>Contact Information</legend>
<input type="text" placeholder="Enter your name">
</fieldset>
</form>
<br>
<button onclick="showProperties()">Show Properties</button>
<p id="output"></p>
<script>
function showProperties() {
var fieldset = document.getElementById("contactFieldset");
var info = "Fieldset Properties:<br>";
info += "Name: " + fieldset.name + "<br>";
info += "Type: " + fieldset.type + "<br>";
info += "Form ID: " + fieldset.form.id + "<br>";
info += "Form Name: " + fieldset.form.name;
document.getElementById("output").innerHTML = info;
}
</script>
</body>
</html>
Clicking the button displays the fieldset's properties −
Fieldset Properties: Name: contactInfo Type: fieldset Form ID: myForm Form Name: registrationForm
Accessing Fieldset Collections
You can also access all fieldset elements in a document using document.getElementsByTagName("fieldset") or access fieldsets within a specific form using form.elements.
Example
<!DOCTYPE html>
<html>
<head>
<title>Access Multiple Fieldsets</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form>
<fieldset name="section1"><legend>Section 1</legend><input type="text"></fieldset>
<fieldset name="section2"><legend>Section 2</legend><input type="email"></fieldset>
</form>
<br>
<button onclick="countFieldsets()">Count Fieldsets</button>
<p id="count"></p>
<script>
function countFieldsets() {
var fieldsets = document.getElementsByTagName("fieldset");
var message = "Total fieldsets found: " + fieldsets.length + "<br>";
for (var i = 0; i < fieldsets.length; i++) {
message += "Fieldset " + (i + 1) + " name: " + fieldsets[i].name + "<br>";
}
document.getElementById("count").innerHTML = message;
}
</script>
</body>
</html>
The output displays information about all fieldsets in the document −
Total fieldsets found: 2 Fieldset 1 name: section1 Fieldset 2 name: section2
Conclusion
The HTML DOM Fieldset object provides essential properties like disabled, form, name, and type for dynamically managing fieldset elements. Use document.createElement("FIELDSET") to create new fieldsets or access existing ones by ID to manipulate form groupings programmatically.
212 Views
