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:
• The Heading Tags
• HTML Select List Basics
• Add an Image to a Web Page
• Divide a Table Into Head (thead), Body (tbody), and Footer (tfoot) Sections
• HTML Editors
• Nesting HTML Lists
• Use Meta Tags for Search Engine Optimization
• Form Input Labels
• How to Write and Run HTML
• HTML Numbered or Ordered List
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
