Fieldset Tag In HTML5


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.
The syntax of the <fieldset> tag in HTML5 is:
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
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.
  1. <DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Fieldset tag in HTML5</title>  
  5. </head>  
  6. <body>  
  7.     <h1>  
  8.         Fieldset Tag in HTML5</h1>  
  9.     <!--name attribute specifies the name of the attribute.Here Person represent name -->  
  10.     <fieldset name="Person">  
  11.         <legend>Employee Details </legend>Employee Id<input type="text" name="EmpId"><br>  
  12.         Employee FirstName<input type="text" name="EmpFName"><br>  
  13.         Employee LastName<input type="text" name="EmpLName"><br>  
  14.         Employee Address<input type="text" name="EmpAdd"><br>  
  15.     </fieldset>  
  16.     <fieldset>  
  17.         <legend>Programming Skills </legend>Programming Language<input type="text" name="proglang"><br>  
  18.         <input type="checkbox" name="c">C Language<br>  
  19.         <input type="checkbox" name="Java">Java Language<br>  
  20.         <input type="checkbox" name="C#">C# Language<br>  
  21.         <input type="checkbox" name="Oracle">Oracle Language<br>  
  22.     </fieldset>  
  23. </body>  
  24. </html>