jQuery CSS3制作動畫表單分步驟注冊表單切換動畫代碼(不兼容IE6/7)



148 589 197



特效描述:動畫表單 分步驟注冊表單 表單切換動畫,jQueryCSS3分步驟注冊表單切換動畫,簡單美觀大氣,適合學習使用

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

3. 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" />
<title>jQuery+css3注冊 </title>
</head>
<form id="msform">
	<!-- progressbar -->
	<ul id="progressbar">
		<li class="active">賬戶注冊</li>
		<li>關聯微博</li>
		<li>詳細資料</li>
	</ul>
	<!-- fieldsets -->
	<fieldset>
		<h2 class="fs-title">創建你的賬戶</h2>
		<h3 class="fs-subtitle">這是第一步</h3>
		<input type="text" name="email" placeholder="Email" />
		<input type="password" name="pass" placeholder="Password" />
		<input type="password" name="cpass" placeholder="Confirm Password" />
		<input type="button" name="next" class="next action-button" value="Next" />
	</fieldset>
	<fieldset>
		<h2 class="fs-title">公共賬號</h2>
		<h3 class="fs-subtitle">你個人常用的賬號</h3>
		<input type="text" name="twitter" placeholder="Twitter" />
		<input type="text" name="facebook" placeholder="Facebook" />
		<input type="text" name="gplus" placeholder="Google Plus" />
		<input type="button" name="previous" class="previous action-button" value="Previous" />
		<input type="button" name="next" class="next action-button" value="Next" />
	</fieldset>
	<fieldset>
		<h2 class="fs-title">個人詳細資料</h2>
		<h3 class="fs-subtitle">我們將會為你保存它</h3>
		<input type="text" name="fname" placeholder="First Name" />
		<input type="text" name="lname" placeholder="Last Name" />
		<input type="text" name="phone" placeholder="Phone" />
		<textarea name="address" placeholder="Address"></textarea>
		<input type="button" name="previous" class="previous action-button" value="Previous" />
		<input type="submit" name="submit" class="submit action-button" value="Submit" />
	</fieldset>
</form>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 文本框 text文本框 選項卡自動切換 登錄框
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子