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:
• Text Input Box Basics
• HTML abbr and acronym Tag
•
• HTML dfn Tag
• Webpage DOCTYPE Declarations Explained
• HTML Bulleted or Unordered List
• HTML5 Spinbox Control
• Providing Alternate and Title Text for an Image
• HTML Linking Basics
• HTML Frames Basics
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
Follow @Stephen Bucaro
General Web Design
