Create a Clean Web 2.0 Login Form, Part 2: HTML & CSS

Published on: Jan 15 2012 by Anli

Create a Web 2.0 Login Form, Part 2: HTML & CSS

Today I’m going to show you how to code in HTML and CSS the Web 2.0 login form designed in Photoshop in the first part of this tutorial. All of you that have missed the first part of the tutorial, you can find it here:

http://azmind.com/2012/01/06/create-a-clean-web-2-0-login-form-part-1-photoshop/

I have also included a simple welcome page that opens when the user clicks on the “GO” button. You can download all these files (.zip file) at the end of this article. In the package is also included the PSD file (with some small changes).


So, now I’m going to explain what these files do. You can view a demo of the login form HERE.

The HTML

There are two html files in the package: index.html for the login form and welcome.html for the welcome page.

index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE HTML>
<html dir="ltr" lang="en-US">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
	<title>Web 2.0 Login Form by Azmind.com</title>
 
	<!--- CSS --->
	<link rel="stylesheet" href="style.css" type="text/css" />
 
 
	<!--- Javascript libraries (jQuery and Selectivizr) used for the custom checkbox --->
 
	<!--[if (gte IE 6)&(lte IE 8)]>
		<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="selectivizr.js"></script>
		<noscript><link rel="stylesheet" href="fallback.css" /></noscript>
	<![endif]-->
 
	</head>
 
	<body>
		<div id="container">
			<form action="welcome.html">
				<div class="login">LOGIN</div>
				<div class="username-text">Username:</div>
				<div class="password-text">Password:</div>
				<div class="username-field">
					<input type="text" name="username" value="azmind" />
				</div>
				<div class="password-field">
					<input type="password" name="password" value="azmind" />
				</div>
				<input type="checkbox" name="remember-me" id="remember-me" /><label for="remember-me">Remember me</label>
				<div class="forgot-usr-pwd">Forgot <a href="#">username</a> or <a href="#">password</a>?</div>
				<input type="submit" name="submit" value="GO" />
			</form>
		</div>
		<div id="footer">
			Web 2.0 Login Form by <a href="http://azmind.com">Azmind.com</a> - <a href="http://azmind.com/2012/01/15/create-a-clean-web-2-0-login-form-part-2-html-css/">Download it here!</a>
		</div>
	</body>
</html>

The “head” part is very simple. It contains the title of the page, the CSS link and two Javascript libraries, jQuery and selectivizr, used (only in Internet Explorer 6-8) for displaying the custom checkbox in the “Remember me” part of the login form.

“selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.” – from selectivizr.com. This library needs jQuery (or MooTools, Prototype, ecc) to work.

The browsers that support CSS3 don’t need these libraries for displaying the custom checkbox.

I have also included a fallback CSS file for Internet Explorer 6-8 that have Javascript disabled.

The “body” part contains the “container” for the login form and the “footer” for displaying some credits. As you can see in line 24, when the form is submitted it opens the welcome page.

Something important to mention here is that in the lines 28 and 31 I have wrapped the input fields within a “div”. This is for adding custom backgrounds to the username and password input fields. Yes, I can add the backgrounds directly to the input fields, but in this case the “padding-right” doesn’t work as I want it to (I’m using Chrome 16 and Windows XP).

welcome.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML>
<html dir="ltr" lang="en-US">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
	<title>Web 2.0 Login Form by Azmind.com</title>
 
	<!--- CSS --->
	<link rel="stylesheet" href="style.css" type="text/css" />
 
	</head>
 
	<body>
		<div id="container">
			<div class="welcome">
				<div class="welcome-user">Welcome USER!</div>
				<div class="welcome-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
				<div class="home"><a href="index.html">HOME</a></div>
			</div>
		</div>
		<div id="footer">
			Web 2.0 Login Form by <a href="http://azmind.com">Azmind.com</a> - <a href="http://azmind.com/2012/01/15/create-a-clean-web-2-0-login-form-part-2-html-css/">Download it here!</a>
		</div>
	</body>
</html>

As you can see this page is very simple, no Javascript libraries, a “container” and a “footer”. Nothing to explain here.

The CSS

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
/* -------------------------------------------------------
 
	Description: Web 2.0 Login Form
	Version: 1.0
	Author: Anli Zaimi
	Author URI: http://azmind.com
 
------------------------------------------------------- */
 
 
/* ------- This is the CSS Reset ------- */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
abbr, acronym, address, big, cite, code, del,
dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr,
th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu,
nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
 
/* ------- HTML5 display-role reset for older browsers ------- */
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
 
/* ------- Remove Chrome's border around active fields ------- */
 
*:focus {
	outline: none;
}
 
/* ------- Disable background and border for input fields ------- */
 
