Use fieldset to Organize Form Elements
By Stephen Bucaro
The <fieldset></fieldset> tags provide a way to organize groups
of related form input elements. The <fieldset> tag draws a box around the
related elements. Shown below is example code that uses the html fieldset tags.
<form method="get" action="program_name" style="width:240px;">
<fieldset>
Name: <input type="text"><br />
Dept: <input type="text"><br />
Title: <input type="text"><br />
Email: <input type="text"><br />
</fieldset>
<fieldset>
<input type="checkbox" name="Red">Red<br />
<input type="checkbox" name="Green">Green<br />
<input type="checkbox" name="Blue">Blue<br />
</fieldset>
</form>
Shown below is how fieldsets would appear on a web page.
The fieldset tags are commonly used along with the <legend></legend> tags,
which provide a way to label the groups of related form elements.
Shown below is example code that uses the legend tags along with the fieldset tags.
<form method="get" action="program_name" style="width:240px;">
<fieldset>
Name: <input type="text"><br />
Dept: <input type="text"><br />
Title: <input type="text"><br />
Email: <input type="text"><br />
</fieldset>
<fieldset>
<legend>Color Preferences</legend>
<input type="checkbox" name="Red">Red<br />
<input type="checkbox" name="Green">Green<br />
<input type="checkbox" name="Blue">Blue<br />
</fieldset>
</form>
Placing a class or id attribute inside the opening <fieldset> allows
you to apply CSS styles to the border and background of the fieldset.
More HTML Code:
• HTML title Tag
• Keywords Meta Tag Generator
• Make an HTML Element Editable
• How to Write and Run HTML
• Changing the Size of an Image on Your Webpage
• Webpage DOCTYPE Declarations Explained
• Easy Code to Add Google Site Search to Your Website
• HTML DIV Basics
• XHTML Basics
• HTML Special Characters - Character Entities
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
