RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-fieldset-form-attribute/ below:

HTML <fieldset> form Attribute - GeeksforGeeks

HTML <fieldset> form Attribute

Last Updated : 11 Jul, 2025

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: html


 <!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 &lt;fieldset&gt; 
      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 by id="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 whose id is "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".

Purpose of the form Attribute:

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 form attribute, 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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4