Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Use fieldset to Organize Form Elements

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.

Name:
Dept:  
Title:   
Email: 
Red
Green
Blue

The fieldset tags are commonly used along with the <legend></legend> tags, which provide a way to label the groups of related form elements.

Personal Information Name:
Dept:  
Title:   
Email: 
Color Preferences Red
Green
Blue

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>
Personal Information
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:
• How to Troubleshoot an HTML Table
• How to Make a Table Scroll
• How to Use a Meta Redirect
• Add an Image to a Web Page
• Set Form Controls Tab Order With tabindex Attribute
• Block and Inline HTML Elements
• HTML Blockquote Basics
• HTML SPAN Basics
• The Font Tag
• HTML dfn Tag

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2021 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268