登录界面代码

登录界面：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户登录</title>
<style type="text/css">
body,td,th {
	color: #000;
}
body {
	background-color: #0CF;
	background-image: url(a.jpg);
}
#form1 blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote p strong {
	font-size: 18px;
}
#form1 blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote p strong {
	font-size: 9px;
}
#form1 blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote p strong {
	font-size: larger;
}
#form1 blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote p strong {
	font-size: xx-large;
}
#form1 blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote p strong {
	font-size: x-large;
}
</style>
</head>

<body>
<p><label></label> </p>
  <blockquote>
    <blockquote>
      <blockquote>
        <blockquote>
          <blockquote>
            <blockquote>
              <blockquote>
                <blockquote>
                  <blockquote>
                    <blockquote>
                      <blockquote>
                        <blockquote>
                          <p align="center"><strong>用户登录（login） </strong></p>
                        </blockquote>
                      </blockquote>
                    </blockquote>
                  </blockquote>
                </blockquote>
              </blockquote>
            </blockquote>
          </blockquote>
        </blockquote>
      </blockquote>
    </blockquote>
  </blockquote>
<p> </p>
<form action="judge.jsp" method="post">
<table width="252" border="1" align="center">
  <tr>
    <td width="72"><strong>用户名:</strong></td>
    <td width="164"><input name="num" type="text" /></td>
  </tr>
  <tr>
    <td><strong>密码:</strong></td>
    <td><input name="userpassword" type="password" /></td>
  </tr>
  <tr>
    <td> </td>
    <td><a href="judge.jsp" onclick="link"><input type="submit" name="submit"  value="登录" ></a></td>
  </tr>
</table>
</form>
</body>
</html>

判断并且连接数据库

<%@ page contentType = "text/html; charset=utf-8" import = "java.sql.*" errorPage = "error.jsp" %>
<html>
<head>
</head>
<body>
<div style=text-align:center>
<%

String num = request.getParameter("num");
String userpassword = request.getParameter("userpassword");
if(num=="")
{
out.println("<script language = 'javaScript'> alert('用户名为空，请点击确定重新输入！');</script>");
response.setHeader("refresh","1;url = login.html");
}
else
{
Class.forName("com.mysql.jdbc.Driver");
Connection connect = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/test","root","root");
//连接数据库时,获取一个可以执行sql语句的对象
Statement stmt = connect.createStatement();
String sql = "select * from user where name='"+num+"'and userpassword='"+userpassword+"'";
//用于查询
ResultSet i = stmt.executeQuery(sql);
if(i.next())
{
//定时刷新页面，跳转的目标地址是index1.html
response.setHeader("refresh","1;url = index1.html");
}
else
{
out.println("<script language = 'javaScript'> alert('用户名或密码错误，请点击确定重新输入！');</script>");
response.setHeader("refresh","1;url = login.html");
}
stmt.close();
connect.close();
}
%>
</div>
</body>
<html>

登录成功后的界面

<html>
<!DOCTYPE html>
<html lang="en" class="no-js">

    <head>

        <meta charset="utf-8">
        <title>登录(Login)</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- CSS -->
        <link rel="stylesheet" href="assets/css/reset.css">
        <link rel="stylesheet" href="assets/css/supersized.css">
        <link rel="stylesheet" href="assets/css/style.css">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="assets/js/html5.js"></script>
        <![endif]-->

    </head>

    <body>

        <div class="page-container">
            <h1>恭喜你，登录成功！</h1>
        </div>
		
        <!-- Javascript -->
        <script src="assets/js/jquery-1.8.2.min.js" ></script>
        <script src="assets/js/supersized.3.2.7.min.js" ></script>
        <script src="assets/js/supersized-init.js" ></script>
        <script src="assets/js/scripts.js" ></script>

    </body>
<div style="text-align:center;">
</div>
</html>

登录界面代码

推荐阅读