The fieldset element is used to group related form elements together. It is a block element. Therefore its parent elements can be div, form etc. It can contain both block and inline elements as child elements. fieldset elements can be nested within each other.
The legend element is a required child element of fieldset. It is an inline element that contains a name for the group of elements contained by fieldset. A fieldset element can contain only one legend element.
Example:
<form action="">
<p>One form Element: <input type="text" id="test1"></p>
<p>Two form element: <input type="text" id="test2"></p>
<p>Three form element: <input type="text" id="test3"></p>
<fieldset>
<legend>test 2</legend>
<p>Oneone form element: <input type="text" id="test21"></p>
<p>Onetwo form element: <input type="text" id="test22"></p>
<p>Onethree form element: <input type="text" id="test23"></p>
</fieldset>
<p><input type="submit" id="submit1"></p>
</form>
The above image shows how the code is rendered in Firefox. Note how the text of the legend element appears at the top left side of the grouped form elements.
