Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

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:
• HTML Text Tags Basics
• HTML SPAN Basics
• Providing Alternate and Title Text for an Image
• Line Breaks in HTML
• Most Usefull ASCII Character Code Entities
• Aligning an Image on Your Web Page
• HTML5 Slider Control
• HTML Special Characters - Character Entities
• Webpage DOCTYPE Declarations Explained
• Web Color Names Table


Follow Stephen Bucaro Follow @Stephen Bucaro

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