HTML5 fieldset Tag
Last Updated :
26 Dec, 2023
The <fieldset> tag in HTML5 is used to make a group of related elements in the form. This tag is a new addition in HTML5, serving as a container for grouping form elements. The <legend> tag is used to define the title for the child’s contents. The legend elements are the parent element.
Note: The <fieldset>
 tag also supports the Global Attribute and Event Attributes in HTML.
Syntax:
<fieldset>Contents</fieldset>
Attribute:
When set as a Boolean attribute within the <fieldset> , it disables all descendant form controls, making them uneditable and unsubmitted in the form, ensuring they do not respond to browsing events, typically displayed as grayed out.
|
It is used to specify the one or more forms that the <fieldset> element belongs to.
|
It is used to specify the name for the Fieldset element.
|
It is used to specify that the field set has autocompleted on or off value.
|
Example 1: This simple example illustrates the use of the <fieldset> tag in order to make a group of related elements in the HTML Form.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Document</ title >
< style >
body {
text-align: center;
}
input {
margin: 10px;
}
fieldset {
margin-top: 5px;
}
</ style >
</ head >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h2 >HTML < fieldset > Tag</ h2 >
< form >
< div class = "title" >
Employee Personal Details:
</ div >
< fieldset >
< legend >Details:</ legend >
Name:< input type = "text" >
Emp_Id:< input type = "text" >
Designation:< input type = "text" >
</ fieldset >
</ form >
</ body >
</ html >
|
Output:
Example 2: In this example, we will know the use of <fieldset> tag to make the group of related elements.
HTML
<!DOCTYPE html>
< html >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >HTML < fieldset > Tag</ h2 >
< form >
< div class = "title" >
Suggest article for video:
</ div >
< fieldset >
< legend >JAVA:</ legend >
Title:< input type = "text" >< br >
Link:< input type = "text" >< br >
User ID:< input type = "text" >
</ fieldset >
< br >
< fieldset >
< legend >PHP:</ legend >
Title:< input type = "text" >< br >
Link:< input type = "text" >< br >
User ID:< input type = "text" >
</ fieldset >
</ form >
</ body >
</ html >
|
 Output:
<fieldset> tag to group the related elementÂ
Supported Browsers:
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 15
- Safari 4
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...