首页>>表单>>原生JS实现登录注册表单滑块验证码(2020-04-28)

原生JS实现登录注册表单滑块验证码

原生JS实现登录注册表单滑块验证码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container" style="padding-top:100px">  
  2.     <div class="login-wrap">  
  3.         <div class="login-html">  
  4.             <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">登录</label>  
  5.             <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">注册</label>  
  6.             <div class="login-form">  
  7.                 <form>  
  8.                 <div class="sign-in-htm">  
  9.                     <div class="group">  
  10.                         <label for="user" class="label">用户名</label>  
  11.                         <input id="username" name="username" value="admin" type="text" class="input">  
  12.                     </div>  
  13.                     <div class="group">  
  14.                         <label for="pass" class="label">密码</label>  
  15.                         <input id="password" type="password" class="input" data-type="password">  
  16.                     </div>  
  17.                     <div class="group">  
  18.                         <div class="container">  
  19.                             <div id="captcha" style="position: relative" data-type="password"></div>  
  20.                             <div id="msg"></div>  
  21.                         </div>  
  22.                     </div>  
  23.                     <div class="group">  
  24.                         <input id="check" type="checkbox" class="check" checked>  
  25.                         <label for="check"><span class="icon"></span> 保持登录</label>  
  26.                     </div>                        
  27.                     <div class="group">  
  28.                         <input type="button" class="button" value="登录" onClick="sub()">  
  29.                     </div>  
  30.                     <div class="hr"></div>  
  31.                     <div class="foot-lnk">  
  32.                         <a href="#forgot">忘记密码?</a>  
  33.                     </div>  
  34.                 </div>  
  35.                 </form>  
  36.                 <form>  
  37.                 <div class="sign-up-htm">  
  38.                     <div class="group">  
  39.                         <label for="user" class="label">用户名</label>  
  40.                         <input id="users" type="text" class="input">  
  41.                     </div>  
  42.                     <div class="group">  
  43.                         <label for="pass" class="label">密码</label>  
  44.                         <input id="passs" type="password" class="input" data-type="password">  
  45.                     </div>  
  46.                     <div class="group">  
  47.                         <label for="pass" class="label">重复密码</label>  
  48.                         <input id="passs" type="password" class="input" data-type="password">  
  49.                     </div>  
  50.                     <div class="group">  
  51.                         <label for="pass" class="label">邮箱地址</label>  
  52.                         <input id="pass" type="text" class="input">  
  53.                     </div>  
  54.                     <div class="group">  
  55.                         <a href="register.html"><input type="submit" class="button" value="注册"></a>  
  56.                     </div>  
  57.                     <div class="hr"></div>  
  58.                     <div class="foot-lnk">  
  59.                         <label for="tab-1">已经成员?</label>  
  60.                     </div>  
  61.                 </div>  
  62.                 </form>  
  63.             </div>  
  64.         </div>  
  65.     </div>  
  66. </div>  

 


原文地址:http://www.freejs.net/article_biaodan_856.html