Home arrow Web Standards arrow Page 3 - Web Forms
WEB STANDARDS

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Web Forms - The label E
(Page 3 of 9 )

There are two steps to utilizing the

The second step is adding the for attribute to the

For instance, in Method C we wrap the

Why <label>

Perhaps you’ve heard others tell you that you should always add

Creating label/ID relationships allows screen readers to properly read the correct label for each form control—regardless of where each falls within the layout. That’s a good thing. Also, the

An additional benefit to using

For example, if we add a check box option to our form that gives the user the option to “Remember this info,” we can use the

<form action="/path/to/script" id="thisform" method="post">
 <p><label for="name">Name:</label><br />
 <input type="text" id="name" name="name" /></p>
 <p><label for="email">Email:</label><br />
 <input type="text" id="email" name="email" /></p>
 <p><input type="checkbox" id="remember" name="remember" />
 <label for="remember">Remember this info?</label></p>
 <p><input type="submit" value="submit" /></p>
</form>
 

By marking the check box option up this way, we’ve gained two things: Screen readers will read out the form control with the correct label (even though in this case, the label comes after the control), and the target for toggling the check box becomes larger, which now includes the text as well as the check box itself (in most browsers).

Figure 5-5 demonstrates how the form would appear in a browser, with the increased clickable area for the check box highlighted.

cederholm 

Figure 5-5. Example of check box option added with clickable text

Apart from tables and paragraphs, I’d like to show you one last method for marking forms—using a definition list.

Method D: Defining a form

<form action="/path/to/script" id="thisform" method="post">
 <dl>
  <dt><label for="name">Name:</label></dt>
  <dd><input type="text" id"name" name="name" /></dd>
  <dt><label for="email">Email:</label></dt>
  <dd><input type="text" id="email" name="email" /></dd>
  <dt><label for="remember">Remember this info?</label></dt>
  <dd><input type="checkbox" id="remember"  name="remember" /></dd>
  <dt><input type="submit" value="submit" /></dt>
 </dl>
</form>
 
 
The last method we’ll look at in regards to form layout involves the use of a definition list to define label and form control pairs. It’s a somewhat controversial move—skirting the fringe of what a definition list is designed to do. But it’s also a method that’s gaining in widespread use, and one worthy of mentioning in this book.

Further ahead, in Chapter 8, we’ll talk in more detail regarding definition lists—and the fact that they certainly are capable of more uses than most designers are aware of. Using a <dl> to mark up a form is a perfect example.

You’ll notice in the code example that each form label is wrapped in a definition term tag (<dt>) followed by its associated form control wrapped in a definition description tag (<dd>). Doing this creates a pairing of label to form control, which when viewed in a browser without any style applied looks like Figure 5-6.

 cederholm

Figure 5-6. Default form layout using a definition list

By default, most visual browsers indent the <dd> element on its own line. Fantastic. Without adding any additional <p> or <br />tags, we have a readable form layout for those browsing without CSS.

This chapter is from Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm (Apress, 2004, ISBN: 1590593812). Check it out at your favorite bookstore today.

Buy this book now.


blog comments powered by Disqus
WEB STANDARDS ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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