弄一个html的登录页面,使用HTML写一个简单的跳转登录页面

最近在学习前端的知识，于是就想写一个简单的页面跳转，必须是勾选了“我同意”这个选项以后才能跳转，否则不能，不废话，直接上代码。

首先是第一个页面：testlogin1.html

html lang="en">

head>

meta charset="UTF-8">

title>Titletitle>

head>

script>

type="text/javascript"

src="http://localhost:63342/python 文件/testlogin.html"

script>

body bgcolor="#ffffff" οnlοad="loadedvar=true;">

form name="terms" action="http://localhost:63342/python 文件/testlogin.html" method="get">

我同意: input type="checkbox" name="agree" value="ON">

input οnclick="if (loadedvar) {if (document.terms.agree.checked) {document.terms.submit();} else {window.alert('kumikoda提示您，必须先同意才能跳转')}} else {window.alert('请稍等...')}" type="button" value="继续">

input type="button" value="退出" οnclick="document.location.href='http://localhost:63342/python 文件/testlogin.html';" >

form>

body>

html>

然后是第二个页面testlogin.html

html>

head>

meta charset="utf-8">

title>登录title>

style>

#login {

width: 290px;

height: auto;

overflow: hidden;

border: solid 1px #CCCCCC;

}

#login_title {

width: 100%;

height: 40px;

line-height: 40px;

background-color: #F60;

text-align: center;

}

.line {

width: 250px;

height: 30px;

line-height: 30px;

margin-left: 20px;

text-align: center;

font-family: 楷体;

}

.line input {

width: 150px;

}

.line a {

font-size: 14px;

color: black;

}

.line span {

color: #F00;

}

#log_submit {

display: block;

width: 200px;

height: 30px;

margin-left: 45px;

margin-top: 15px;

margin-bottom: 5px;

}

style>

head>

body>

form action="#" method="post">

div id="login">

div id="login_title">登 录div>

div class="line">span id="msg">span>div>

div class="line">账号

input name="username" type="text" placeholder="账号/手机/邮箱" />

div>

div class="line">密码

input name="password" type="password" placeholder="请输入密码" />

div>

input id="log_submit" type="submit" value="登录">

div class="line">a href="#">找回密码a>    a href="#">注册账号a>div>

div>

form>

body>

html>

最终结果如下：

呵呵，写的不好的地方，高手勿喷。