标签:group email post 最好 got action lock ase type
来源
https://bootsnipp.com/snippets/featured/login-and-register-tabbed-form
jquery插件
需导入bootstrap插件
这个实现真实的功能的话,用ajax最好,避免注册刷新的时候,回到默认的登录,导致问题
HTML页面
{% extends ‘base.html‘ %} {% load staticfiles %} {% block login_register %} <link rel="stylesheet" href="{% static ‘login/my_login.css‘ %}"> {# <title>login</title>#} <style> .btn-login { background-color: #59B2E6; } .btn-register { background-color: #1CB94A; } </style> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="panel panel-login"> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <a href="#" class="active" id="login-form-link">Login</a> </div> <div class="col-xs-6"> <a href="#" id="register-form-link">Register</a> </div> </div> <hr> </div> <div class="panel-body"> <div class="row"> <div class="col-lg-12"> <form id="login-form" action="/login/" method="post" role="form" style="display: block;"> {% csrf_token %} <div class="form-group"> <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username"> </div> <div class="form-group"> <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password"> </div> <span>{{ mgs }}</span> <div class="form-group text-center"> <input type="checkbox" tabindex="3" class="" name="remember" id="remember"> <label for="remember"> Remember Me</label> </div> <div class="form-group"> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">{{ msg }} </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-lg-12"> <div class="text-center"> <a href="https://phpoll.com/recover" tabindex="5" class="forgot-password">Forgot Password?</a> </div> </div> </div> </div> </form> <form id="register-form" action="/" method="post" role="form" style="display: none;"> <div class="form-group"> <input type="text" name="user" id="users" tabindex="1" class="form-control" placeholder="Username" >{{ msg }} </div> <div class="form-group"> <input type="email" name="email" id="email_A" tabindex="1" class="form-control" placeholder="Email Address">{{ msg }} </div> <div class="form-group"> <input type="password" name="password" id="pwd" tabindex="2" class="form-control" placeholder="Password"> </div> <div class="form-group"> <input type="password" name="c_pwd" id="cpassword" tabindex="2" class="form-control" placeholder="Confirm Password">{{ msg }} </div> <div class="form-group"> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <input type="button" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" onclick="btn()"; value="Register Now">{{ msgs }} </div> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div> <script src="{% static ‘jquery-3.2.1.js‘ %}" type="text/javascript"></script> {#<script src="{% static ‘dist/js/bootstrap.min.js‘ %}" type="text/javascript"></script>#} <script src="{% static ‘dist/js/bootstrap.js‘ %}" type="text/javascript"></script> <script> $(function () { $(‘#login-form-link‘).click(function (e) { $("#login-form").delay(100).fadeIn(100); $("#register-form").fadeOut(100); $(‘#register-form-link‘).removeClass(‘active‘); $(this).addClass(‘active‘); e.preventDefault(); }); $(‘#register-form-link‘).click(function (e) { $("#register-form").delay(100).fadeIn(100); $("#login-form").fadeOut(100); $(‘#login-form-link‘).removeClass(‘active‘); $(this).addClass(‘active‘); e.preventDefault(); }); }); {# $("#register-submit").click(function () {#} function btn() { var user = $(‘#users‘).val(); var pwd = $(‘#pwd‘).val(); var email = $(‘#email_A‘).val(); var c_pwd = $(‘#cpassword‘).val(); console.log(user, pwd, email, c_pwd); $.ajax({ url: ‘/register/‘, type: "POST", dataType:"JSON", data: {user: user, pwd: pwd, email: email, c_pwd: c_pwd}, success: function (arg) { if(arg.status){ window.location.href=‘/login/‘ }else{ alert(arg.msg) } } }); } </script> {% endblock %}
css页面
body {
padding-top: 90px;
}
.panel-login {
border-color: #ccc;
-webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
}
.panel-login > .panel-heading {
color: #00415d;
background-color: #fff;
border-color: #fff;
text-align: center;
}
.panel-login > .panel-heading a {
text-decoration: none;
color: #666;
font-weight: bold;
font-size: 15px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.panel-login > .panel-heading a.active {
color: #029f5b;
font-size: 18px;
}
.panel-login > .panel-heading hr {
margin-top: 10px;
margin-bottom: 0px;
clear: both;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
}
.panel-login input[type="text"], .panel-login input[type="email"], .panel-login input[type="password"] {
height: 45px;
border: 1px solid #ddd;
font-size: 16px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.panel-login input:hover,
.panel-login input:focus {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-color: #ccc;
}
.btn-login {
background-color: #59B2E0;
outline: none;
color: #fff;
font-size: 14px;
height: auto;
font-weight: normal;
padding: 14px 0;
text-transform: uppercase;
border-color: #59B2E6;
}
.btn-login:hover,
.btn-login:focus {
color: #fff;
background-color: #53A3CD;
border-color: #53A3CD;
}
.forgot-password {
text-decoration: underline;
color: #888;
}
.forgot-password:hover,
.forgot-password:focus {
text-decoration: underline;
color: #666;
}
.btn-register {
background-color: #1CB94E;
outline: none;
color: #fff;
font-size: 14px;
height: auto;
font-weight: normal;
padding: 14px 0;
text-transform: uppercase;
border-color: #1CB94A;
}
.btn-register:hover,
.btn-register:focus {
color: #fff;
background-color: #1CA347;
border-color: #1CA347;
}
标签:group email post 最好 got action lock ase type
原文地址:http://www.cnblogs.com/Neeo/p/7471331.html