Online Book Reader

AJAX In Action [211]

First, we add our form b to our HTML document. The form provides a semantically meaningful container for the textboxes. It also provides a degradation path for a non-Ajax-based authentication via normal form submission. We create a header div c, which surrounds all our content. A span d is then added to house our username textbox e or password field f, our processing span g, and our submit button h.

The button we use to submit the data back to the server needs an onclick event handler. The onclick event handler initializes the Ajax by calling a JavaScript function, LoginRequest(). LoginRequest() is explained in the section “The JavaScript login code.”

The only things left for the header are to add the slogan i for the portal and to add a place for the default content j to be shown when the page is loaded. Any message can be displayed inside the div defaultContent. In this example, we just put in a string of text, but we can add links, images, text, or whatever we think Licensed to jonathan zheng

The Ajax login

435

Figure 11.7

The HTML login form with no CSS applied

is appropriate. Then we save the HTML; you can see how unsightly it looks without any CSS applied to the elements (figure 11.7). To fix this drab-looking layout, we need to apply CSS to our elements. Since we have given the elements their own IDs, it makes the process simple. We reference the element’s ID by placing a pound sign in front of it. We can add the stylesheet as an external file or inline via the

We start out by removing any margins or padding from the body b of the document. We specify the height as 100% so that it is easier to define document heights in percentages if we need to in the future. It is important to note that we need to specify these properties both for the HTML and the body tags, since different browsers look at either one tag or the other for this information.

For the header c, we can apply a background color to the div. We can also set the height and add a bottom border to separate the header from the Licensed to jonathan zheng

436

CHAPTER 11

The enhanced Ajax web portal

content in a more dynamic manner. We can also adjust any of the font properties as we think necessary. We take the login information d and move it to the right side of the screen. We use the float property and set the value to right. To make the text boxes uniform, we use the text-align property so that the content within the span is also aligned on the right margin. This gives our textboxes a more uniform look. Without it, the textboxes would not line up correctly since the string name is shorter than the password. We can also add some margins to adjust the position of the login information so that its right edge is not directly on the border of our header div.

The last thing to style in our header is the slogan e. By setting the lineheight to the height of the div, we are allowing the slogan to be centered vertically in the header. We also set the font properties to make