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

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.


- 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