精华内容
下载资源
问答
  • 登录注册HTML页面代码

    千次阅读 2021-01-06 17:29:23
    创建register.html文件,录入如下代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> form { width:100%;

    一、注册

    创建register.html文件,录入如下代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                form
                { 
                    width:100%;
                    height:100%;
                    margin-top: 100px;
    				margin-bottom: 100px;
                    background:#008B8B;
                }
                div
                {
                    display:inline-block;
                    padding-top: 255px;
                    padding-bottom: 255px;
    				padding-left: 1px;
    				padding-right: 1px;
                }
                h2
                {
                    font-family: "微软雅黑";
                font-size: 40px;
                    color:black;
                }
                #log
                {
                    color:blue;
                }
            </style>
        </head>
        <body>
            <form>
    		    <center>
                <div>
                <h3>
                注册
    			</h3>
    			<p>
    				用户名:<input type="text"/>
    			</p>
    			<p>&emsp;码:<input type="password"/>
    			</p>
    			<p>
    				手机号:<input type="text"/>
    			</p>
    			<p>
    				<input id=reg type="submit" value="立即注册" />
    			</p>
    			<p>
    				已有账号?<a href="login.html">请登录</a>
    			</p>   
                </div>
                </center>			
            </form>      
        </body>
    </html>
    

    打开register.html文件,效果如下:
    在这里插入图片描述

    二、登录

    创建login.html文件,录入如下代码

    <!DOCTYPE html>
    <html>
        <head>
    		<meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                form
                { 
                    width:100%;
                    height:100%;
                    margin-top: 100px;
    				margin-bottom: 100px;
                    background:#008B8B;
                }
                div
                {
                    display:inline-block;
                    padding-top: 255px;
                    padding-bottom: 255px;
    				padding-left: 1px;
    				padding-right: 1px;
                }
                h2
                {
                    font-family: "微软雅黑";
                font-size: 40px;
                    color:black;
                }
                #log
                {
                    color:blue;
                }
            </style>
        </head>
        <body>
    		<!--div class="div">
    			<img src="favicon.png" width="100%" height="200px" alt=""  id="picture">
    		</div-->
            <form name="login">
                <center>
                <div>
                <h2>
                    登录
                </h2>
                <p>
                    用户名:<input type="text"/>
                </p>
                <p>&emsp;码:<input type="password"/>     
                </p>
                <p>
                    <input id=log type="submit" value="立即登录" />
                </p>
    			<p>
    				没有账号?<a href="register.html">请注册</a>
    			</p>   
                </div>
                </center>
            </form>
        </body>
    </html>
    
    

    打开login.html文件,效果如下:在这里插入图片描述

    展开全文
  • login.html我们在此页面对我们的表单内容做了JS判断对表单做了css布局放入了我们yanzhengma.php,验证码文件html>登陆界面functionfoo(){if(myform.name.value==""){alert("请输入用户名");myform.name.focus();...

    login.html

    我们在此页面对我们的

    表单内容做了JS判断

    表单做了css布局

    放入了我们 yanzhengma.php,验证码文件html>

    登陆界面

    function foo(){

    if(myform.name.value=="")

    {

    alert("请输入用户名");

    myform.name.focus();

    return false;

    }

    if (myform.pwd.value=="")

    {

    alert("请输入密码");

    myform.pwd.focus();

    return false;

    }

    if (myform.yzm.value=="")

    {

    alert("请输入验证码");

    myform.yzm.focus();

    return false;

    }

    }

    body{background-image: url("/images/1.jpg")}

    .container{

    width: 380px;

    height: 330px;

    margin: 0 auto;margin-top: 240px;

    box-shadow: 0 0 20px #222;

    border-radius:40px;

    background-color: rgba(152, 242, 242, 0.23);

    }

    div.right{

    position: relative;

    left: 40px;

    top: 20px;

    }

    input{

    width: 180px;

    height: 25px;

    }

    button{

    background-color: rgba(230, 228, 236, 0.93); /* Green */

    border: none;

    color: #110c0f;

    padding: 10px 30px;

    text-align: center;

    display: inline-block;

    font-size: 16px;

    margin-top: -40px;

    margin-left: 50px;

    cursor: pointer;

    }

    用户登陆

    用户名:

    密 码:

    验证码:

             

    注册

    立即登陆

    展开全文
  • 包含登录注册以及购物商城首页的HTML代码,其中部分功能的JavaScript代码已经写好,稍微调试即可用
  • html5+css3登录注册表单切换页面代码.zip
  • 登录页 login Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production ...
  • 将实验2中的系统用户登录注册页面改为JSP页面,并部署自己的Web应用于Tomcat服务器中 具体要求: 完成登录JSP页面设计和注册页面设计 在登录页面表单中使用request对象获取用户信息,建立新的JSP页面完成登录验证...
  • HTML5写的注册页面,正在学习html5的朋友可以参考下代码如下:register.htmlfunction play(){document.getElementById("menu_item").style.display= "";}function noplay(){document.getElementById("menu_item")....

    HTML5写的注册页面,正在学习html5的朋友可以参考下

    代码如下:

    register.html

    function play(){

    document

    .getElementById("menu_item").style.

    display

    = "";

    }

    function noplay(){

    document.getElementById("menu_item").style.display = "none";

    }

    function passwd(){

    var pass = document.getElementById("password").value;

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

    if

    (pass.length < 4) {

    document.getElementById("meter").value = pass.length;

    tip.innerHTML = "差";

    }

    else

    if (pass.length <= 8) {

    document.getElementById("meter").value = pass.length;

    tip.innerHTML = "中";

    }

    else {

    document.getElementById("meter").value = pass.length;

    tip.innerHTML = "高";

    }

    }

    <

    for

    m id="f1"

    action

    ="register.html" method="post">

    会员注册

    padding

    ="5px">

    员工编号:

    require

    d/>

    密 码:

    onkeyup

    ="passwd()"/>

    密码确认:

    生 日:

    性 别:

    邮 箱:

    手 机:

    地 址:

    list

    ="l"/>

    上海

    北京

    江苏

    郑州

    深圳

    个人网页:

    起床时间:

    onblur

    ="pro()"/>

    头像:

    onchange

    ="show()"/>

    width

    ="60"

    height

    ="60" />

    function show(){

    var file = document.getElementById("f").files[0];

    var fileReader =

    new

    FileReader();

    fileReader.readAsDataURL(file);

    fileReader.

    onload

    = function(){

    document.getElementById("img").src = fileReader.result;

    }

    }

    允许注册

    许可证

    信息

    注册许可信息

    验证码

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

    span.innerHTML=Math.floor(Math.random());

    onclick

    ="window.location.replace('login.html')" id="btn1"

    onmousemove

    ="changeBgColor('btn1')"

    onmouseout

    ="recoverBgColor('btn1')" class="submit" />

    代码如下:body

    {

    background-image: url("../images/bg.jpg");

    text-align: center;

    background-repeat: repeat-x;

    background-position: 0px 0px ;

    background-size: }

    .table {

    border: 1px solid #90BFFF; width:810px;

    }

    tr

    {

    font-family: 微软雅黑;

    font-weight:800;

    color: #448EF3;

    }

    input{

    border: 1px solid #448EF3;

    color: #448EF3;

    font-weight:bold;

    font-family: "微软雅黑";

    height: 35px;

    line-height: 30px;

    border-radius:5px;

    }

    .submit

    { width: 150px; height: 40px;

    cursor :hand;

    font-size: 20px;

    color: #ffffff;

    background-color: #448EF3;

    border: 0px; }

    .thead {

    height: 40px;

    background : #90BFFF;

    font-family: "微软雅黑";

    font-size: 30px;

    font-weight: 700;

    color: #ffffff;

    background: #90BFFF; }

    #3{ margin-bottom: 100px; }

    代码如下:function ChkAllClick(sonName, cbAllId){

    var arrSon = document.getElementsByName(sonName);

    var cbAll = document.getElementById(cbAllId);

    var tempState=cbAll.checked; for(i=0;i

    if(arrSon[i].checked!=tempState) arrSon[i].click();

    } }

    function ChkSonClick(sonName, cbAllId)

    { var arrSon = document.getElementsByName(sonName);

    var cbAll = document.getElementById(cbAllId);

    for(var i=0; i

    if(!arrSon[i].checked) {

    cbAll.checked = false; return;

    } }

    cbAll.checked = true;

    }

    function ChkOppClick(sonName){

    var arrSon = document.getElementsByName(sonName);

    for(i=0;i

    function changeBgColor(btn){

    var btn = document.getElementById(btn);

    btn.style.backgroundColor = "#90BFFF" }

    function recoverBgColor(btn){

    var btn = document.getElementById(btn);

    btn.style.backgroundColor = "#448EF3" }

    ------------------------------------------------

    上面文件的顺序是:register.html register.css checkbox..js

    -------------------------------------------------

    背景图片:bg.jpg

    9e221aa3009151f9f3cb163e43437df7.png

    【相关推荐】

    展开全文
  • 简单登录页只做最简单的表单就足够实现了在你的控制器下面做一个触发器login,并且返回登录页login.html以下是thinkphp触发器login代码在试图文件夹view下面创建login.html文件即applicationindexview你的控制器名...

    简单登录页

    只做最简单的表单就足够实现了

    在你的控制器下面做一个触发器login,并且返回登录页login.html

    dc14c86dc8e19e1529d44e541310a669.png

    以下是thinkphp触发器login代码

    599067f07b309ec934d444418c3735a4.png

    在试图文件夹view下面创建login.html文件

    即applicationindexview你的控制器名login.html

    以下是login.html代码

    1d3dacbaa38c21e23f55987617cd278d.png

    效果图

    60600e52946566d9c3431fa24accbf57.png

    数据库中建立一个User用户表

    thinkPHP连接好数据库,建一个用户表(就是放账号密码的),以下我用名字为User表做的示范,并且一个字段为username,一个字段为password,并且随便输入一些数据,例如username=123,password=123,即相当于创建一个用户。

    427372fd6661fe5f8e53849124f2bc83.png

    做一个yanzheng触发器,验证登录账号密码是否正确

    如您不想使用session的,可以把所有关于session的代码去掉

    代码的具体注释已经在下面代码中

    dd743aaeb6085adbb424a17d7084cc24.png


    进行登录测试,效果图如下

    输入账号:123,密码:123,点击登录,显示登录成功

    697e5f36ec855daa164550b910db8b40.png

    3a5a1795071323a5a628713366e66bde.png


    简单session拦截

    因为有session,所以每次登录成功后,都会创建一个临时文件,用来判断是否已经登录过,所以刚刚上面yanzheng触发器下的代码就有session的作用,即

    4a20cc6e238417f795d9f0813465ba9a.png


    那么如果用到了session,就要进行session的拦截,即如果还没登录账号密码的,禁止未经登录就直接可以进入到加密的后台页中

    假设你的后台页面为test1.html,以下是代码

    d702af091013c6cc88e2ffe8829809ef.png

    效果图就是

    a3ba518c6b231f95f220ab8de722725b.png

    假设你的后台页面触发器为test1,以下是代码

    代码的具体注释全部在下面代码里面

    234ff62b31ec05465f63ab97661e46b7.png

    最后进行测试,你会发现你如果没有登录过,是不可能进入到test1后台页面中的因为session的拦截作用。那么项目也就完成了哟!

    如果对您有帮助,可以顺手点个赞哟

    #前端# #网站#

    展开全文
  • 简单登录页只做最简单的表单就足够实现了在你的控制器下面做一个触发器login,并且返回登录页login.html.以下是thinkphp触发器login代码在试图文件夹view下面创建login.html文件即applicationindexview你的控制器名...
  • HTML&CSS实现经典登录注册页面

    万次阅读 多人点赞 2018-10-09 20:43:50
    提要:本篇文章说的是一个简单的登录注册页面HTML结合css如何实现,包括两个页面的相互跳转,不包括对输入数据的处理,适合刚入门的新手小白。 1、首先看一下最后的实现效果:首先是一个登录界面,点击“立即...
  • $(this).attr('name') varhtml= ''+ '' + name + ''+ '0'+ '' tabs.push(html) }) return $(tabs.join('')) }()), Actions= { getCurIdx: function () { return $tabs .filter('.ideal-tabs-tab-active') ...
  • 创建 reg.html 文件我们此页面有一个表单,里面有四个input输入框,我们用JS对输入框里面的内容作了登录判断,并使用了css对表单进行了布局。代码如下html>登陆界面functioncheckinput(){if(myform.name.value==...
  • 登录注册 页面

    2019-09-21 08:02:38
    1.jQuery仿QQ登录表单弹出窗口 这是一款基于jQuery的弹出窗口插件,它是仿QQ的登录表单,只要点击登录链接,即可弹出登陆表单窗口,当我们在表单上点击切换按钮时,即可...分享一款基于HTML5手机登录注册表单代码...
  • 大家在浏览网站时有没有发现,几乎每个网站都会要求你注册或登录,那作为一个前端开发人员,你知道HTML登录页面怎么制作吗?这篇文章就给大家分享一个由HTML 和CSS实现的炫酷的登录页面代码,有一定的实用价值,感...
  • Bootstrap登录注册表单代码是一款基于html5 css3 bootstrap创建的响应式登录注册页面模板。
  • 实例:制作一个HTML登录页面,包含邮箱,登录密码,立即注册,忘记密码等,代码如下:HTML部分:程序猿的生活:打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)​...
  • 仿知乎登录注册页面模板html下载 ├── images │ └── logo1.png ├── index.html ├── js │ ├── background.js │ ├── index.js │ ├── jquery.min.js │ ├── layer │ │ ├── layer.js │...
  • 今天是刘小爱自学Java的第105天。感谢你的观看,谢谢你。...一、前端发送请求现在不是注册页面了而是登录页面,也就是前端提供的静态资源中的login.html文件。在该文件中编写对应的js代码代码中的console...
  • 注册界面 要求:用户名只能是字母或者数字或者下划线,不能以数字开头,用户名长度在6到20之间 密码两次验证必须一致,用户名密码不能为空。     &lt;!DOCTYPE html&gt; &lt;html&...
  • 如何制作一个简单的HTML登录页面(附代码

    千次阅读 多人点赞 2020-05-26 19:43:44
    实例:制作一个HTML登录页面,包含邮箱,登录密码,立即注册,忘记密码等,代码如下: HTML部分: <div class="dowebok"> <div class="logo"></div> <div class="form-item"> <...
  • HTML代码: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <...
  • 几乎每个网站都会有登录页面,那你知道如何写HTML登录页面吗?这篇文章就和大家分享一个HTML简单登录界面的代码,有一定的参考价值,感兴趣的朋友可以看看。制作登录页面需要用到很多CSS属性和HTML标签,如有不清楚...
  • 目录目录介绍用户登录页面 - login.html用户登录Handler登录失败页面 - login-failure.jsp用户登录的业务逻辑DAO层 - UserMapper总结介绍上篇文章我们实现了简单的用户注册功能,现在我们来实现用户登录功能。...
  • HTML 简单的前端登录注册页面

    千次阅读 2020-02-02 22:04:12
    刚开始学前端的时候照着视频写了一个比较简单的注册页面,只有html, 还没有用到css。 效果图 (为以防运行失败,加背景的语句不在代码里) <!DOCTYPE html> <html lang="en"> <head> <meta ...
  • 首先看一下效果图,登录界面,后面的...之后点击“立即注册”就可以来到注册页面: 接下来就直接上代码了,只设计前端界面部分: 1. html部分: 登录/注册 登录/注册 请登录 立即注册> 记住我
  • 用基本的html和css编写网站的模板。有部分模块可以直接使用,适合新手作为基础项目来练习。整体布局完整,代码合理

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 993
精华内容 397
关键字:

html登录注册页面代码