Fieldset and Legend tag

Have you seen something similar to the image above and wanted know how to accomplish this?Or have you been looking for a cool way to style your forms. Either way you’ve found yourself in the right place. Recently i was asked by my employer to create something similar to the image above. While it seemed easy, i couldn’t seem to find the right words to google, nor did i know how to properly describe it. I scrapped a webpage that i found with that format, however after googling my findings, i was pointed to a paid UI library by the name of v-input that i have linked to this post. Slightly discouraged by the paid aspect of my findings, I searched the page to find a better description. After googling the description I discovered the <fieldset> tag.

The fieldset element is used to group data items in a webform. Using this element will place a box around the items and present them in a nice and neat style format. The photo below is an example of 3 fieldsets.

The proper syntax to accomplish this is as follows

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>
<input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>
<input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>
<input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

The Legend element is used to define the caption or title of the field set. So the coding example above would generate a fieldset that looks like the following.

Hopefully this break down have saved you some time, or just made your forms more vibrant. Either way Happy Coding!!!!!!!!