Home arrow Web Standards arrow Page 5 - 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 - Styling forms
(Page 5 of 6 )

Now that we have a nicely structured form, let’s uncover a few CSS techniques we can use to customize it visually.

Setting the width of text inputs

Form controls can be tricky to deal with in their varying widths and heights that are dependent on browser type. In our form example, we haven’t specified a size for the text inputs and have left the width of these up to the browser’s defaults. Typically, a designer might specify a width using the size attribute, adding it to the <input> tag like this:

  <input type="text" id="name" name="name" tabindex="1" size="20" />

Setting a size of "20" specifies the width of the text input box at 20 characters (and not pixels). Depending on the browser’s default font for form controls, the actual pixel width of the box could vary. This makes fitting forms into precise layouts a tad difficult.

Using CSS, we can control the width of input boxes (and other form controls) by the pixel if we wish. For instance, let’s assign a width of 200 pixels to all <input> elements in our form example. We’ll take advantage of the id that is assigned to the form, in this case thisform.

  #thisform input {
   width: 200px;
   }

Now, all <input> elements within #thisform will be 200 pixels wide. Figure 5-9 shows the results in a visual browser.


Figure 5-9.  Our example form with 200 pixel width applied to all <input> elements

Oops. The check box and submit button are also an <input> element, and therefore receive that same value. So instead of applying the width to all <input> elements, let’s use the IDs that we set for the “Name” and “Email” controls only.

  #name, #email {
   width: 200px;
   }

Figure 5-10 shows the corrected results in a browser, with only the two text input boxes being 200 pixels wide.


Figure 5-10.   Our form example with only text inputs at 200 pixels wide

Using <label> to customize fonts

We have a few different options for customizing the size, face, and color of text that’s contained within our form. And in another example of “using the markup you’ve been given,” we’ll utilize the <label> element to dress up the text.

I like the idea of using the <label> element to specifically style form text, primarily for one reason. I can see scenarios where we’d like the label to be called out differently from other text that may be included within the <form> tag. For instance, alternatively we could add styles to all paragraph tags that fall within our form with a unique style.

  #thisform p {
    font-family: Verdana, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #66000;
    }

This would style all text contained in paragraphs within our form with a bold, burgundy, Verdana 12-pixel font. But the same results can be achieved by applying those same rules to just <label> elements within our form like this:

  #thisform label {
    font-family: Verdana, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #66000;
    }

The results of this styling can be seen in Figure 5-11.


Figure 5-11.  Our example form with styled <labels>

Why do I like this better? Let’s say that aside from labels, the form has additional instructions or text that is also contained within <p> tags. This additional text would inherit the same styles if we applied them to <p> tags within our form.

We could instead apply a generic style to all text within our form, and then use the label styling specifically for customizing form controls uniquely.

The CSS would go something like this:

  #thisform {
    font-family: Georgia, serif;
    font-size: 12px;
    color: #999;

    }
  #thisform label {
    font-family: Verdana, sans-serif;
    font-weight: bold;
    color: #660000;
    }

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