Fieldset Tag In HTML5

Introduction

 
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 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.
  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> 
Output
 
 
fieldset.jpg


Similar Articles