HTML登录界面的实现

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

实现这个界面非常简单,以前就学过静态网页的开发,虽然学的不精,但还是懂一些的。

这次主要是实现对用户名,密码的验证,即验证用户名和密码是否为空,没什么说的,直接看代码吧

源代码下载链接

<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>

点这里可以跳转到人工智能网站