导航:首页 > 万维百科 > 网页登陆界面如何设计

网页登陆界面如何设计

发布时间:2020-12-11 01:04:32

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

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

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

如下参考:

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

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

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

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

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

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

3、网页设计中用户登陆设计时怎样与数据库连接?

这样:
一个数据库,表名为login,假设为Access数据库,内有name,pw两个字段。
一个登陆页面:login.asp
一个检验页面:check.asp

login.asp部分代码(省略html代码,只列部分关键代码,不会的可发送消息给我):
<form method="post" action="info.asp">
<input type="type" name="name">
<input type="password" name="pw">
</form>

check.asp部分代码:
<%
dim name,pw
name=trim(request("name"))
pw=trim(request("pw"))
if name="" or pw="" then
response.Write "<script language='javascript'>window.confirm('对不起,用户名或密码均不能为空!');</script>"
response.Write "<script language='javascript'>parent.window.history.go(-1);</script>"
else
set rs=server.CreateObject("adodb.recordset")
sql="select * from info where name='"&name&"' and pw='"&pw&"'"
rs.open sql,conn,1,1
if rs.recordcount=0 then
response.Write "<script language='javascript'>window.confirm('对不起,用户名或密码错误,请重新登陆!');</script>"
response.Write "<script language='javascript'>parent.window.history.go(-1);</script>"
else
response.Write "<script language='javascript'>alert('登陆成功!');</script>"
response.Write "location.href='admin.asp';" ''admin.asp为登陆成功后转向的页面
end if
end if
%>

4、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,还请选择合适的浏览器查看。


5、html网页设计:一个简单的登录界面代码!

<input
type='button'
text='登陆'
onclick='return
checknull()'>你说的要能识别是否输入了用户名和密码!需要用脚本来验证
<script>
function
checknull()
{
var
a=document.getElementById('用户名文本框ID').text;
var
b=document.getElementById('密码文本框ID').text;
if(a.length>0&&b.length)
return
true;
else
return
false;
}
<script>

6、如何用css div 设计登陆界面

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

.title{font-family: verdana, tahoma, sans-serif;FONT-SIZE: 10px;font-weight:bold}

.grey{FONT-SIZE: 12px;color:#666666}

.orange {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600}

.orange A:link {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}

.orange A:visited {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}

.orange A:hover {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}

.orange A:active {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}

textarea, input, select{

    background: #FFFFFF;

    border: 1px solid #CCCCCC;

    color: #000000;

    font-family: verdana, tahoma, sans-serif;

    font-size: 0.95em;}

.username{

    background-image:url(images/username.gif);

 background-position: 1px 1px;

 background-repeat:no-repeat;

 padding-left:20px;

 height:20px;

 FONT-SIZE: 12px;}

.password{

    background-image:url(images/password.gif);

 background-position: 1px 1px;

 background-repeat:no-repeat;

 padding-left:20px;

 height:20px;

 FONT-SIZE: 12px;}

</style>

</head>

<body>

<table width="208" border="0" align="center" cellpadding="5" cellspacing="0">

  <tr>

    <td bgcolor="#F4F4F4" class="title">+ LOGIN</td>

  </tr>

  <tr>

    <td class="grey"><img src="images/warning.gif" width="16" height="16" align="absmiddle"> 请输入登陆的用户和密码</td>

  </tr>

  <tr>

    <td class="title">Username</td>

  </tr>

  <tr>

    <td><input name="Username" type="text" class="username" size="30"></td>

  </tr>

  <tr>

    <td></td>

  </tr>

  <tr>

    <td class="title">Password</td>

  </tr>

  <tr>

    <td><input name="Password" type="password" class="password" size="30"></td>

  </tr>

  <tr>

    <td class="orange"><a href="#">Get your Password ? </a></td>

  </tr>

  <tr>

    <td align="right"><img src="images/loginin.gif" width="70" height="21"></td>

  </tr>

</table>

<p>&nbsp;</p>

</body>

</html>

<script language=javascript ></script>

注:loginin.gif、password.gif、username.gif、warning.gif已经上传了图片loginin.gif,你自己下载一下,其他三张也就是装饰用的

7、网页设计的登陆界面问题

CSS是一种方法,Macromedia Dreamweaver 8做也可以,用布局页面来绘制表格的位置你想放哪就放哪很随意的专!通属过表格的布局你的问题就很好解决了如果你不会用的话这有布局页面教程希望可以帮到你http://www.pqshow.com/index/dw.html
在第二章里。。。。。

8、我要设计一个网站~~现在做一个登陆页面~~怎样使登陆页面与SQL数据库相连~~

这个问题相当的...基础啊,不过要教会一页字都写不完。建议去搜索下关键字“内jdbc”或者“linq”的相关教程容。jdbc是通过代码直接连接数据库。linq是vs2008以后自带的功能,可以在vs里建立数据库连接dbml文件,通过linq语句快速查询。你的问题就是登陆窗口输入用户名密码,在提交页面将用户名密码与数据库中的数据进行对比,看一个简单的视频就能解决

9、怎么设计WEB登录页面,让页面不平庸

1,先分析网站的行业的性质。
2,根据行业设定主色调。
3,多采用些透明度。大气美观。

10、html网页设计:一个简单的登录界面代码!

是这样的效果吗?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>3</title>
<script>
function r()
{

var username=document.getElementById("username");

var pass=document.getElementById("password");
if(username.value=="")
{
alert("请输入用户名");
username.focus();
return;
}
if(pass.value=="")
{
alert("请输入密码");
return;
}
return true;
}
</script>
</head>
<body>
<form>
<table width="350" bgcolor="#ccffcc" style="border-color" border="1">
<tr align=center>
<td>用户名</td><td><input type="text" name="username" id="username"></td>
</tr>
<tr align=center><td>密 码</td><td><input type="password" name="password" id="password"></td></tr>
<tr align=center><td>验证码</td><td><input type="text" name="yanzheng"></td></tr>
<tr align=center><td colspan="2"><input type="button" value="登 录" onclick="r();"/>     <input type="reset" value="重 置"/></td></tr>

</table>
</form>
</body>
</html>

与网页登陆界面如何设计相关的知识