美文网首页
报名表单

报名表单

作者: 吾娛生活 | 来源:发表于2019-04-27 21:26 被阅读0次

    <!DOCTYPE html>

    <html lang="zh">

    <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>报名</title>

    <style type="text/css">

    .center{text-align: center;}

    .login-page {

      width: 360px;

      padding: 8% 0 0;

      margin: auto;

    }

    .form {

      position: relative;

      z-index: 1;

      background: #FFFFFF;

      max-width: 360px;

      margin: 0 auto 100px;

      padding: 45px;

      text-align: center;

      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

    }

    .form input {

      font-family: "Roboto", sans-serif;

      outline: 0;

      background: #f2f2f2;

      width: 100%;

      border: 0;

      margin: 0 0 15px;

      padding: 15px;

      box-sizing: border-box;

      font-size: 14px;

    }

    .form button {

      font-family: "Microsoft YaHei","Roboto", sans-serif;

      text-transform: uppercase;

      outline: 0;

      background: #4CAF50;

      width: 100%;

      border: 0;

      padding: 15px;

      color: #FFFFFF;

      font-size: 14px;

      -webkit-transition: all 0.3 ease;

      transition: all 0.3 ease;

      cursor: pointer;

    }

    .form button:hover,.form button:active,.form button:focus {

      background: #43A047;

    }

    .form .message {

      margin: 15px 0 0;

      color: #b3b3b3;

      font-size: 12px;

    }

    .form .message a {

      color: #4CAF50;

      text-decoration: none;

    }

    .form .register-form {

      display: none;

    }

    .container {

      position: relative;

      z-index: 1;

      max-width: 300px;

      margin: 0 auto;

    }

    .container:before, .container:after {

      content: "";

      display: block;

      clear: both;

    }

    .container .info {

      margin: 50px auto;

      text-align: center;

    }

    .container .info h1 {

      margin: 0 0 15px;

      padding: 0;

      font-size: 36px;

      font-weight: 300;

      color: #1a1a1a;

    }

    .container .info span {

      color: #4d4d4d;

      font-size: 12px;

    }

    .container .info span a {

      color: #000000;

      text-decoration: none;

    }

    .container .info span .fa {

      color: #EF3B3A;

    }

    body {

      background: #76b852; /* fallback for old browsers */

      background: -webkit-linear-gradient(right, #76b852, #8DC26F);

      background: -moz-linear-gradient(right, #76b852, #8DC26F);

      background: -o-linear-gradient(right, #76b852, #8DC26F);

      background: linear-gradient(to left, #76b852, #8DC26F);

      font-family: "Roboto", sans-serif;

      -webkit-font-smoothing: antialiased;

      -moz-osx-font-smoothing: grayscale;     

    }

    .shake_effect{

      -webkit-animation-name: shake;

      animation-name: shake;

      -webkit-animation-duration: 1s;

      animation-duration: 1s;

    }

    @-webkit-keyframes shake {

      from, to {

      -webkit-transform: translate3d(0, 0, 0);

      transform: translate3d(0, 0, 0);

      }

      10%, 30%, 50%, 70%, 90% {

      -webkit-transform: translate3d(-10px, 0, 0);

      transform: translate3d(-10px, 0, 0);

      }

      20%, 40%, 60%, 80% {

      -webkit-transform: translate3d(10px, 0, 0);

      transform: translate3d(10px, 0, 0);

      }

    }

    @keyframes shake {

      from, to {

      -webkit-transform: translate3d(0, 0, 0);

      transform: translate3d(0, 0, 0);

      }

      10%, 30%, 50%, 70%, 90% {

      -webkit-transform: translate3d(-10px, 0, 0);

      transform: translate3d(-10px, 0, 0);

      }

      20%, 40%, 60%, 80% {

      -webkit-transform: translate3d(10px, 0, 0);

      transform: translate3d(10px, 0, 0);

      }

    }

    p.center{

      color: #fff;font-family: "Microsoft YaHei";

    }

    #tip {

        position: absolute;

        top: 50px;

        left: 50%;

        display: none;

        z-index: 9999;

    }

    </style>

    </head>

    <body>

    <strong id="tip"></strong>

    <div class="htmleaf-container">

    <div id="wrapper" class="login-page">

      <div id="login_form" class="form">

      <form class="login-form">

        <input type="text" placeholder="姓名" id="user_name"/>

        <input type="phone" placeholder="手机号" id="password"/>

        <button id="login">报 名</button>

      </form>

      </div>

    </div>

    </div>

    <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    //tip是提示信息,type:'success'是成功信息,'danger'是失败信息,'info'是普通信息,'warning'是警告信息

    function showTip(tip, type) {

        var $tip = $('#tip');

        $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', - $tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);

    }

    function check_login()

    {

    var name=$("#user_name").val();

    var pass=$("#password").val();

    if(name.length>0 && pass.length==11)

    {

    $.ajax({

    url : 'your url',

    data:{name:name,phone:pass},

    cache : false,

    async : false,

    type : "POST",

    dataType : 'json/xml/html',

    success : function (result){

    showtip("报名成功!","info");

      $("#user_name").val("");

      $("#password").val("");

    }

    });

    }

    else

    {

      $("#login_form").removeClass('shake_effect'); 

      setTimeout(function()

      {

      $("#login_form").addClass('shake_effect')

      },1); 

    }

    }

    $(function(){

    $("#login").click(function(){

      check_login();

      return false;

    })

    $('.message a').click(function () {

      $('form').animate({

      height: 'toggle',

      opacity: 'toggle'

      }, 'slow');

    });

    })

    </script>

    </body>

    </html>

    相关文章

      网友评论

          本文标题:报名表单

          本文链接:https://www.haomeiwen.com/subject/gaelnqtx.html