Fieldset
The <fieldset> element provides a container for related form controls, and the <legend> element acts as a heading to identify the group.
<form>
<fieldset>
<legend>List your hobbies</legend>
<div class="field">
<label class="label" for="hobby1">Hobby 1</label>
<div class="control">
<input name="text_hobby1" id="hobby1" class="input" type="text" />
</div>
</div>
<div class="field">
<label class="label" for="hobby2">Hobby 2</label>
<div class="control">
<input name="text_hobby2" id="hobby2" class="input" type="text" />
</div>
</div>
<div class="field">
<label class="label" for="hobby3">Hobby 3</label>
<div class="control">
<input name="text_hobby3" id="hobby3" class="input" type="text" />
</div>
</div>
</fieldset>
</form>In long forms, groups of fields with a common purpose should be grouped together in a fieldset wrapper. Within the fieldset, include a legend element describing the purpose of the fieldset. Nesting fieldsets should be avoided.
The following form controls classes are supported: .label, .input, .textarea, .select, .checkbox, .radio, .button, .help.
Each of them should be wrapped in a .control container
When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.
Use the is-medium or is-large class to create larger input elements.
Using <fieldset> and <legend> ensures that the text description is read to screen reader users when the grouping is navigated to.
Fieldset and legend should only be used to associate groups of controls when a higher level description is necessary. Single checkboxes or basic radio buttons (such as male/female for gender) that make sense from their labels alone do not require fieldset and legend.