jQuery+CSS3个人资料分步填写表单

一款jQuery+CSS3个人资料分步填写表单的特效代码，表单的输入框有聚焦发光的特效，可以自由切换上一步或下一步，小伙伴们可以自由加入验证的代码，实现点击时的验证，发挥一下想象吧，喜欢的先收下哦。

分类：表单代码 > 注册登录框难易：初级

查看演示下载资源下载积分： 30 积分

页面的head部分仅需要引入一个CSS样式文件，代码如下：

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

页面的body部分结构很清晰，三个步骤放入一个form表单里，代码如下：

<form>
	<fieldset class="alpha">
		<legend><b>1. </b>个人信息</legend>
		<div class="frow">
			<input class="item" placeholder="用户名" type="text">
		</div>
		<div class="frow">
			<input class="item" placeholder="邮箱" type="email">
		</div>
		<div class="frow">
			<input class="item" placeholder="密码" type="password">
		</div>
		<div class="frow">
			<a class="next-step" href="#">下一步</a>
		</div>
	</fieldset>
	<fieldset class="beta">
		<legend><b>2. </b>社交信息</legend>
		<div class="frow">
			<input class="item" placeholder="微信" required type="url">
		</div>
		<div class="frow">
			<input class="item" placeholder="新浪微博" required type="url">
		</div>
		<div class="frow">
			<input class="item" placeholder="腾讯微博" required type="url">
		</div>
		<div class="frow">
			<a class="prev-step" href="#">上一步</a>
		</div>
		<div class="frow">
			<input class="submit" type="submit" value="完成">
		</div>
	</fieldset>
	<fieldset class="charlie">
		<legend><b>3. </b>完成</legend>
		<div class="frow">
			<p>您的信息已经填写完整，谢谢！</p>
		</div>
	</fieldset>
</form>

为了实现步骤切换的效果，页面的底部需要引入jQuery库和一个JS文件，代码如下：

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