html登录界面设计代码（html设计登陆界面）

本篇文章给大家谈谈html登录界面设计代码，以及html设计登陆界面对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

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

登录页面html代码

html xmlns=""head

 meta http-equiv="Content-Type" content="text/html; charset=utf-8"

 title贵美商城/title

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

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

script type="text/javascript"

// snameCheck()  passCheck()

function validateform(){

if(snameCheck()  passCheck()) 

   return true;

 else

   return false;

}

// Screen Name Validation

function snameCheck(){

var sname = document.getElementsByName("sname")[0].value;

var illegalChars = /\W/;

if(sname.length != 0){

if(illegalChars.test(sname)){

document.getElementById("passMsg").innerHTML.replace(/'会员名无效'/,'');

    document.getElementById("passMsg").innerHTML='会员名无效';

document.getElementsByName("sname")[0].select();

return false;

}

}

else

{

document.getElementById("userMsg").innerHTML.replace(/'是否忘记输入会员名？'/,'');

 document.getElementById("userMsg").innerHTML='是否忘记输入会员名？';

document.getElementsByName("sname")[0].focus();

return false

}

if(sname!=="zhangsan"){   //验证会员名必须为张三

document.getElementById("userMsg").innerHTML.replace(/'是否输入的会员名有错？'/,'');

  document.getElementById("userMsg").innerHTML='是否输入的会员名有错？';

document.getElementsByName("sname")[0].focus();

return false;

}

return true;

}

function passCheck(){

var userpass = document.getElementsByName("pass")[0].value;

var illegalChars = /[\W_]/;// allow only charactors and numbers

// Check if Password field is blank.

if(userpass == ""){

document.getElementById("passMsg").innerHTML.replace(/'未输入密码 \n" + "请输入密码'/,'');

    document.getElementById("passMsg").innerHTML='未输入密码 \n" + "请输入密码';

document.getElementsByName("pass")[0].focus();

return false;

}

// Check if password length is less than 6 charactor.

if(userpass.length  6){

document.getElementById("passMsg").innerHTML.replace(/'密码必须多于或等于 6 个字符。\n'/,'');

    document.getElementById("passMsg").innerHTML='密码必须多于或等于 6 个字符。\n';

document.getElementsByName("pass")[0].focus();

return false;

}

//check if password contain illigal charactors.

else if(illegalChars.test(userpass)){

document.getElementById("passMsg").innerHTML.replace(/'密码包含非法字符'/,'');

    document.getElementById("passMsg").innerHTML='密码包含非法字符';

document.getElementsByName("pass")[0].select();

return false;

}

if(userpass!=="123456"){    //验证密码必须为123456

  document.getElementById("passMsg").innerHTML.replace(/'密码错误，请重新输入！'/,'');

    document.getElementById("passMsg").innerHTML='密码错误，请重新输入！';

document.getElementsByName("pass")[0].focus();

return false;

}

return true;

}

/script 

script type="text/javascript" charset="utf-8" src=""/script/head

body

div id="container"

iframe id="header" src="header.htm" width="980" height="136" frameborder="0" scrolling="no"/iframe

form action="login_success" method="post"

div class="login"

ul class="form f_l"

h1img src="images/logintitle.gif" alt="会员登录"/h1

li class="login_list"label会员名：/labelinput type="text" name="login"（可包含 a-z、0-9 和下划线）/li

li class="login_list"label密nbsp;nbsp;nbsp;码：/labelinput type="text" name="pwd"（至少包含 6 个字符）/li

li class="a_c"img src="images/login.gif" alt="登录"/li

li class="desc"δnbsp;nbsp;a href="#"什么是安全登录/a。/li

li class="desc"δnbsp;nbsp;香港会员（繁体中文用户）由此a href="#"登入/a/li

li class="desc"δnbsp;nbsp;a href="#"密码安全贴士/a。/li

li class="desc"δnbsp;nbsp;防止病毒或者木马窃取您的账户信息，a href="#"在线检查/a您的电脑是否安全。/li

/ul

h1img src="images/register.gif" alt="注册会员"/h1

ul class="aside f_l"

li class="regpic"span便宜有好货！/span超过7000万件商品任您选。/li

  li class="regpic regpic2"span买卖更安全！/span交易超安全。/li

li class="regpic regpic3"span免费开网店！/span轻松赚钱交友。/li

li class="regpic regpic4"span超人气社区！/span彩活动每一天/li

li class="a_c"a href="#"img src="images/registernow.gif" alt="现在就注册"/a/li

ul class="reged"

li class="regpic regpic5"您已经是会员？a href="#"由此登入/a/li

li class="regpic regpic6"繁体中文用户由此a href="#"注册/a/li

/ul

/ul

/div

/form

iframe id="footer" src="footer.htm" width="980" height="136" frameborder="0" scrolling="no"/iframe

/div !--container end--

div class="_bd_ext_tip" style="visibility: hidden;"span class="_bd_ext_search"百度一下/spanspan class="_bd_ext_open"打开链接/spanspan class="_bd_ext_copy"复制/span/div/body/html

用户登录html代码有哪些？

html

head

title登陆页面/title

/head

form action="login_conf.jsp" method="post"

用户登陆

用户名：input type="text" name="uname"

密码： input type="password" name="upassword"

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

input type="reset" value="重置"

/form

/body

/html

****************************************************

验证页面jsp代码如下：

html

head

title用户验证页面/title

/head

h1 登陆范例-登陆成功 /h1

/html

不知道你用啥样的前台 是jsp还是asp.net或者是php

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

如下参考：

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

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

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

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

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

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

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登陆界面代码

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 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登录界面设计代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html设计登陆界面、html登录界面设计代码的信息别忘了在本站进行查找喔。