html登录界面源代码（html登录页面代码）

今天给各位分享html登录界面源代码的知识，其中也会对html登录页面代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、用html代码编写一个简单的登陆界面
• 2、html登陆界面代码
• 3、html网页设计：一个简单的登录界面代码！
• 4、javascript html 设计一个登录界面
• 5、HTML网页设计：一个简单的登录界面可以连接到数据库记录的代码

用html代码编写一个简单的登陆界面

!DOCTYPE htmlhtml lang="zh-CN"head

meta charset="utf-8"

meta http-equiv="X-UA-Compatible" content="IE=edge"

meta name="viewport" content="width=device-width, initial-scale=1"

title登录/title

link href="css/bootstrap.min.css" rel="stylesheet"/headbodynav class="navbar navbar-default"

div class="container-fluid"

div class="navbar-header"

a class="navbar-brand" href="./"jsp作业/a

/div

div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"

ul class="nav navbar-nav navbar-right"

lia href="login.html"登录/a/li

/ul

/div

/div/navdiv class="container"

div class="row"

div class="col-md-4"

/div

div class="col-md-4"

form class="form-signin" target="submitFrame" method="post"

h2 class="form-signin-heading"登录到jsp作业/h2

label for="inputEmail"Email/label

input type="email" id="inputEmail" class="form-control" placeholder="请输入Email" required autofocusbr

label for="inputPassword"密码/label

input type="password" id="inputPassword" class="form-control" placeholder="请输入密码" required

div class="checkbox"

label

input type="checkbox" value="remember-me" checked="checked" 记住密码 /label

/div

button type="submit" class="btn btn-primary" id="btn-login"登录/button

a href="reg.html" class="btn btn-default"注册/a

/form

iframe style="display: none;" name="submitFrame" src="about:blank"/iframe

/div

div class="col-md-4"

/div

/div

script src="js/jquery.min.js"/script/body/html

html登陆界面代码

form method="post" action="###" name="myform" onsubmit="checkpost()"

label for="name"用户名：/labelinput type="text" name="name" id="name" /br /

label for="pw"密码：/labelinput type="password" name="pw" id="pw" /br /

input type="submit" value="提交" /

/form

script

function checkpost(){

if(document.forms[0].name.value=="你要的用户名"document.forms[0].pw.value=="你要的密码"){

window.location="你要跳转的地址";

}else{

alert("用户名或密码不正确！")

return false;

}

}

/script

html网页设计：一个简单的登录界面代码！

!doctype html

html

head

meta charset="utf-8"

link href="main.css" type="text/css" rel="stylesheet"

title登陆界面/title

/head

body

div class="login_ico"

img src="images/login_ico.png"

/div

div class="login_putin"

ul

liinput type="text" /li

liinput type="password" /li

/ul

/div

div class="login_btn"

input type="submit" value="登陆"

/div

/body

/html

样式 ：

*{

margin:0;

padding:0;}

li{

list-style-type:none;

margin:0;

padding:0;}

a{

text-decoration:none;

color:#000;}

/*---------------------按钮-----------------------------*/

.login_putin ul li input{

margin: 0;

width:70%;

padding: 1em 2em 1em 5.4em;

-webkit-border-radius:.3em;

-moz-border-radius: .3em;

border: 1px solid #999;

}

.login_btn{

width:300px;

margin:40px auto 0 auto;

}

.login_btn input{

width:100%;

margin:0;

padding:.5em 0;

-webkit-border-radius:.3em;

-moz-border-radius: .3em;

border:#1263be solid 1px;

background:#1b85fd;

color:#FFF;

font-size:17px;

font-weight:bolder;

letter-spacing:1em;

}

.login_btn input:hover{

background:#1263be;

}

javascript html 设计一个登录界面

注册页面代码：

!DOCTYPE html

html lang="en"

head

    meta charset="UTF-8"

    title注册/title

/head

body

form method="post" onsubmit="return false" id="form"

    input type="text" name="username" placeholder="用户名"br

    input type="password" name="password" placeholder="密码"br

    input type="password" name="rePassword" placeholder="再次输入密码"br

    input type="submit" onclick="register_user()" value="注册"br

/form

a href="login.html"去登录/a

script

    var localDB = openDatabase('localDB', '1.0', 'Test DB', 2 * 1024 * 1024);

    localDB.transaction(function (ts) {

        ts.executeSql('CREATE TABLE IF NOT EXISTS user(username,password)')

    });

    function register_user() {

        var username = document.getElementsByTagName("input")[0].value;

        var password = document.getElementsByTagName("input")[1].value;

        var rePassword = document.getElementsByTagName("input")[2].value;

        if(password != rePassword)

        {

            alert("两次输入的密码不同，请重新输入");

        }else

 {

            localDB.transaction(function(ts){

                ts.executeSql("INSERT INTO user (username,password) VALUES ('"+username+"','"+password+"');");

                alert("注册成功");

            });

        }

    }

/script

/body

/html

登录页面代码：

!DOCTYPE html

html lang="en"

head

    meta charset="UTF-8"

    title登录/title

/head

body

form onsubmit="return false" method="post"

    input type="text" placeholder="用户名"br

    input type="password" placeholder="密码"br

    input type="submit" value="登录" onclick="login()"br

/form

a href="register.html"去注册/a

script

    var localDB = openDatabase('localDB', '1.0', 'Test DB', 2 * 1024 * 1024);

    localDB.transaction(function (ts) {

        ts.executeSql("SELECT * FROM user",[],function (tx, results) {

            var len = results.rows.length;

            if(len=0)

            {

                localDB.transaction(function (ts) {

                    ts.executeSql('CREATE TABLE IF NOT EXISTS user(username,password)')

                });

            }

        });

    });

    function login() {

        var username = document.getElementsByTagName("input")[0].value;

        var password = document.getElementsByTagName("input")[1].value;

        localDB.transaction(function (ts) {

            ts.executeSql("SELECT * FROM user WHERE username='"+username+"';",[],function (ts, res) {

                if(res.rows.length=0)

                {

                    alert("登录失败，用户未注册");

                }else if (password == res.rows[0].password)

                {

                    alert("登录成功,三秒后跳转到百度");

                    setInterval(function () {

                        location.href = "";

                    },3000);

                }else

 {

                    alert("登录失败，密码错误");

                }

            });

        })

    }

/script

/body

/html

以上代码使用了WEB SQL，还请选择合适的浏览器查看。

HTML网页设计：一个简单的登录界面可以连接到数据库记录的代码

如下参考：

1.首先，在您的计算机桌面上创建一个新文件夹，然后在该文件夹中创建一个新的文本文档。

2.然后用记事本双击打开文本文档，如下图所示，然后编写一个简单的HTML代码。

3.点击“另存为”功能选项，显示默认的“另存为”代码为ANSI。

4.我们将把编码和文件名更改回图中所示的图像并保存它。

5.然后回到新创建的文件夹，找到一个额外的HTML文件。

6.最后，使用浏览器打开HTML文件。结果如图所示。

关于html登录界面源代码和html登录页面代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。