HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！

HTML+CSS+JS实现十款好看的登录注册界面，赶紧收藏起来吧！

需要的小伙伴欢迎评论区留言

界面一：

代码如下：

"demo form-bg">
        
"container">

            
"row">
                
"col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6">
                    
"form-horizontal">
                        
"heading">注册页面
                        
"form-group">
                            "fa fa-user">"login[username]" type="email" class="form-control" placeholder="Username" id="exampleInputEmail1">
                        
                        
"form-group">
                            "fa fa-lock">"login[password]" type="password" class="form-control" placeholder="Password" />
                        
                        
"form-group">
                            "submit" class="btn btn-default">"fa fa-arrow-right">
                            "" class="create_account">注册
                        
                    
                
            
        
    
    

界面二

部分代码如下：

用户登录
"avtar">
	"images/avtar.png" />

	
"login-form">
		
新用户?"#">在这注册!
			

				
"form-text">
					"text" class="text" value="用户名" οnfοcus="this.value = '';" οnblur="if (this.value == '') {
     this.value = 'USERNAME';}" >
					"password" value="密码" οnfοcus="this.value = '';" οnblur="if (this.value == '') {
     this.value = 'Password';}">
				
					"submit"value="GO" >
			
	

界面三

代码如下：

"window" style="display:none;">

	
"page page-front">
		
"page-content">
			
"input-row">
				"label fadeIn">用户名
				"username" type="text" data-fyll="pineapple" class="input fadeIn delay1"/>
			
			
"input-row">
				"label fadeIn delay2">密码
				"password" type="password" data-fyll="hackmeplease" class="input fadeIn delay3"/>
			
			
"input-row perspective">
				"submit" class="button load-btn fadeIn delay4">
					"default">"ion-arrow-right-b">登录
					
"load-state">
						
"ball">
						
"ball">
						
"ball">
					
				
			
		
	
	

界面四

部分代码如下：

"main">
			
"login">
				
"log-con">
					登录
					"text" class="name" placeholder="请输入用户名"/>
					"text" class="password" placeholder="请输入密码"/>
					"text" class="code" placeholder="请输入验证码"/>
					"button" id="code" οnclick="change();"/>
					立即登录
				
			
		

界面五

部分代码如下：

 
"limiter">
        
"container-login100">
            
"wrap-login100">
                
"login100-form-title" style="background-image: url(images/bg-01.jpg);">
                    "login100-form-title-1">登 录
                

                
"login100-form validate-form">
                    
"wrap-input100 validate-input m-b-26" data-validate="用户名不能为空">
                        "label-input100">用户名
                        "input100" type="text" name="username" placeholder="请输入用户名">
                        "focus-input100">
                    

                    
"wrap-input100 validate-input m-b-18" data-validate="密码不能为空">
                        "label-input100">密码
                        "input100" type="password" name="pass" placeholder="请输入用户名">
                        "focus-input100">
                    

                    
"flex-sb-m w-full p-b-30">
                        
"contact100-form-checkbox">
                            "input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
                            "label-checkbox100" for="ckb1">记住我
                        

                        

                            "javascript:" class="txt1">忘记密码？
                        
                    

                    
"container-login100-form-btn">
                        "login100-form-btn">登 录
                    
                
            
        
    

界面六

"container right-panel-active">
			
			
"container__form container--signup">
				
"#" class="form" id="form1">
					
"form__title">注 册
					"text" placeholder="用户名" class="input" />
					"email" placeholder="Email" class="input" />
                    "password" placeholder="密码" class="input" />
					"btn">注 册
				
			

			
			
"container__form container--signin">
				
"#" class="form" id="form2">
					
"form__title">登 录
					"email" placeholder="Email" class="input" />
					"password" placeholder="密码" class="input" />
					"#" class="link">忘记密码?
					"btn">注 册
				
			

			
			
"container__overlay">
				
"overlay">
					
"overlay__panel overlay--left">
						"btn" id="signIn">登 录
					
					
"overlay__panel overlay--right">
						"btn" id="signUp">注 册
					
				
			
		

界面七

 
"dowebok">
        
"logo">
        
"form-item">
            "username" type="text" autocomplete="off" placeholder="邮箱">
            
"tip">请输入合法的邮箱地址
        
        
"form-item">
            "password" type="password" autocomplete="off" placeholder="登录密码">
            
"tip">邮箱或密码不正确
        
        
"form-item">"submit">登 录
        
"reg-bar">
            "reg" href="#" target="_blank">立即注册
            "forget" href="#" target="_blank">忘记密码
        
    

界面八

"dowebok">
	
"container-login100">
		
"wrap-login100">
			
"login100-pic js-tilt" data-tilt>
				"images/img-01.png" alt="IMG">
			

			
"login100-form validate-form">
				"login100-form-title">
					会员登陆
				

				
"wrap-input100 validate-input">
					"input100" type="text" name="email" placeholder="邮箱">
					"focus-input100">
					"symbol-input100">
						"fa fa-envelope" aria-hidden="true">
					
				

				
"wrap-input100 validate-input">
					"input100" type="password" name="pass" placeholder="密码">
					"focus-input100">
					"symbol-input100">
						"fa fa-lock" aria-hidden="true">
					
				
				
				
"container-login100-form-btn">
					"login100-form-btn">
						登陆
					
				

				
"text-center p-t-12">
					"txt2" href="javascript:">
						忘记密码？
					
				

				
"text-center p-t-136">
					"txt2" href="#" >
							还没有账号？立即注册
						"fa fa-long-arrow-right m-l-5" aria-hidden="true">
					
				
			
		
	

界面九

"header">
	
"header_title">
		"title_con">学工系统
	


"content">
	
		
"con">
		
"con_title">
			"con_title_sp">欢迎登录学工系统
		
		
"con_panel">
			
"con_input">
				用户名："text" placeholder="学号/工号"/>
			
			
"con_input">
				密 ; ; ; ;码："text" placeholder="密码"/>
			
			
"con_select">
				"radio" name="t1" value="学生" />学生
				"radio" name="t1" value="教师" />教师
				"radio" name="t1" value="管理员" />管理员
			
			"submit" value="登录" class="submit-btn"/>
		
	
	

 

界面十

"main"> 
		
		
"login-form"> 
			
SignIn Form
 
			
"agileits-top">
				
"#" method="post">
					
"styled-input">
						"text" name="User Name" required=""/>
						User Name
						
					
					
"styled-input">
						"password" name="Password" required=""> 
						Password
						
					
 
					
"wthree-text"> 
						
 
							

								"checkbox" id="brand" value="">
								"brand"> Remember me ?  
							
							
 "#">Forgot password? 
						
						
"clear"> 
					
  
				
			
			
"agileits-bottom">
				
"#" method="post">
					"submit" value="Sign In">