HTML fieldset form Attribute
The form attribute in the <fieldset> tag specifies which <form> element the <fieldset> belongs to.
However, when the <fieldset> is not inside the <form> (i.e., outside of the <form> element), the form attribute is used to explicitly link the <fieldset> to a specific form.
Syntax
<fieldset form="form_id">Attribute Values:
| Value | Description |
|---|---|
form_id | The form attribute contains the form_id, which specifies the form that the <fieldset> element belongs to. The value should be the id of a <form> element. |
Example:
<!DOCTYPE html>
<html>
<head>
<title>
HTML fieldset form Attribute
</title>
<style>
h1,
h2,
.title {
text-align: center;
}
fieldset {
width: 50%;
margin-left: 22%;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
HTML <fieldset>
form Attribute
</h2>
<form id="mygeeks">
<div class="title">
Suggest article for video:
</div>
</form>
<fieldset form="mygeeks">
<legend>JAVA:</legend>
Title:
<input type="text">
<br> Link:
<input type="text">
<br> User ID:
<input type="text">
</fieldset>
<br>
<fieldset form="mygeeks">
<legend>PHP:</legend>
Title:
<input type="text">
<br> Link:
<input type="text">
<br> User ID:
<input type="text">
</fieldset>
</body>
</html>
Output:
In this example:
<form id="mygeeks">: A form element identified byid="mygeeks". It contains no form controls directly under it but serves as a logical container for the inputs defined in the subsequent fieldsets.<div class="title">: A division formatted with centered text, serving as a section title within the form.
- Two <fieldset> Elements:
- Both fieldsets use the
form="mygeeks"attribute, explicitly associating them with the form whoseidis “mygeeks”. This connection allows inputs within these fieldsets to be part of the “mygeeks” form data, even though they are not nested within the<form>tag in the HTML structure. - First <fieldset>
<legend>: Defines a caption for the fieldset, “JAVA:”, indicating that the inputs within this fieldset are related to Java topics.- Inputs: Contains three input fields for “Title”, “Link”, and “User ID”. Each label is followed by an input field, separated by line breaks (
<br>).
- Second <fieldset>:
- Similar to the first, with a <legend> of “PHP:”, and the same structure of inputs for “Title”, “Link”, and “User ID”.
- Both fieldsets use the
Purpose of the
formAttribute:The form attribute of the <fieldset> tag links the fieldset to a form elsewhere in the HTML document. This is particularly useful in complex web pages where the form elements are not physically contained within the <form> tag due to styling or layout requirements. By using the
formattribute, developers can maintain a logical association between the <fieldset> and its corresponding <form> without altering the structure of the HTML document.
Supported Browsers
The browser supported by HTML <fieldset> form Attribute are listed below:
- Google Chrome
- Edge 12 and above
- Internet Explorer
- Firefox
- Opera
- Safari
Key Points
- By default, a <fieldset> is part of the nearest enclosing <form> element.
- A <fieldset> element located outside a form (but still a part of the form).
- It allows grouping form elements in a logical structure, making the form more organized and accessible.
