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 DIV Basics
• How to Use a Meta Redirect
• Using col and colgroup to Apply Attributes to a Table Column
• Add an Image to a Web Page
• Use fieldset to Organize Form Elements
• Wrapping Text Around Images
• HTML Linking Basics
• Set Form Controls Tab Order With tabindex Attribute
• Can Enterprise Applications Be Made Using HTML5?
• HTML Text Tags Basics
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
