CSS Cookbook

5.7. Sample Design: A Login Form

Login forms are all over the Web. For instance, you need a login and a password to check your email on the Web, order books from Amazon.com, and even pay that parking ticket online.

Only a few components of a login form are visible to the user: the input field’s Submit button and labels as well as the username and password fields themselves. Here is the markup of the form to be stylized (Figure 5-12 shows the input field without styles applied):

<form action="login.php" method="post">
 <label for="uname">Username</label>
 <input type="text" name="uname" id="uname" value="" /><br />
 <label for="pword">Password</label>
 <input type="text" name="pword" id="pword" value="" /> <br /> 
 <input type="submit" name="Submit" value="Submit" />
</form>

Figure 5-12. The login form without styles

First, add a character after the text in the label element. Use the :after pseudo-class property to autogenerate the character:

label:after {
 content: ": ";
}

Next, to make the labels stick out from the form fields, change the background color of the labels and the weight of the font. Through CSS, change the labels so that they have a gray background and black text set in bold type (see Figure 5-13):

label {
 background-color: gray;
 color: black;
 font-weight: bold;
}

Figure 5-13. Styles ...