Home arrow Web Standards arrow Page 3 - Forms
WEB STANDARDS

Forms


Forms play an integral role on the Internet in allowing users to communicate and interact with websites. Forms are an important way for website owners to collect information from their visitors. There are many ways to handle forms markup -- but the best way is the one that will benefit both the user and the site owner. This article was excerpted from the book Web Standards Solutions The Markup and Style Handbook, written by Dan Cederholm (Apress, 2004; ISBN 1590593812).

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 19
March 09, 2005
TABLE OF CONTENTS:
  1. · Forms
  2. · Method C: Simple and more accessible
  3. · Method D: Defining a form
  4. · Summary
  5. · Styling forms
  6. · No need to be redundant

print this article
SEARCH DEVARTICLES

Forms - Method D: Defining a form
(Page 3 of 6 )

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


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.

Defining style

The simplest style we could add would be to easily remove the default indenting of <dd> elements within our form:

  form dd {
   margin: 0;
   }

The preceding snippet of CSS would render our Method D example as viewed in Figure 5-7.


Figure 5-7.  Definition list form example with <dd> margins removed

The table-like format of Method A could also be achieved by floating <dt> elements within our form:

  form dd {
   margin: 0;
   }
  form dt{
   float: left;
   padding-right: 10px;
   }

By floating the <dt> elements to the left, the form controls contained in <dd> tags will align themselves to the right, as seen in Figure 5-8. You’ll notice that the form controls don’t line up with each other perfectly—but at the very least this illustrates that while it’s possible to use a <dl> tag to lay out a form, the layout doesn’t have to put each element on its own line.

In fact, because of the presence of the <dl>, <dt>, and <dd> elements—which are in addition to the form <label> and <input> elements—you’ll have plenty to work with in the way of elements that can be styled with CSS.


Figure 5-8.   Form layout with floated <dt> elements

This article is excerpted 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