CSS Zibaldone

• Home
  • CSS Articles
    • Formatting a login message with CSS

Formatting a login message with CSS

In this article I'll explain how to format a login message by using CSS. To view the examples, JavaScript must be enabled in your browser.

Table of contents

• The markup
• The JavaScript code
• Styles for the login message
• Download examples

The markup

We start with the following markup:

Listing 1. Markup for a login form

1. <form action="javascript:validate(this)" method="post">
2. <div id="content">
3. <h2>Login</h2>
4. <p>To log in, just answer this simple question: Snoopy is a dog, a cat or a horse?</p>
5. <input type="text" id="txt" name="txt" />
6. <input type="submit" id="btn" name="btn" value="Log in" />
7. </div>
8. </form>

The JavaScript code

We use JavaScript only for a demonstrative purpose. In such cases, a more robust server-side language is strongly recommended. As we've seen in the markup above, we've built an accessible CAPTCHA to prevent robots from logging in. The user should answer a simple question to log in. The JavaScript code is the following:

Listing 2. The JavaScript code

1. function okLogin() {
2. var content = document.getElementById("content");
3. var result1 = document.createElement("div");
4. result1.id = "ok";
5. result1.innerHTML = "Login successful!";
6. content.appendChild(result1);
7. }
8. function badLogin() {
9. var content2 = document.getElementById("content");
10. var result2 = document.createElement("div");
11. result2.id = "bad";
12. result2.innerHTML = "Login failed!";
13. content2.appendChild(result2);
14. }
15. function validate() {
16. var str = document.getElementById("txt").value.toLowerCase();
17. var re = /dog/
18. if(str.match(re)) {
19. okLogin()
20. }
21. else {
22. badLogin()
23. }
24. }

View the example

The first two functions create two different elements, with two different text messages and two unique IDs (ok and bad) and then add these elements to the form. The third function, validate(), uses a regular expression to check the input inserted by the user. If the user's input matches the regular expression, it will be returned the output of the first function, otherwise the output of the second. To see how this works, let's take a look at the following two images. The first depicts the document tree of the page before the submission of the form, while the latter shows the page after that submission.

Figure 1. The document tree before the submission of the form

Figure 2. The document tree after the submission of the form

Styles for the login message

The styles for the login message are relatively simple.

Listing 3. Styles for the login message

1. #ok, #bad {
2. width: 350px;
3. height: 100px;
4. line-height: 100px;
5. text-align: center;
6. color: #fff;
7. font-weight: bold;
8. font-size: 1.4em;
9. text-transform: uppercase;
10. margin-top: 1em;
11. }
12. #ok {
13. background: #0c0 url("../img/ok.png") no-repeat top left;
14. }
15. #bad {
16. background: #c00 url("../img/fail.png") no-repeat top left;
17. }

View the example

As you can see, we've used a different background image on each message. Since we want to be sure that the text will be legible also when the background image is not available, we've also specified a background color on each element. To center the text vertically, we've set the line height value to a value that equals the height of each box and then we've added a top margin in order to leave enough room between the message and the other form elements.

Download examples

examples.zip