What is <legend> tag in Salesforce?

Hi Aditya,

Before legend tag you should know about fieldset tag i.e.

<fieldset> – It is used to group related elements in a form.

<legend> – It defines a caption for the <fieldset> element.

Let’s take an example :

 <aura:component>    
    <form>
        <fieldset>
            <legend>Select your gender</legend>
            <lightning:input type="radio" label="Male" name="gender" value="0" />
            <lightning:input type="radio" label="Female" name="gender" value="1"/>            
        </fieldset>
    </form>
 </aura:component>

You can see, fieldset border missing and legends are not also aligned properly.

Fixes:

To resolve this problem I am using some custom CSS code on <fieldset> and <legend> HTML tag

.THIS .clsFieldset {    
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px groove;
    display: block;    
 }
 
 .THIS .clsLegend {    
    padding-left: 2px;
    padding-right: 2px;
    border: none;
    display: block;
 }

After this you will get,