In this article, you will learn about the implementation and use of the fieldset tag of HTML5.
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 the name of the fieldset |
| 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>
-
- <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