Home arrow Web Standards arrow Page 7 - 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 - Using label
(Page 7 of 9 )

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>

I like the idea of using the <label>

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

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


- 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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials