html5点击弹出手机登录注册表单提交代码



199 794 265



特效描述:html5点击弹出 手机登录 注册表单提交代码,html5手机登录表单,手机注册表单,弹出表单,手机弹出。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

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

3. HTML代码

	<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> 



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 图片头像上传 文字提示框 文件上传 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到