How to achieve <fieldset> like effect without using <fieldset> tag ?

Forms are used to make a group for more understandable of all users and clients, as related data fields are easier to identify. It also makes it easier for users to concentrate on smaller and more clearly defined groups by understanding them one by one as an individual rather than try to grasp the entire form at once.

The grouping has to be created visually for users and in the code for easier data handling. By default, the <fieldset> and <legend> elements are used to group the related form data fields. 

Example 1: The below example shows the usage of the default <fieldset> tag in HTML.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <h2>Welcome To GFG</h2>
  
    <fieldset>
        <legend>
            Shipping Address:
        </legend>
        <div>
            <label for="shipping_name">
                Name:
            </label>
            <br>
            <input type="text" name="shipping_name"
                    id="shipping_name">
        </div>
  
        <div>
            <label for="shipping_street">
                Street:
            </label>
            <br>
            <input type="text" name="shipping_street"
                    id="shipping_street">
        </div>
    </fieldset>
  
    <fieldset>
        <legend>
            Billing Address:
        </legend>
        <div>
            <label for="billing_name">
                Name:
            </label>
            <br>
            <input type="text" name="billing_name"
                    id="billing_name">
        </div>
        <div>
            <label for="billing_street">
                Street:
            </label>
            <br>
            <input type="text" name="billing_street"
                    id="billing_street">
        </div>
    </fieldset>
</body>
  
</html>

chevron_right


Output:



Alternative to the fieldset effect: The effect of the fieldset tag can be achieved using custom CSS, in case the user does not want to use the <fieldset> tag. It uses a clever use of border, margin, and various other CSS properties to achieve a similar effect.

Example 2: The below example demonstrates the alternative fieldset effect.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        /* Defining a custom border on all
            sides except the top side */
        .custom-field {
            border: 4px solid;
            border-top: none;
            margin: 32px 2px;
            padding: 8px;
        }
  
        /* Defining the style of the 
        heading/legend for custom fieldset */
        .custom-field h1 {
            font: 16px normal;
            margin: -16px -8px 0;
        }
  
        /* Using float:left allows us to mimic
           the legend like fieldset. The 
           float:right property can also be 
           used to show the legend on right side */
  
        .custom-field h1 span {
            float: left;
        }
  
        /* Creating the custom top border to make
            it look like fieldset defining small 
            border before the legend. The width 
            can be modified to change position 
            of the legend */
        .custom-field h1:before {
            border-top: 4px solid;
            content: ' ';
            float: left;
            margin: 8px 2px 0 -1px;
            width: 12px;
        }
  
        /* Defining a long border after the 
        legend, using overflow hidden to 
        actually hide the line behind the 
        legend text. It can be removed
        for a different effect */
        .custom-field h1:after {
            border-top: 4px solid;
            content: ' ';
            display: block;
            height: 24px;
            left: 2px;
            margin: 0 1px 0 0;
            overflow: hidden;
            position: relative;
            top: 8px;
        }
    </style>
</head>
  
<body>
    <!-- Original fieldset tag 
        for comparison -->
    <fieldset>
        <legend>
            Fieldset 1 Legend
        </legend>
        Original Fieldset
    </fieldset>
  
    <!-- Custom fieldset which is created
        using custom CSS above -->
    <div class="custom-field">
        <h1>
            <span>
                Custom created Fieldset
            </span>
        </h1>
        <div>
            <label for="shipping_name">
                Name:
            </label>
            <br>
            <input type="text" 
                    name="shipping_name" 
                    id="shipping_name">
        </div>
        <div>
            <label for="shipping_street">
                Street:
            </label>
            <br>
            <input type="text"
                    name="shipping_street" 
                    id="shipping_street">
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.