In this article you will learn about the implementation and use of the fieldset tag of HTML5.
Fieldset Tag
The <fieldset> tag groups related form elements. It is like a box; in other words it draws a box around related elements.
It must start with a <legend>tag because the <legend> tag defines the title of the field set.
By using the <fieldset>tag and the <legend> tag you can make your form much easier to understand for the users.
Syntax
The syntax of the <fieldset> tag in HTML5 is:
<fieldset>Controls</fieldset>
Browser Support
The <Fieldset> tag is supported by all major browsers.
Attributes of <fieldset> tag
HTML5 has added some new attributes; they are:
| Attribute |
Value |
Description |
| disabled |
disabled |
Specify fieldset will be displayed or not |
| name |
text |
Specify name of field set |
| form |
name of form |
Define it is related to the form |
Sample
A form might contain a few fields about the id, first name, last name and address and some fields asking for opinions. The following is the complete source code of a sample use of the <fieldset> tag in HTML5.
<DOCTYPE html>
<html>
<head>
<title>Fieldset tag in HTML5</title>
</head>
<body>
<h1>
Fieldset Tag in HTML5</h1>
<!--name attribute specifies name of the attribute.Here Person represent name -->
<fieldset name="Person">
<legend>Employee Details </legend>Employee Id<input type="text" name="EmpId"><br>
Employee FirstName<input type="text" name="EmpFName"><br>
Employee LastName<input type="text" name="EmpLName"><br>
Employee Address<input type="text" name="EmpAdd"><br>
</fieldset>
<fieldset>
<legend>Programming Skills </legend>Programming Language<input type="text" name="proglang"><br>
<input type="checkbox" name="c">C Language<br>
<input type="checkbox" name="Java">Java Language<br>
<input type="checkbox" name="C#">C# Language<br>
<input type="checkbox" name="Oracle">Oracle Language<br>
</fieldset>
</body>
</html>
Output
![fieldset.jpg]()