jquery选项卡滑动表单步骤填写个人信息提交表单



215 857 286



特效描述:选项卡滑动表单 步骤填写个人信息 表单提交,账户 个人信息 设置——选项卡滑动表单

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="sliding.form.js"></script>

3. HTML代码

	<div id="wrapper">
		<div id="steps">
			<form id="formElem" name="formElem" action="" method="post">
				<div class="step">
					<h3>账号</h3>
					<p>
						<label for="username">用户名</label>
						<input id="username" name="username" />
					</p>
					<p>
						<label for="email">邮箱</label>
						<input id="email" name="email" placeholder="info@tympanus.net" type="email" AUTOCOMPLETE=OFF />
					</p>
					<p>
						<label for="password">密码</label>
						<input id="password" name="password" type="password" AUTOCOMPLETE=OFF />
					</p>
				</div>
				<div class="step">
					<h3>个人信息</h3>
					<p>
						<label for="name">姓名</label>
						<input id="name" name="name" type="text" AUTOCOMPLETE=OFF />
					</p>
					<p>
						<label for="country">国籍</label>
						<input id="country" name="country" type="text" AUTOCOMPLETE=OFF />
					</p>
					<p>
						<label for="phone">手机</label>
						<input id="phone" name="phone" placeholder="e.g. +351215555555" type="tel" AUTOCOMPLETE=OFF />
					</p>
					<p>
						<label for="website">个人网站</label>
						<input id="website" name="website" placeholder="e.g. http://www.codrops.com" type="tel" AUTOCOMPLETE=OFF />
					</p>
				</div>
				<div class="step">
					<h3>付款方式</h3>
					<p>
						<label for="cardtype">信用卡</label>
						<select id="cardtype" name="cardtype">
							<option>Visa</option>
							<option>Mastercard</option>
							<option>American Express</option>
						</select>
					</p>
					<p>
						<label for="cardnumber">信用卡号</label>
						<input id="cardnumber" name="cardnumber" type="number" AUTOCOMPLETE=OFF />
					</p>
					<p>
						<label for="secure">安全码</label>
						<input id="secure" name="secure" type="number" AUTOCOMPLETE=OFF />
					</p>
					<p>
						<label for="namecard">持卡人姓名</label>
						<input id="namecard" name="namecard" type="text" AUTOCOMPLETE=OFF />
					</p>
				</div>
				<div class="step">
					<h3>设置</h3>
					<p>
						<label for="newsletter">时事通讯</label>
						<select id="newsletter" name="newsletter">
							<option value="Daily" selected>每天的</option>
							<option value="Weekly">每周的</option>
							<option value="Monthly">每月的</option>
							<option value="Never">从来不</option>
						</select>
					</p>
					<p>
						<label for="updates">更新内容</label>
						<select id="updates" name="updates">
							<option value="1" selected>Package 1</option>
							<option value="2">Package 2</option>
							<option value="0">Don't send updates</option>
						</select>
					</p>
					<p>
						<label for="tagname">通讯标签</label>
						<input id="tagname" name="tagname" type="text" AUTOCOMPLETE=OFF />
					</p>
				</div>
				<div class="step">
					<h3>确认</h3>
					<p>一切形式正确填写如果所有的步骤有一个绿色的对号图标。一个红色的对号图标表明,一些领域遗失或填写无效数据。在这种最后一步,用户可以确认提交的形式。</p>
					<p class="submit">
						<button id="registerButton" type="submit">完成注册</button>
					</p>
				</div>
			</form>
		</div>
		<div id="navigation" style="display:none;">
			<ul>
				<li class="selected">
					<a href="#">账号</a>
				</li>
				<li>
					<a href="#">个人信息</a>
				</li>
				<li>
					<a href="#">付款方式</a>
				</li>
				<li>
					<a href="#">设置</a>
				</li>
				<li>
					<a href="#">确认</a>
				</li>
			</ul>
		</div>
	</div>



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 切换按钮 表单 表单美化 表单插件 表单美化插件 滑动选项卡 滑动切换 文本框 text文本框 表单提交

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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