Home arrow Web Standards arrow Page 8 - Web Forms

Web Forms

There are many ways to mark up a form, including using a table or the label tag. Take a look at these methods and tips to ensure your forms are structured so they benefit the user and the site owner. Also covered are some CSS techniques to customize the forms. (From the book Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm, from Apress, 2004, ISBN: 1590593812.)

Author Info:
By: Apress Publishing
Rating: 5 stars5 stars5 stars5 stars5 stars / 76
August 23, 2004
  1. · Web Forms
  2. · Method B: Tableless, but Cramped
  3. · The label E
  4. · Defining Style
  5. · tabindex Attribute
  6. · Styling Forms
  7. · Using label
  8. · Use fieldset to Group Form Sections
  9. · Three-dimensional legend

print this article

Web Forms - Use fieldset to Group Form Sections
(Page 8 of 9 )

Use <fieldset> to group form sections

Using the <fieldset> element is a handy way of grouping form controls into sections. Additionally, adding a descriptive will, in most browsers, add a stylish border around the form controls that you’re grouping. Did I say stylish? Well, I happen to like the border, and with a little CSS, we can make it even more attractive.

First though, let’s take a look at what the markup looks like when creating field sets. We’ll add one to our example form:

<form action="/path/to/script" id="thisform" method="post">
  <legend>Sign In</legend>
  <p><label for="name" accesskey="9" >Name:</label><br />
  <input type="text" id="name" name="name" tabindex="1" /></p>
  <p><label for="email">Email:</label><br />
  <input type="text" id="email" name="email" tabindex="2" /></p>
  <p><input type="checkbox" id="remember" name="remember"
  tabindex="3" />
  <label for="remember">Remember this info?</label></p>
  <p><input type="submit" value="submit" tabindex="4" /></p>

Figure 5-12 shows us how our form appears in a typical browser with the <fieldset> and <legend> tags added, along with the CSS that we’re applying to the elements. You’ll notice the stylish border that surrounds the form controls that fall within the <fieldset> tags, with the <legend> breaking the border at the top left of the box.


Figure 5-12. Our form example with the <fieldset> and <legend> added.

The reason I call it “stylish” is because, for a default rendering, with no CSS added at all, it’s rather impressive. And it can get even more interesting when we choose to add a bit more customization, which we’ll do next.

You may also begin to see how useful <fieldset> could be for grouping different sections of a form together. For instance, if our example form was the first part of a larger form that had other groups contained in it, using <fieldset> to visually box those sections off is a semantically rich way to make our forms more organized and readable.

Adding style to <fieldset> and <legend>

We can customize the appearance of the default <fieldset> border and <legend> text with CSS just as easily as with any other element. First, let’s change the border’s color and width, and then we’ll modify the text itself.

To stylize <fieldset>'s border, making it a bit more subtle, we’ll use the following CSS:


- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials