Index by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

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, and the username and password fields themselves. Here is the markup of the form to be stylized; Figure 8-21 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>
The login form without styles

Figure 8-21. The login form without styles

First, add a character after the text in the label element. Use the :after pseudo-element property to auto-generate 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 white text set in bold type (see Figure 8-22):

label {
 background-color: gray;
 color: #fff;
 font-weight: bold;
}
Styles for colors applied to the label elements

Figure 8-22. Styles for colors ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required