导航:首页 > 万维百科 > html网页设计登入代码

html网页设计登入代码

 发布时间：2020-08-31 20:38:47

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

<!DOCTYPE html><html 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"></head><body><nav 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">
<li><a href="login.html">登录</a></li>
</ul>
</div>
</div></nav><div 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 autofocus><br>
<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>

2、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 = "https://www.baidu.com";
                    },3000);
                }else
 {
                    alert("登录失败，密码错误");
                }
            });
        })
    }
</script>
</body>
</html>

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


3、这个首页的html5网站设计代码（尤其是头部那登录注册代码怎么写）

首先先说一下HTML5的代码只是在原有的XHTML基础上增加了一些新的标签（还有一些新的特性，例如数据库和缓存等特性）

以下为此页面的结构代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="revised" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content=""  />
<meta name="robots" content="all" />
<title>页面标题</title>
</head>

<body>
<header>
<div></div><!--登陆注册区域-->
</header><!--头部[html5新标签]-->
<nav></nav><!--导航[html5新标签]-->
<div></div><!--banner-->
<div></div><!--左上-->
<div></div><!--右上-->
<div></div><!--左下-->
<div></div><!--右下-->
<footer></footer><!--底部[html5新标签]-->
</body>
</html>

注：以上为页面的大的框架，相对用HTML5新的标签更合理的，全用上了新的带有语义标签。

另外多说一下，[注册登陆]这块在html5的新标签里面没有很合适的语义化的标签，所以依然采用原有的div标签为最合理。html5只是在原有的技术的基础上更细化了，咱在制作代码的过程中没必要必须用HTML5的代码，主要看是否合理，合理的为较合适的。


多说的：不管用XHTML还是HTML5写代码，结构（HTML5）与样式（CSS）尽量要分离！


希望能帮到你！

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

如下参考：

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

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

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

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

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

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

5、html语言如何实现帐号密码登陆

html可以使用表单进行的最简单的账号密码登录的页面设计，但是不具备判断账号密码正确性等逻辑的能力，这个需要后台语言处理反馈。

工具原料：编辑器、浏览器

1、使用form表单事件最简单的账号密码登录的数据提交，代码如下：

<!DOCTYPE html>
<html>
<body>

<form action="login.php">
用户名:<br>
<input type="text" name="firstname" value="请输入账号">
<br>
密码:<br>
<input type="text" name="lastname" value="请输入密码">
<br><br>
<input type="submit" value="Submit">
</form> 
</body>
</html>

2、点击提交数据将会提交给login.php进行处理，运行的结果如下：

6、HTML网页设计，求从登入界面到另一个网页的代码。谢谢了

这是用记事本的做法

书签链接
建立书签基本语法：

<A name="bookmark_name">文字</a>
链接页面中的书签基本语法：

<A href="#bookmark_name">文字</a>
例子:

<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=big5">
<TITLE>例子</TITLE>
</HEAD>
<BODY>
<A HREF="#DW">Dreamweaver MX</A>
<A HREF="#FL">Flash MX</A>
<A HREF="#FW">Fireworks MX</A>

<A NAME="DW"><H3>Dreamweaver MX</H3></A>
<P>
<A NAME="FL"><H3>FLASH MX</H3></A>
<P>
<A NAME="FW"><H3>Fireworks MX</H3></A>
</BODY>
</HTML>

7、网页制作中登陆界面设计代码

<%@language=vbscript codepage=936 %>
<%
option explicit
'强制浏览器重新访问服务器下载页面，而不是从缓存读取页面
Response.Buffer = True
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.Expires = 0
Response.CacheControl = "no-cache"
'主要是使随机出现的图片数字随机
%>
<html>
<head>
<title>管理员登录</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="Admin_Style.css">
<script language=javascript>
function SetFocus()
{
if (document.Login.UserName.value=="")
document.Login.UserName.focus();
else
document.Login.UserName.select();
}
function CheckForm()
{
if(document.Login.UserName.value=="")
{
alert("请输入用户名！");
document.Login.UserName.focus();
return false;
}
if(document.Login.Password.value == "")
{
alert("请输入密码！");
document.Login.Password.focus();
return false;
}
//if (document.Login.CheckCode.value==""){
// alert ("请输入您的验证码！");
// document.Login.CheckCode.focus();
// return(false);
}
}
</script>
</head>
<body onLoad="SetFocus();">
<p> </p>
<form name="Login" action="Admin_ChkLogin.asp" method="post" target="_parent" onSubmit="return CheckForm();">
<table width="300" border="0" align="center" cellpadding="5" cellspacing="0" class="border" >
<tr class="title">
<td colspan="2" align="center"> <strong>管理员登录</strong></td>
</tr>

<tr>
<td height="120" colspan="2" class="tdbg">
<table width="250" border="0" cellspacing="8" cellpadding="0" align="center">
<tr>
<td align="right">用户名称：</td>
<td><input name="UserName" type="text" id="UserName2" size="23" maxlength="20"></td>
</tr>
<tr>
<td align="right">用户密码：</td>
<td><input name="Password" type="password" size="23" maxlength="20"></td>
</tr>
<tr>
<td align="right">验 证 码：</td>
<td><input name="CheckCode" size="15" maxlength="6">
1109 </td>
</tr>
<tr>
<td colspan="2"> <div align="center">
<input type="submit" name="Submit" value=" 确认 ">

<input name="reset" type="reset" id="reset" value=" 清除 ">
<br>
</div></td>
</tr>
</table>
</td>
</tr>
</table>
<p align="center">后台管理页面需要屏幕分辨率为 <font color="#FF0000"><strong>1024*768</strong></font>
或以上才能达到最佳浏览效果！<br>
需要浏览器为<strong><font color="#FF0000"> </font></strong><font color="#FF0000"><strong>IE5.5</strong></font>
或以上版本才能正常运行！！！</p>
</form>
</body>
</html>

与html网页设计登入代码相关的知识