HTML5手机登录注册表单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5手机登录注册表单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>HTML5手机登录注册表单代码</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
	<div class="demo">
		<nav class="main_nav">
			<ul>
				<li><a class="cd-signin" href="#0">登录</a></li>
				<li><a class="cd-signup" href="#0">注册</a></li>
			</ul>
		</nav>
	</div>
	
	<div class="cd-user-modal"> 
		<div class="cd-user-modal-container">
			<ul class="cd-switcher">
				<li><a href="#0">用户登录</a></li>
				<li><a href="#0">注册新用户</a></li>
			</ul>

			<div id="cd-login"> <!-- 登录表单 -->
				<form class="cd-form">
					<p class="fieldset">
						<label class="image-replace cd-username" for="signin-username">用户名</label>
						<input class="full-width has-padding has-border" id="signin-username" type="text" placeholder="输入用户名">
					</p>

					<p class="fieldset">
						<label class="image-replace cd-password" for="signin-password">密码</label>
						<input class="full-width has-padding has-border" id="signin-password" type="text"  placeholder="输入密码">
					</p>

					<p class="fieldset">
						<input type="checkbox" id="remember-me" checked>
						<label for="remember-me">记住登录状态</label>
					</p>

					<p class="fieldset">
						<input class="full-width2" type="submit" value="登 录">
					</p>
				</form>
			</div>

			<div id="cd-signup"> <!-- 注册表单 -->
				<form class="cd-form">
					<p class="fieldset">
						<label class="image-replace cd-username" for="signup-username">用户名</label>
						<input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="输入用户名">
					</p>

					<p class="fieldset">
						<label class="image-replace cd-email" for="signup-email">邮箱</label>
						<input class="full-width has-padding has-border" id="signup-email" type="email" placeholder="输入mail">
					</p>

					<p class="fieldset">
						<label class="image-replace cd-password" for="signup-password">密码</label>
						<input class="full-width has-padding has-border" id="signup-password" type="text"  placeholder="输入密码">
					</p>

					<p class="fieldset">
						<input type="checkbox" id="accept-terms">
						<label for="accept-terms">我已阅读并同意 <a href="#0">用户协议</a></label>
					</p>

					<p class="fieldset">
						<input class="full-width2" type="submit" value="注册新用户">
					</p>
				</form>
			</div>
			<a href="#0" class="cd-close-form">关闭</a>
		</div>
	</div> 
</body>
</html>

JS代码(main.js):

jQuery(document).ready(function($){
	var $form_modal = $('.cd-user-modal'),$form_login = $form_modal.find('#cd-login'),$form_signup = $form_modal.find('#cd-signup'),$form_modal_tab = $('.cd-switcher'),$tab_login = $form_modal_tab.children('li').eq(0).children('a'),$tab_signup = $form_modal_tab.children('li').eq(1).children('a'),$main_nav = $('.main_nav');
	//弹出窗口$main_nav.on('click',function(event){
	if( $(event.target).is($main_nav) ){
	// on mobile open the submenu$(this).children('ul').toggleClass('is-visible');
}
else{
	// on mobile close submenu$main_nav.children('ul').removeClass('is-visible');
	//show modal layer$form_modal.addClass('is-visible');
	//show the selected form( $(event.target).is('.cd-signup') ) ? signup_selected():login_selected();
}
}
);
	//关闭弹出窗口$('.cd-user-modal').on('click',function(event){
	if( $(event.target).is($form_modal) || $(event.target).is('.cd-close-form') ){
	$form_modal.removeClass('is-visible');
}
}
);
	//使用Esc键关闭弹出窗口$(document).keyup(function(event){
	if(event.which=='27'){
	$form_modal.removeClass('is-visible');
}
}
);
	//切换表单$form_modal_tab.on('click',function(event){
	event.preventDefault();
	( $(event.target).is( $tab_login ) ) ? login_selected():signup_selected();
}
);
	function login_selected(){
	$form_login.addClass('is-selected');
	$form_signup.removeClass('is-selected');
	$form_forgot_password.removeClass('is-selected');
	$tab_login.addClass('selected');
	$tab_signup.removeClass('selected');
}
function signup_selected(){
	$form_login.removeClass('is-selected');
	$form_signup.addClass('is-selected');
	$form_forgot_password.removeClass('is-selected');
	$tab_login.removeClass('selected');
	$tab_signup.addClass('selected');
}
}
);

CSS代码(style.css):

