Extra Credit

---

For this extra credit session, we'll discuss the tabindex and accesskey attributes and how they can do wonders to make our form more navigable. We'll also explore the <fieldset> tag, which can help in organizing form sections. Lastly, we'll cover CSS as it relates to spicing up our form's appearance.

The Fabulous Tabindex

A feature that we can easily add to our form is the tabindex attribute. Adding tabindex, and a numerical value, enables users to navigate the focus of form controls with the keyboard (typically using the TAB key). Repeatedly hitting the TAB key will change the focus to the next form control, in an order that we can specify. By default, every interactive element has an implied "tab order," but using the tabindex attribute takes that ordering away from the browser, putting you in full control.

For instance, let's add the tabindex attribute to the form controls in our example (Method C):

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

Now, when the user tabs through the form, we'll be ensuring the focus of the cursor follows the exact order we intended: Name:, Email:, Remember this info?, and the submit button.

Using tabindex to set focus order becomes even more useful for complex forms and those where there might be multiple input boxes or other form controls for a single label.

Why Tabindex?

Aside from being dead-simple to implement on our form, we'll again be helping mobility-impaired users by letting them navigate the form entirely with the keyboard. Rather than grabbing the mouse to enter each form item, the user will be able to tab through each control, in the correct order. Think about those who, for whatever reason, are unable to use both hands to navigate the Web. This will help.

Accesskey for Frequented Forms

Similar to tabindex, the accesskey attribute is another easily added feature that can be useful for mobility-impaired users—and just darn convenient for others.

For instance, if we add the accesskey attribute to the <label> tag that surrounds the Name: text of our form, when the user presses the key we specify, the focus of the cursor will change to the field that's associated with the label.

Let's take a look at the code that'll make this happen:

 <form action="/path/to/script"  method="post">   <p><label for="name" accesskey="9" >Name:</label><br />   <input type="text"  name="name" tabindex="1" /></p>   <p><label for="email">Email:</label><br />   <input type="text"  name="email" tabindex="2" /></p>   <p><input type="checkbox"  name="remember"   tabindex="3" />   <label for="remember">Remember this info?</label></p>   <p><input type="submit" value="submit" tabindex="4" /></p> </form> 

Depending on the system, the user will either use the ALT or CTRL key in conjunction with the 9 key that we've specified in the markup. Focus will immediately shift to the Name: field in our form.

Easily Accessed Search

Adding the accesskey attribute can be especially helpful when used on frequently used forms such as a search box or membership login. Without having to reach for the mouse, users can instantly change focus and start their query or input using only the keyboard.

It's important to note that, while not all browsers handle accesskey, it's an added benefit for those that do. For instance, to access the search form field where we've added accesskey="9", Windows users would press ALT+9, while Mac users would press COMMAND+9 to shift the focus to the search field.

Styling Forms

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"  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;   } 

No Need to be Redundant

You'll notice that we don't have to repeat the font-size: 12px; rule in the #thisform label declaration. Since <label> elements are contained within #thisform, they will inherit that property. It's always good practice to set shared rules at a high level, then override only those that are unique and necessary further down the element tree. This will save bytes of code, which, besides being a good thing, also makes for easier updates later on. If you wish to change the font-family for the entire form, you need only update one rule, rather than each place that the rule is repeated.

Imagine you've built an entire site that uses the Georgia font face exclusively. You've added the identical rule, font-face: Georgia, serif;, to 20 different CSS declarations. Your boss comes to you a week later and says, "The CEO hates serif fonts now. Change the site to Verdana." Now you have to dig through all 20 rules and make your updates.

Alternatively, you could set the rule at a high level, say the <body> element—once. The entire document would inherit the Georgia font face, unless otherwise specified. Now, when your boss asks you to make the change, you can say, "No problem, it'll be done in 2 minutes." Or, you could keep the simplicity to yourself, tell him it'll take you 2 hours, and then spend the extra time bidding on eBay items.

OK, of course, you should tell your boss the truth—they should know how valuable you are, saving their company time and code with your newly found solutions.

Use <fieldset> to Group Form Sections

Using the <fieldset> element is a handy way of grouping form controls into sections. Additionally, adding a descriptive <legend> will, in most browsers, add a stylish border around the form controls that you're grouping. Did I say stylish? Well, I happen to like the border, and with a little CSS, we can make it even more attractive.

First though, let's take a look at what the markup looks like when creating field sets. We'll add one to our example form:

 <form action="/path/to/script"  method="post">   <fieldset>     <legend>Sign In</legend>     <p><label for="name" accesskey="9" >Name:</label><br />     <input type="text"  name="name" tabindex="1" /></p>     <p><label for="email">Email:</label><br />     <input type="text"  name="email" tabindex="2" /></p>     <p><input type="checkbox"  name="remember"     tabindex="3" />     <label for="remember">Remember this info?</label></p>     <p><input type="submit" value="submit" tabindex="4" /></p>   </fieldset> </form> 

Figure 5-12 shows us how our form appears in a typical browser with the <fieldset> and <legend> tags added, along with the CSS that we're applying to the <label> elements. You'll notice the stylish border that surrounds the form controls that fall within the <fieldset> tags, with the <legend> breaking the border at the top left of the box.

Figure 5-12: Our form example with <fieldset> and <legend> added

The reason I call it "stylish" is because, for a default rendering, with no CSS added at all, it's rather impressive. And it can get even more interesting when we choose to add a bit more customization, which we'll do next.

You may also begin to see how useful <fieldset> could be for grouping different sections of a form together. For instance, if our example form was the first part of a larger form that had other groups contained in it, using <fieldset> to visually box those sections off is a semantically rich way to make our forms more organized and readable.

Adding Style to <fieldset> and <legend>

We can customize the appearance of the default <fieldset> border and <legend> text with CSS just as easily as with any other element. First, let's change the border's color and width, and then we'll modify the text itself.

To stylize <fieldset>'s border, making it a bit more subtle, we'll use the following CSS:

 #thisform {   font-family: Georgia, serif;   font-size: 12px;   color: #999;   } #thisform label {   font-family: Verdana, sans-serif;   font-weight: bold;   color: #660000;   } #thisform fieldset {   border: 1px solid #ccc;   padding: 0 20px;   } 

We also specify a 20-pixel margin on both the right and left, with zero margins on both top and bottom. Why zero margins? Because our form labels and controls are wrapped in <p> tags, there's already enough padding at both the top and bottom.

Figure 5-13 shows how our slightly styled form looks in a browser.

Figure 5-13: Our form example with <fieldset> styled

Three-Dimensional <legend>

Finally, let's apply some CSS to the <legend> tag, creating a three-dimensional box effect that appears connected to the border created by the <fieldset> element.

 #thisform {   font-family: Georgia, serif;   font-size: 12px;   color: #999;   } #thisform label {   font-family: Verdana, sans-serif;   font-weight: bold;   color: #660000;   } #thisform fieldset {   border: 1px solid #ccc;   padding: 0 20px;   } #thisform legend {   font-family: arial, sans-serif;   font-weight: bold;   font-size: 90%;   color: #666;   background: #eee;   border: 1px solid #ccc;   border-bottom-color: #999;   border-right-color: #999;   padding: 4px 8px;   } 

As you can see, we're doing several things here. First, we're customizing the font, weight, and size of the <legend>. Second, for the 3-D effect, we've set the background to a light gray, and then we've added a single-pixel border around the whole <legend> that matches the border that we've used for the <fieldset> element. For the shading effect, we've overridden the border's color on the bottom and right sides only, with a slightly darker gray.

Font-size percentages: Since we've previously set font-size: 12px; for the entirety of #thisform, to make the <legend> text smaller, we'll just use a percentage. Setting a font size at a high level and then using percentages further down the hierarchy makes for easier maintenance later on. Need to bump up the whole site's font size? Just make a single update, and the percentages will change accordingly. In fact, ideally we'd set that initial size on the <body> element, and use percentages everywhere else. For this example, though, we've chosen to set it at the <form> level.

Padding was also adjusted to give the text in the box some breathing room. That's it! Figure 5-14 shows the finished results with all of the CSS we've been adding throughout the chapter—all the while using our lean, mean, marked-up form.

Figure 5-14: Our completed form example, styled with CSS

---