fieldset tag in html with examples

Home » HTML » HTML Tags » fieldset tag in html with examples

fieldset tag in html with examples

Posted by 20Fingers2Brains on Tags: HTML , HTML Tags

The <fieldset> tag is used for grouping related form elements. By using the fieldset tag and the legend tag, you can make your forms much easier to understand for your users.
The <fieldset> tag draws a box around the related elements.
The <legend> tag defines a caption for the <fieldset> element. The <fieldset> is supported in all major browsers.

Example :

     <html>
     <head>
     <title>Fieldset</title>
     </head>
     <body>
     <fieldset>
     <legend>Employee Information</legend>
     EmpId:<input type="text"><br/>
     Name :<input type="text">
     </fieldset>
     </body>
     </html>

Demo :

In the above example, we have used fieldset element to render a form like structure.

fieldset and Style :

<html>
<head>
<title>FieldsetStyle</title>
<style type="text/css">
fieldset
{
font-family:comic sans ms;
color:green;
font-weight:bold;
font-size:30px;
}
</style>
</head>
<body>
<fieldset>
<legend>Employee Information<legend>
EmpId:<input type="text"><br/>
Name :<input type="text">
</fieldset>
</body>
</html>

Demo :

In the above example, we have render the fieldset element. We have also applied the CSS to it.

fieldset and Javascript :

<html>
<head><title>FieldsetJavascript</title>
<style type="text/css">
fieldset
{
font-family:comic sans ms;
color:green;
font-weight:bold;
font-size:30px;
}
</style>
<script type="text/javascript">
function fieldset()
{
var element=document.createElement("fieldset");
var text=document.createTextNode("EMP-ID:");
var element2=document.createElement("input");
element2.setAttribute("type","text");
element.appendChild(text);
element.appendChild(element2);
document.getElementById("fieldset").appendChild(element);
}
</script>
</head>
<body>
<div id="fieldset">
</div>
<input type="button" id="b1" value="Press" onclick="fieldset()">
</body>
</html>

Demo :

In the above example, we have used javascript to create the fieldset element. On button click the fieldset element is created and rendered on the UI.