.main_nav{width:300px;height:60px;margin:60px auto 10px auto}
.main_nav li{float:left;width:60px;margin-right:10px;font-size:16px;padding:.6em 1em;border-radius:3em;background:#2f889a;text-align:center}
.main_nav li a{color:#fff}
.cd-user-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(52,54,66,0.9);z-index:3;overflow-y:auto;cursor:pointer;visibility:hidden;opacity:0;-webkit-transition:opacity 0.3s 0,visibility 0 0.3s;-moz-transition:opacity 0.3s 0,visibility 0 0.3s;transition:opacity 0.3s 0,visibility 0 0.3s;}
.cd-user-modal.is-visible{visibility:visible;opacity:1;-webkit-transition:opacity 0.3s 0,visibility 0 0;-moz-transition:opacity 0.3s 0,visibility 0 0;transition:opacity 0.3s 0,visibility 0 0;}
.cd-user-modal.is-visible .cd-user-modal-container{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);}
.cd-user-modal-container{position:relative;width:90%;max-width:600px;background:#FFF;margin:3em auto 4em;cursor:auto;border-radius:0.25em;-webkit-transform:translateY(-30px);-moz-transform:translateY(-30px);-ms-transform:translateY(-30px);-o-transform:translateY(-30px);transform:translateY(-30px);-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;transition-property:transform;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;transition-duration:0.3s;}
.cd-user-modal-container .cd-switcher:after{content:"";display:table;clear:both;}
.cd-user-modal-container .cd-switcher li{width:50%;float:left;text-align:center;}
.cd-user-modal-container .cd-switcher li:first-child a{border-radius:.25em 0 0 0;}
.cd-user-modal-container .cd-switcher li:last-child a{border-radius:0 .25em 0 0;}
.cd-user-modal-container .cd-switcher a{display:block;width:100%;height:50px;line-height:50px;background:#d2d8d8;color:#809191;}
.cd-user-modal-container .cd-switcher a.selected{background:#FFF;color:#505260;}
@media only screen and (min-width:600px){.cd-user-modal-container{margin:4em auto;}
.cd-user-modal-container .cd-switcher a{height:70px;line-height:70px;}
}
.cd-form{padding:1.4em;}
.cd-form .fieldset{position:relative;margin:1.4em 0;}
.cd-form .fieldset:first-child{margin-top:0;}
.cd-form .fieldset:last-child{margin-bottom:0;}
.cd-form label{font-size:16px;font-size:0.875rem;}
.cd-form label.image-replace{/* replace text with an icon */
 display:inline-block;position:absolute;left:15px;top:50%;bottom:auto;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);height:20px;width:20px;overflow:hidden;text-indent:100%;white-space:nowrap;color:transparent;text-shadow:none;background-repeat:no-repeat;background-position:50% 0;}
.cd-form label.cd-username{background-image:url("../img/cd-icon-username.svg");}
.cd-form label.cd-email{background-image:url("../img/cd-icon-email.svg");}
.cd-form label.cd-password{background-image:url("../img/cd-icon-password.svg");}
.cd-form input{margin:0;padding:0;border-radius:0.25em;}
.cd-form input.full-width{width:80%;}
.cd-form input.full-width2{width:94%;}
.cd-form input.has-padding{padding:12px 20px 12px 50px;}
.cd-form input.has-border{border:1px solid #d2d8d8;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;}
.cd-form input.has-border:focus{border-color:#343642;box-shadow:0 0 5px rgba(52,54,66,0.1);outline:none;}
.cd-form input.has-error{border:1px solid #d76666;}
.cd-form input[type=password]{/* space left for the HIDE button */
 padding-right:65px;}
.cd-form input[type=submit]{padding:16px 0;cursor:pointer;background:#2f889a;color:#FFF;font-weight:bold;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;}
.no-touch .cd-form input[type=submit]:hover,.no-touch .cd-form input[type=submit]:focus{background:#3599ae;outline:none;}
@media only screen and (min-width:600px){.cd-form{padding:2em;}
.cd-form .fieldset{margin:2em 0;}
.cd-form .fieldset:first-child{margin-top:0;}
.cd-form .fieldset:last-child{margin-bottom:0;}
.cd-form input.has-padding{padding:16px 20px 16px 50px;}
.cd-form input[type=submit]{padding:16px 0;}
}
.cd-close-form{/* form X button on top right */
 display:block;position:absolute;width:40px;height:40px;right:0;top:-40px;background:url("../img/cd-icon-close.svg") no-repeat center center;text-indent:100%;white-space:nowrap;overflow:hidden;}
@media only screen and (min-width:1170px){.cd-close-form{display:none;}
}
#cd-login,#cd-signup,#cd-reset-password{display:none;}
#cd-login.is-selected,#cd-signup.is-selected,#cd-reset-password.is-selected{display:block;}

附件:下载该文件资源,减少时间成本(增值服务)