jQuery超炫联系方式表单美化特效代码下载

jQuery超炫联系方式表单美化特效代码下载

1. 引入CSS

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

2. 引入JS

<script src="js/modernizr.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/main.js"></script>

3. HTML代码

<div class="zzsc-container">
	<header class="zzsc-header bgcolor-11">
		<h1>jQuery和CSS3超炫联系方式表单美化插件</h1>
	</header>
	<!--<div class="zzsc-content bgcolor-8">
	</div>-->
	<form class="cd-form floating-labels">
		<fieldset>
			<legend>Account Info</legend>
			<div class="error-message">
				<p>Please enter a valid email address</p>
			</div>
			<div class="icon">
				<label class="cd-label" for="cd-name">Name</label>
				<input class="user" type="text" name="cd-name" id="cd-name" required>
			</div> 
			<div class="icon">
				<label class="cd-label" for="cd-company">Company</label>
				<input class="company" type="text" name="cd-company" id="cd-company">
			</div> 
			<div class="icon">
				<label class="cd-label" for="cd-email">Email</label>
				<input class="email error" type="email" name="cd-email" id="cd-email" required>
			</div>
		</fieldset>
		<fieldset>
			<legend>Project Info</legend>
			<div>
				<h4>Budget</h4>
				<p class="cd-select icon">
					<select class="budget">
						<option value="0">Select Budget</option>
						<option value="1">&lt; $5000</option>
						<option value="2">$5000 - $10000</option>
						<option value="3">&gt; $10000</option>
					</select>
				</p>
			</div> 
			<div>
				<h4>Project type</h4>
				<ul class="cd-form-list">
					<li>
						<input type="radio" name="radio-button" id="cd-radio-1" checked>
						<label for="cd-radio-1">Choice 1</label>
					</li>
					<li>
						<input type="radio" name="radio-button" id="cd-radio-2">
						<label for="cd-radio-2">Choice 2</label>
					</li>
					<li>
						<input type="radio" name="radio-button" id="cd-radio-3">
						<label for="cd-radio-3">Choice 3</label>
					</li>
				</ul>
			</div>
			<div>
				<h4>Features</h4>
				<ul class="cd-form-list">
					<li>
						<input type="checkbox" id="cd-checkbox-1">
						<label for="cd-checkbox-1">Option 1</label>
					</li>
					<li>
						<input type="checkbox" id="cd-checkbox-2">
						<label for="cd-checkbox-2">Option 2</label>
					</li>
					<li>
						<input type="checkbox" id="cd-checkbox-3">
						<label for="cd-checkbox-3">Option 3</label>
					</li>
				</ul>
			</div>
			<div class="icon">
				<label class="cd-label" for="cd-textarea">Project description</label>
				<textarea class="message" name="cd-textarea" id="cd-textarea" required></textarea>
			</div>
			<div>
				<input type="submit" value="Send Message">
			</div>
		</fieldset>
	</form>
</div>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

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