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 abbr and acronym Tag
• The Font Tag
• HTML Table Basics
• How to Code HTML Lists
• Use HTML Target Attribute to Specify Where to Open Document
• Webpage DOCTYPE Declarations Explained
• The HTML Head Tag
• HTML Frames Basics
• HTML Bulleted or Unordered List
• Aligning an Image on Your Web Page
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
