jquery選項卡滑動表單步驟填寫個人信息提交表單



224 893 298



特效描述:選項卡滑動表單 步驟填寫個人信息 表單提交,賬戶 個人信息 設置——選項卡滑動表單

代碼結構

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="[email protected]" 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

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

老夫子电子