input {
	background: transparent;
	border: 0;
}
 
 
 
/* --------------------------------------------------------------- */
 
/* ------- Body ------- */
 
body {
	background: #eeeeee url(images/bg.jpg) top left repeat;
}
 
 
/* ------- Container ------- */
 
#container {
	margin: auto;
	margin-top: 180px;
	width: 524px;
	height: 262px;
	text-align: left;
	font-family: Verdana, Arial;
	font-weight: normal;
	font-size: 12px;
	color: #ffffff;
}
 
 
/* ------- Login Form ------- */
 
form, .welcome {
	background: url(images/form-bg.png) top left no-repeat;
	width: 524px;
	height: 262px;
	padding-top: 1px;
}
 
.login, .welcome-user {
	width: 470px;
	float: left;
	margin-top: 33px;
	margin-left: 40px;
	font-size: 20px;
}
 
.username-text {
	width: 190px;
	float: left;
	margin-top: 50px;
	margin-left: 40px;
}
 
.password-text {
	width: 290px;
	float: left;
	margin-top: 50px;
	margin-left: 0px;
}
 
.welcome-text {
	width: 360px;
	float: left;
	margin-top: 50px;
	margin-left: 40px;
	line-height: 16px;
}
 
.username-field {
	width: 168px;
	height: 38px;
	float:left;
	margin-top: 10px;
	margin-left: 35px;
	background: url(images/username-field.png) center left no-repeat;
}
 
.username-field:hover {
	background: url(images/username-field-hover.png) center left no-repeat;
}
 
.password-field {
	width: 280px;
	height: 38px;
	float:left;
	margin-top: 10px;
	margin-left: 22px;
	background: url(images/password-field.png) center left no-repeat;
}
 
.password-field:hover {
	background: url(images/password-field-hover.png) center left no-repeat;	
}
 
input[type="text"], input[type="password"] {
	width: 120px;
	height: 16px;
	margin-top: 10px;
	margin-left: 10px;
	font-family: Verdana, Arial;
	font-size: 16px;
	color: #2d2d2d;
}
 
/* ------------ Custom Checkbox ------------------------------- */
 
/* Works for browsers with CSS3 support (with or without Javascript) */
/* Works for Internet Explorer 6-8 (without CSS3 support) with Javascript */
/* If Javascript isn't available this doesn't work for Internet Explorer 6-8 */
 
input[type="checkbox"] {
	position: absolute;
	left: -999px;
}
 
input[type="checkbox"] + label {
	width: 132px;
	height: 24px;
	float: left;
	margin-top: 26px;
	margin-left: 37px;
	padding-left: 28px;
	display: block;
	position: relative;
	line-height: 24px;
	background: url(images/checkbox-off.png) top left no-repeat;
}
 
input[type="checkbox"]:checked + label {
	background: url(images/checkbox-on.png) top left no-repeat;
}
 
input[type="checkbox"]:checked:hover + label, input[type="checkbox"]:checked:focus + label {
	background: url(images/checkbox-on-hover.png) top left no-repeat;
}
 
input[type="checkbox"]:not(:checked):hover + label, input[type="checkbox"]:not(:checked):focus + label {
	background: url(images/checkbox-off-hover.png) top left no-repeat;
}
 
/* -------------------------------------------------------------------------- */
 
.forgot-usr-pwd {
	width: 220px;
	float: left;
	margin-top: 26px;
	margin-left: 0;
	color: #cccccc;
	line-height: 24px;
}
 
.forgot-usr-pwd a {
	color: #cccccc;
	text-decoration: none;
	font-style: italic;
}
 
.forgot-usr-pwd a:hover, .forgot-usr-pwd a:focus {
	text-decoration: underline;
}
 
input[type="submit"] {
	width: 95px;
	height: 73px;
	float: left;
	margin-top: 12px;
	margin-left: 2px;
	font-family: Verdana, Arial;
	font-size: 26px;
	color: #ffffff;
}
 
input[type="submit"]:hover, input[type="submit"]:focus {
	background: url(images/go-hover.png) top left no-repeat;
}
 
.home {
	width: 70px;
	height: 73px;
	float: left;
	margin-top: 122px;
	margin-left: 21px;
	font-size: 20px;
	padding: 25px 0 0 15px;
}
 
.home:hover, .home:focus {
	background: url(images/go-hover.png) top left no-repeat;
}
 
.home a, .home a:hover, .home a:focus {
	color: #ffffff;
	text-decoration: none;
}
 
#footer {
	margin: auto;
	margin-top: 50px;
	width: 500px;
	height: 30px;
	background: url(images/footer-bg.png) bottom center no-repeat;
	text-align: center;
	font-family: "Times New Roman", Times, Georgia;
	font-weight: normal;
	font-size: 16px;
	color: #8d8d8d;
}
 
