How we can group data in HTML forms?

We use the <fieldset> tag, to group related data in HTML forms. This tag creates a box around the related elements on the web page. The <legend> tag is used inside the <fieldset> tag to give a caption to the group or name to the group.



Example 1

Following is an example to group data in HTML forms using the <legend> tag inside the <fieldset> tag −

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="meta tag in the web document"> <meta name="keywords" content="HTML,CSS"> <meta name="author" content="lokesh"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <fieldset> <legend>Employee Details</legend> Employee Name<br> <input type="text" name="Ename"> <br> Employee ID<br> <input type="text" name="Eid"> <br> Employee Address<br> <input type="text" name="Eid"> <br> </fieldset> </form> </body> </html>

Example 2

You can try to run the following code to group data in HTML forms −

<!DOCTYPE html> <html> <body> <form> <fieldset> <legend>Student Information:</legend> Student Name:<br> <input type="text" name="sname"> <br> Student Subject:<br> <input type="text" name="ssubject"> <br> </fieldset> </form> </body> </html>