SunQuest
 
       Web Standards
  Home arrow Web Standards arrow Page 8 - Web Forms
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Dedicated Servers  
Actuate Whitepapers 
VeriSign Whitepapers 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
WEB STANDARDS

Web Forms
By: Apress Publishing
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 41
    2004-08-23

    Table of Contents:
  • Web Forms
  • Method B: Tableless, but Cramped
  • The label E
  • Defining Style
  • tabindex Attribute
  • Styling Forms
  • Using label
  • Use fieldset to Group Form Sections
  • Three-dimensional legend

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
    Iron Speed
     
    ADVERTISEMENT

    Free Web 2.0 Code Generator! Generate data entry and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!

    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">
     <fieldset>
      <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>
     </fieldset>
    </form>

    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.

    cederholm 

    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:

    WEB STANDARDS ARTICLES

    - 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


    Iron Speed





    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway