HTML and CSS Reference
In-Depth Information
Input
<style type=”text/css” media=”screen”>
fieldset {
border: none;
background-color: #aaa;
width: 400px;
}
legend {
text-align: right;
}
</style>
.
Output
FIGURE 11.18
A fieldset and leg-
end with styles
applied.
11
As you can see, I've changed the background color of the field set and assigned a spe-
cific width. I've also aligned the legend to the right. Because of the default browser posi-
tioning of the legend, the background color splits the legend text. This is an example of
how browsers treat legends uniquely. To set a background for the field set that includes
the full legend, I'd have to wrap the field set in another block level element (like a div ),
and apply the background color to that.
Changing the Default Form Navigation
In most browsers, you can use the Tab key to step through the form fields and links on a
page. When filling out long forms, it's often much easier to use the Tab key to move
from one field to the next than to use the mouse to change fields. If you have a mix of
form fields and links on your page, setting things up so that using Tab skips past the
links and moves directly from one form field to the next can improve the usability of
your applications greatly. To set the tab order for your page, use the tabindex attribute.
You should number your form fields sequentially to set the order that the browser will
use when the user tabs through them. Here's an example:
<p><label> Enter your <a href=”/”> name </a> <input type=”text” name=”username”
tabindex=”1” /></label></p>
<p><label> Enter your <a href=”/”> age </a> <input type=”text” name=”age”
tabindex=”2” /></label></p>
<p><input type=”submit” tabindex=”3” /></p>
 
 
Search WWH ::




Custom Search