Simple login page

I want to make a login page, simple, centralized and professional style. but failed. please see the attached screenshot. how to fix it ?

Thanks

<html>
<head>	
<title>Accounting</title>
</head>
<body>

<div align="center">
${param.errorMsg}
<form action="<c:url value='main.do'/>" method="post">

<div style="margin-top:200px;margin-bottom:10px;">
<span style="width:500px;color:blue;font-size:30px;font-weight:bold;border-bottom:1px solid blue;">Accounting System</span>
</div>
<div style="margin-bottom:5px;">

<span style="width:100px;">Name</span>
<input style="width:150px;" type="text" name="name" id="name" value="Mike">

</div>
<div><span style="width:100px;">password</span><input style="width:150px;" type="password" name="password" id="password" value="">


</div>

 <input type="submit" value="Login"></form>
</div>
</body>
</html>

I think <form action="<c:url value=‘main.do’/>" method=“post”> in this line error display.try to more and more.

The only things I see wrongi s the blue border, which you need to give that inner <span> you set it on, a display:block that way the width can take effect.

You are also missing a doctype at the top of your page.
As for aligning the textand inputs, you need to use <label> and set that a width (both equal) so that the inputs will start at the same spot. Does that make sense?

Actually I would recommend you recode it from scratch like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>	
<title>Accounting</title>
<style type="text/css">
		html,body{height: 100%; padding:0; margin:0;}
		form{ width:30em;height:9em; margin:-5em auto 0 auto; position: relative; top:50%; border:1px dotted #ccc; padding:.25em; }
		fieldset{ margin:0;   border:0;padding:0;}
		legend{float:left; font-size: 200%; text-align: center; color:blue; font-weight: bold; border-bottom: 1px solid blue; width:15em;  padding:0; }
		label, label+ input {display:inline; float:left;margin-top:1em;}
		label{text-align: right; width:28%; clear: left; margin-top:.8em; }
		label+ input{ width:60%; padding:.25em; ; margin-left:.5em; border: 1px inset;  margin-left: }
		#sub{  margin-top:1em; position: relative; float:left;clear: left; margin-left: 29%}
</style>
</head>
<body>
${param.errorMsg}
	<form action="<c:url value='main.do'/>" method="post">
		<fieldset><legend>Accounting System</legend>
			<label for="name">Name: </label><input  type="text" name="name" id="name" value="Mike">
			<label for="password">Password: </label><input  type="password" name="password" id="password" >
			<input type="submit" value="Login" id="sub">
		</fieldset>	
	</form>
</body>
</html>

Slimmer, more semantic… no inline CSS!!!

if you need IE6 support ( which doesn’t like adjacent selectors … you substitute with a class)

feel free to get rid of the dotted border… I just thought it looked better.

Much better. how to add some spaces below the login button ?

I added some magin-bottom:10em; dosn’t work.

Thanks.

what do you need the spaces for? is it content or is it just stylistic?

just stylistic

easy… add padding-bottom in ems to form{}, add half of that em value to the -5em in the declaration margin:-5em auto 0 auto;

so for example, if you wanted 4 spaces at the bottom ( 1 “space” is roughly 1em)…
form{ width:30em;height:9em; margin:-7em auto 0 auto; position: relative; top:50%; border:1px dotted #ccc; padding:.25em; padding-bottom:4.25em; }

Very helpful. Appreciate your help.