HTML Fieldset and Legend: Grouping Form Elements

Large forms can be confusing for users, so it ’ s good practice to group together related form controls. The

<fieldset> and <legend> elements do exactly this — help you group controls.

The <fieldset> element creates a border around the group of form controls to show that they are related.

The <legend> element allows you to specify a caption for the <fieldset> element, which acts as a title for the group of form controls. When used, the <legend> element should always be the first child of the <fieldset> element.

<form action="/competition.aspx" method="post" name="frmComp">
<fieldset>
<legend> <em> Contact Information </em> </legend>
	<label> First name: <input type="text" name="txtFName" size="20" />
	</label> <br>
	<label> Last name: <input type="text" name="txtLName" size="20" /> </label>
<br>
	<label> E-mail: <input type="text" name="txtEmail" size="20" /> </label>
<br>
</fieldset>
</form>

Live Preview

<form action="http://www.example.org/competition.aspx" method="post" name="frmComp">
<fieldset>
<legend> <em> Competition Question </em> </legend>
How tall is the Eiffel Tower in Paris, France? <br>
	<label> <input type="radio" name="radAnswer" value="584" />	584ft </label> <br>
	<label> <input type="radio" name="radAnswer" value="784" />	784ft </label> <br>
	<label> <input type="radio" name="radAnswer" value="984" /> 984ft </label> <br>
	<label> <input type="radio" name="radAnswer" value="1184" /> 1184ft </label> <br>
</fieldset>
</form>

Live Preview

<form action="/competition.aspx" method="post" name="frmComp">
	<fieldset>
	<legend> <em> Tiebreaker Question </em> </legend>
	<label> In 25 words or less, say why you would like to win $10,000:
	 <textarea name="txtTiebreaker" rows="10" cols="40"> </textarea>
	</label>
</fieldset>
<fieldset>
	<legend> <em> Enter competition </em> </legend>
	<input type="submit" value="Enter Competition" />
</fieldset>
</form>

Live Preview