实现这个界面非常简单,以前就学过静态网页的开发,虽然学的不精,但还是懂一些的。
这次主要是实现对用户名,密码的验证,即验证用户名和密码是否为空,没什么说的,直接看代码吧
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登录</title>
<link href="./css/login.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function loginClick() {
var name=document.login.username.value;
var pwd=document.login.password.value;
if(name==null||name.length==0){
alert("用户名不能为空!");
return;
}
if(pwd==null||pwd.length==0){
alert("密码不能为空!");
return;
}
document.login.submit();
}
</script>
</head>
<body>
<table class="login_tb1">
<tr align="center" valign="middle">
<td height="100%">
<table class="login_tb2" cellSpacing=0 cellPadding=0 border=0
align="center"
>
<tr valign="middle">
<td class="login_td1" colSpan=2><font face="黑体" size="4px"
color="#196ed1"
>网上书店系统-用户登录</font></td>
</tr>
<tr>
<td width="203"><img height="200" width="202"
src="./images/login_Page/loginPage_02.jpg" alt="此处显示登录图片"
/></td>
<td class="login_td2">
<form action="LoginJsp.jsp" name="login" method="post">
<table>
<tr>
<td width="66" height="20" class="login_td">登录名:</td>
<td width="115" height="20" class="login_td"><input
class="login_input" type="text" name="username"
></td>
<td></td>
</tr>
<tr>
<td height="20" class="login_td">密 码:</td>
<td height="20" class="login_td"><input
type="password" name="password" class="login_input"></td>
<td></td>
</tr>
<tr>
<td height="20" colspan="2" align="center"><input
type="reset" value="重置" class="login_button"
/> <input type="button" value="登录"
class="login_button" onClick="loginClick()"
/> </td>
<td class="login_td" align="left" width=71><a
href="Regist.html"
>新用户注册</a></td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td colSpan=2
style="background-image: url(images/login_Page/loginPage_04.jpg)"
height=56 align="center" class="login_td"
>版权所有</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>