HTML fieldset/legend tags
HTML provides some tags that place an emphasis on certain content and at the same time add some style to a webpage.
This tutorial focuses on:
- The <fieldset> tag
- The <legend> tag
- Combinging a fieldset/legend with a form
The <fieldset> tag
The <fieldset> tag creates a box around content that places emphasis on it.
Example:
<fieldset>
<p>HTML is a markup language</p>
<p>HTML is used for the web</p>
<p>HTML is good to know</p>
<p>Another web language is Javascript</p>
</fieldset>
Output:
The <legend> tag
The <legend> tag will add some title text to the box created by the <fieldset> tag. This title text will appear at the top left of the box created by the <fieldset> tag.
Example:
<fieldset>
<legend>Web languages</legend>
<p>HTML is a markup language</p>
<p>HTML is used for the web</p>
<p>HTML is good to know</p>
<p>Another web language is Javascript</p>
</fieldset>
Output:
Combining a fieldset/legend with a form
A fieldset/legend combination can be used with just about any content you want, but using it with forms is probably the best option.
Adding a fieldset/legend to a form makes the form stand out, adds style to it, and makes it more official by having a title at the top of it.
A form without a fieldset/legend:
<form>
Name: <input type="text" name="Name" size="15" />
<br />
Email: <input type="email" name="Email" size="15" />
<br />
Message:
<br />
<textarea cols="20" rows="20"></textarea>
<br />
<input type="submit" value="Submit" />
</form>
Output:
The same form but this time with a fieldset/legend:
<form>
<fieldset>
<legend>Contact Us</legend>
Name: <input type="text" name="Name" size="15" />
<br />
Email: <input type="email" name="Email" size="15" />
<br />
Message:
<br />
<textarea cols="20" rows="20"></textarea>
<br />
<input type="submit" value="Submit" />
</fieldset>
</form>
Output: