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.

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

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now