#footer a {
	text-decoration: none;
	color: #8d8d8d;
}
 
#footer a:hover, #footer a:focus {
	text-decoration: none;
	color: #2d2d2d;
}

In the beginning (line 11) you can see the CSS reset from Eric Meyer, http://meyerweb.com/eric/tools/css/reset/.

“The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.” – from meyerweb.com.

In the lines 57-59 we remove the Chrome’s border around active fields. I have defined other focus rules for active fields. Focus is needed for highlighting active elements especially when the user interacts with the page using the keyboard.

In the lines 63-66 we disable the background and the border of input fields for using custom backgrounds.

The rest of the CSS file is pretty simple. We style the container, the form, the welcome page, the input fields, the text and the footer. Here I used the PSD file to find the right space between the elements.

The most important part of the CSS file that needs attention begins in the line 175. Here we style the default checkbox and give it a custom look. I found this solution here (in italian): http://www.dreamsnet.it/2011/06/personalizzare-checkbox-html-customizing-checkbox-form-html-ie6-compatibile/

The solution consists in hiding the default checkbox (lines 175-178) and styling the label using CSS3 selectors and pseudo-classes (lines 180-203).

For example:
“input[type=”checkbox”] + label” means a label that is immediately preceded by a checkbox.
“input[type=”checkbox”]:not(:checked):hover + label” means a label that is immediately preceded by an unchecked and hovered checkbox. And so on…

As mentioned above, I have used the selectivizr library for Internet Explorer 6, 7, 8 that don’t support CSS3.

I found this solution very easy and simple, but there are other solutions that use Javascript or jQuery for creating the custom checkbox. You can search Google if you want to try other alternatives. Or you can use the fallback.css file (included in the package) if you want a default checkbox. For example, if your site’s visitors use Internet Explorer 6, 7 or 8 with Javascript disabled.

I have tested this solution in Chrome 16, Firefox 8 and Internet Explorer 8 (no CSS3) and it works fine, with some slight differences between the browsers.

That’s all!

You can download the full package from the link below. It contains the login page, the welcome page, the CSS files, the Javascript libraries, the images and the PSD file.

Try it and let me know what you think. Your feedback will be very appreciated.

VIEW DEMO

DOWNLOAD FILE: Web 2.0 Login Form HTML/CSS + PSD file (18491)

* You can use this login form in personal and commercial projects, but you can’t sell or redistribute it directly. If you want to publish it somewhere please refer to this page.

For the selectivizr and jQuery libraries use their licenses.

11 Comments So Far

  1. Rickyrick says:

    Hey,
    I am wondering how you got all this values.
    For example
    width: 168px;
    height: 38px;
    float:left;
    margin-top: 10px;
    margin-left: 35px;
    background: url(images/username-field.png) center left no-repeat;
    }

    for the username-field. Where did you get all the values for width, height and margins? ^^
    I am thankful for your tutorials and I hope you will answer my questions, sorry for bothering you ^^

    • Anli says:

      Hi,
      so, the width and height in the css file is the same width and height of the png image (username-field.png). For the margins I used the Guides in Photoshop and then I tried 2 or 3 different values (increasing or decreasing by 1 or 2 pixels) until I liked the result.

  2. kamesh says:

    i need to use ur login form in my asp.net website.. but how can i make validations on the textbox about the required fied validator & to check the username & password with database.. if matches thn to access the welcome page ??

    please help its urgent.. thanks a lot

    • Anli says:

      Hi kamesh,
      I’m sorry but I can’t help you. I don’t know asp, I’ve never used it. Hope you find a solution.

    • oğuz says:

      kamesh Hi should I do with mine, you like it ‘s ok Can you help asp.net.help mee

  3. Pete says:

    Hi there! I am trying to implement this into SMF, which uses PHP and css, but I am experiencing some problems with getting it to work.

    I am using SMF 2.0.2 if that helps.
    Have you ever modified this awesome login form for that?

    Thanks in advance!

  4. Keval says:

    It’s a nice post for beginners.

    Keep it up!!!

  5. Diego says:

    Good morning, After an intensive search I came across this log in, It is beautifully design, I’m farely new to Web design and I’m in the process of learning HTML and CSS. I would like to implement this on my site, However, I’m not sure I understand how to link this page to the rest of my site. Is there an instruction page on how to make it part of my site and also, how do I tell the form to check for the correct login and password when someone attempts to access the page. One last question, how do I create the various login and passwords.

    Thank you for your time in advance.

    -Diego

  6. Terry says:

    This login form looks very simple and beautiful.. I will use it for my site.. thank you!!!

Sorry, the comment form is closed at this time.