HTML login layout in Java

Painting QR in Java HTML login layout

<form name="Form1"> Define form <div id="header"> Add header <span id="login"> Insert login span Name: <input type="text" name="username"> Add username textbox <br>Password: <input type="password" name="password"> Add password element <br/> <span id="spanProcessing"></span> Insert processing span <input type="button" name="btnSub" value="login" onclick="LoginRequest()"> Add submit button </span> <span id="sloganText">Ajax Portal</span> Append slogan </div> <div id="defaultContent"> Add default <p>Some text goes here!</p> content </div> <div id="divSettings" class="hidden"></div> </form>

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

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 <style> tag. In this case, we are using an inline <style> tag that we add to the head tag of the document. The CSS rules are added to alter the colors, fonts, sizes, location, margins, and so on, as shown in listing 11.5.

<style type="text/css"> html, body{ margin: 0px; padding:0px; height:100%; } #header{ background-color: #C0C0C0; height: 100px; border-bottom: 1px solid black; font-weight: bold; } #login{ text-align: right; float: right; margin-top:15px; margin-right:15px; } #sloganText{ font-size: 25px; margin-left: 15px; line-height: 100px; } </style>

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

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 the text noticeable. Just as we did for the login span, we add a margin so the A in Ajax is not directly sitting on the edge of the header. After applying the CSS to our header, we can save the document and view how the CSS has changed the look and feel of the header, as shown in figure 11.8.