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

08 Jul, 2020
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
<!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>
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
<!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>
Output:
CSS-Misc
HTML-Misc
HTML-Tags
HTML5
How To
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Java Tutorial
How to filter object array based on attributes?
How to Align Text in HTML?
How to Install FFmpeg on Windows?
How to Set Git Username and Password in GitBash?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property