Creating a Form with Fieldset Tag

Introduction

The HTML <fieldset> tag is used to group HTML elements together, and it can help to create organized and well-structured documents. And using the

tag can group the related fields in a form to display form fields in a more organized manner.

In this lab, we will demonstrate how you can use the <fieldset> tag to create forms structured and organized.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/FormsandInputGroup -.-> html/form_valid("`Form Validation`") html/FormsandInputGroup -.-> html/form_group("`Grouping Form Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70756{{"`HTML Form Grouping`"}} html/head_elems -.-> lab-70756{{"`HTML Form Grouping`"}} html/para_br -.-> lab-70756{{"`HTML Form Grouping`"}} html/forms -.-> lab-70756{{"`HTML Form Grouping`"}} html/form_valid -.-> lab-70756{{"`HTML Form Grouping`"}} html/form_group -.-> lab-70756{{"`HTML Form Grouping`"}} end

Creating HTML Page

Create a file named index.html and write the basic structure of the HTML page.

<!doctype html>
<html>
  <head>
    <title>Creating a Form with Fieldset Tag</title>
  </head>
  <body></body>
</html>

Creating the Form with Fieldset

Add a form element to the HTML body, and then use the <fieldset> tag to group related form fields. We will also add the label tag to the form elements to add a description to the input field.

<form>
  <fieldset>
    <legend>User Details</legend>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="firstname" /><br /><br />
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lastname" /><br /><br />
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" /><br /><br />
  </fieldset>
  <fieldset>
    <legend>Account Details</legend>
    <label for="uname">Username:</label>
    <input type="text" id="uname" name="username" /><br /><br />
    <label for="pass">Password:</label>
    <input type="password" id="pass" name="password" /><br /><br />
  </fieldset>
  <input type="submit" value="Submit" />
</form>

The code above will create a form that is structured into two fieldsets. The first fieldset groups the user's personal details, and the second fieldset groups the account details. You might notice that we used the label tag to provide some context for the fields.

Adding CSS

We can style the fieldset using CSS to give it a proper design. We can add a border, background-color, and some padding to make the fieldset look better.

<style>
  fieldset {
    padding: 10px;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    margin: 5px;
    background-color: #f8f8f8;
  }
</style>

Open the HTML file on your browser to view the form and test it out.

Summary

Fieldset tag creates an organized and well-structured document. It is useful for creating forms. use label tags to provide context for the input fields. Fieldset tag groups related form fields and adds a border around the related fields. Finally, the CSS styling provides design to the fieldset that makes it look better.

HTML Form Grouping