Take out your designer's scapel and prepare to give forms an extreme makeover without <tables>. Slight exaggeration, but adding a splash of color and changing the layout dramatically changes a room and the same concept applies to forms. The form code is also accessible. Note the <label for>, <id>, and <name> tags. See Quirksmode for an excellent explanation of name vs. id.
The following markup is in an .html file. For this tutorial, we'll call it forms.html:
<label for="firstName">First name
<input id="firstName" name="firstName" type="text"
value="First name" />
</label>
<label for="lastName">Last name
<input id="lastName" name="lastName" type="text"
value="Last name" />
</label>
<input id="submit" type="submit" name="Submit"
value="Submit" /><label for="submit"></label>
Add style to the textfield by defining a style for "input." We'll create two, one called "blue" and the other "red." Open Notepad or a favorite text editor and copy the below CSS code. Save the file as style.css.
input.blue {
background-color: #66ccff;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
input.red {
background-color: #ff9999;
font-size: 10px;
font-family: Georgia, "Times New Roman", serif;
}
Go back to forms.html and add the bolded items into the code.
<input class="blue" name="firstName"
type="text" id="firstName" value="First name"
/>
<input class="red" name="lastName"
type="text" id="lastName" value="Last name" />
The textareas come to life! In input.blue, background-color: #66ccff provides the box with a blue background. Font-family changes the style from default to Verdana or whichever is available first on the user's computer. Verdana is the first choice and sans-serif is the last choice. Let's add one more attribute to the textareas.
How about that? The flat look with nice borders one solid with a thin line and the other a double-line with a selected color. And the code with the added items highlighted... the change is in the styles.css file. No fooling around with the forms.html file.
.blue {
background-color: #66ccff;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 1px solid;
}
.red {
background-color: #ff9999;
font-size: 10px;
font-family: Georgia, "Times New Roman", Times,
serif;
border: double #993300;
}
Shortcut tip: Every bit you save makes the file smaller. When you have an aabbcc pattern in a color's hexadecimal value, you can shorten it to abc. In the above example, we can shorten 66ccff to 6cf, ff9999 to f99, and 993300 to 930. Easy, eh? Try it. How would you shorten the hexadecimal value for white? fff is it and 000 is black. How about ffff99? That becomes ff9.
Jazz up the submit button in the same way is the textarea. Though you can apply "input.red" to it, it's good practice to create a separate style for button. Styling the textarea and the button identically would look busy or cluttered.
In forms.html, add the bolded to the following line:
<input id="submit" class="button" type="submit" name="Submit" value="Submit" />
In styles.css, add:
input.button {
background-color: #f99;
font-size: 10px;
font-family: Georgia, "Times New Roman", Times,
serif;
border: double #930;
}
Challenge yourself. Change the submit button to blue with a solid border and the font to Verdana, sans-serif. Ready? Set... go!
Give yourself bonus points if you used shorthand in the hexadecimal values. Here's one way to create the blue button with a solid border. You may have used a different shade of blue, font-size value, border color, and border width.
input.button {
background-color: #6cf;
font-size: x-small;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: solid 1px #000;
}