QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 表单代码 > jquery表单美化组件实例

jquery表单美化组件实例

jQuery简单的表单美化,制作input输入框,select下拉框,复选框,单选框表单美化实例代码。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

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

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script language="javascript">
$(function(){
	function test(func){
		var start = new Date().getTime();
		func();
		var end = new Date().getTime();
		return (end - start)+"ms";
	}
	$('.form').inform();
});
</script>

3、body引入HTML代码

<div class="form">
	<form action="" method="get">
	<div class="item">
		<span>用户名:</span>
		<label><input type="text" name="username" value="test" class="width" placeholder="用户名" /></label>
	</div>
	<div class="item">
		<span>密 码:</span>
		<label><input type="password" name="password" placeholder="密 码" /></label>
	</div>
	<div class="item">
		<span>性 别:</span>
		<label><input type="radio" checked name="gender" value="1"/>男</label> 
		<label><input type="radio" name="gender" value="2"/>女</label> 
		<label><input type="radio" name="gender" value="0" disabled />人妖</label>
	</div>
	<div class="item">
		<span>学 历:</span>
		<label>
			<select name="edu" data-ratio="true">
					<option value="5">博士后</option>
					<option value="4">研究生</option>
					<option value="3">本科</option>
					<option value="2">专科</option>
					<option value="1">高中</option>
					<option value="0">初中</option>
					<option value="5">博士后</option>
					<option value="4">研究生</option>
					<option value="3">本科</option>
					<option value="2">专科</option>
					<option value="1">高中</option>
					<option value="0">初中</option>
					<option value="5">博士后</option>
					<option value="4">研究生</option>
					<option value="3">本科</option>
					<option value="2">专科</option>
					<option value="1">高中</option>
					<option value="0">初中</option>
					<option value="5">博士后</option>
					<option value="4">研究生</option>
					<option value="3">本科</option>
					<option value="2">专科</option>
					<option value="1">高中</option>
					<option value="0">初中</option>
					<option value="5">博士后</option>
					<option value="4">研究生</option>
					<option value="3">本科</option>
					<option value="2">专科</option>
					<option value="1">高中</option>
					<option value="0">初中</option>
					<option value="5">博士后</option>
					<option value="4">研究生</option>
					<option value="3">本科</option>
					<option value="2">专科</option>
					<option value="1">高中</option>
					<option value="0">初中</option>
					<option value="5">博士后</option>
					<option value="4">研究生</option>
					<option value="3">本科</option>
					<option value="2">专科</option>
					<option value="1">高中</option>
					<option value="0">初中</option>
			</select>
		</label>
	</div>
	<div class="item">
		<span>学 历:</span>
		<label>
			<select name="edu" data-ratio="true">
				<optgroup label="高学历">
					<option value="5">博士后</option>
					<option value="4">研究生</option>
					<option value="3">本科</option>
				</optgroup>
					<option value="2">专科</option>
					<option value="1">高中</option>
					<option value="0">初中</option>
			</select>
		</label>
	</div>
	<div class="item">
		<span>学 历:</span>
		<label>
			<select name="edu" data-ratio="true">
				<optgroup label="高学历">
					<option value="5">博士后</option>
					<option value="4">研究生</option>
					<option value="3">本科</option>
				</optgroup>
					<option value="2">专科</option>
					<option value="1">高中</option>
					<option value="0">初中</option>
			</select>
		</label>
	</div>
	<div class="item">
		<span>爱 好:</span>
		<label><input type="checkbox" data-checked="full" id="c1" name="like" value="1"/>篮球</label> 
		<label><input type="checkbox" checked name="like" value="2"/>足球</label> 
		<label><input type="checkbox" name="like" value="3"/>游泳</label> 
		<label><input type="checkbox" name="like" value="4" checked />动漫</label>
	</div>
	<div class="item">
		<span>备 注:</span>
		<label><textarea name="message" class="width" placeholder="备注"></textarea></label>
	</div>
	<div class="item">
		<span></span>
		<label><button type="submit">提交</button></label>
		<label><button type="reset">重置</button></label>
	</div>
	</form>
</div>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
彩票123现在叫什么名字 www.ep96.com-快三5豹限号| www.16gm.com-k彩app-| www.0724.date-彩票店套利-| www.8696.cn-博彩源码哪里可以买| www.45355.cc-关于彩票中奖的报道| www.99050.com-财神时时彩综合工具| www.083009.com-彩票怎么算中奖了| www.167456.com-快三倍投必死| www.331644.com-中彩网东方6+1| www.436558.com-怀化彩票中奖| www.543648.com-天下精英彩免费资料| www.666265.com-航天彩虹与柔性屏| www.851146.com-重庆彩全天实时计划| www.948202.com-香港好彩网论坛| www.08637.cc-彩票扫一扫最新版本| www.60803.com-甘肃省福利彩票用途| www.038895.com-信彩腾讯分分彩计划| www.137850.com-体彩七星彩一等奖| www.227107.com-福彩快3官方直营| www.313100.com-彩客网比分直播| www.398252.com-足彩比分预测最准的| www.572321.com-竟彩网手机版本| www.657682.com-彩票高手杀号方法| www.786319.com-体彩大赢家下载| www.871176.com-星彩3d网址多少| E彩堂www.43818l.com| www.ig05.com-中国快三投注技巧| www.m29.xyz-玩网络彩票输几十万| www.53qp.cc-为什么赌快三总是输| www.0521.net-金凤凰彩票平台| www.01642.com-彩票网站制作费用| www.021838.com-竞彩网258-| www.120090.com-河南快三害死人| www.203615.com-福彩5d规律-| www.827767.com-中国彩网站-| www.916806.com-十大购彩平台| www.984107.com-辽宁福彩网手机版| www.qa32.com-福彩快三表格| www.00wj.com-天天买彩票买什么好| www.79ze.com-3d牛彩网图谜汇九| www.2179.top-福彩断组分解| www.8438.cm-开发彩票系统犯法吗| www.57656.cc-全球彩官网-| www.024052.com-福彩票双色-| www.091783.com-希望手游彩票靠谱吗| www.165422.com-民政局福彩中心工资| www.287992.com-福利彩票快开| www.382302.com-创银彩票合不合法的| www.514443.com-民权结婚彩礼| www.590836.com-体彩550前后关系| www.670358.com-狂想彩票谜语| www.754367.com-彩宝贝手机app| www.931822.com-足彩跟单软件下载| www.995177.com-zf开头的彩票网址| www.kq7.cc-内蒙古福彩兑奖中心| www.rh74.com-大发快三彩票| www.19dk.com-肥城市民中彩票| www.495.cn-欢腾彩票投注网址| www.4973.cc-幸运中彩票旧版本| www.08255.com-湖南体彩支票| www.55863.cc-一分彩出号规律| www.006420.com-辽宁体彩十一迭五表| www.083084.com-彩票中奖最多的省份| www.150321.com-v9彩票合法吗| www.309827.com-体彩小-| www.383874.com-时时彩代码接口调用| www.521600.com-重庆时时彩在哪下载| www.595076.com-好彩客官方网站| www.670472.com-七星彩票今天开奖| www.749717.com-福彩上海快三开奖| www.819863.com-中彩票捐款-| www.892025.com-浙江快乐彩玩法| www.964238.com-彩票什么是平刷| www.151364.com-彩漂的成分-| www.245079.com-易彩网彩票官网| www.326426.com-排三彩宝网走试图| www.400396.com-福彩快三套路教学| www.543230.com-体彩彩民乐-| www.648986.com-一定牛快三推荐| www.752608.com-中国福利彩票骗人| www.855148.com-有哪些彩种-| www.961248.com-网上玩彩票快输死了| 发彩www.50732h.com| www.fc37.com-三分彩票解码器| www.wv06.com-存1元送38元彩金| www.18nw.com-青海体彩11选5| www.0304.loan-如何提高彩票销量| www.6890.com-七彩阳光的预备节| www.21695.cc-体彩店的营销方案| www.63882.cc-今天竞彩14场| www.041531.com-加拿大彩票-| www.128622.com-美国百万彩票| www.201348.com-上官燕七星彩预测| www.273594.com-台湾时时彩-| www.380342.com-正规的合肥体彩店| www.503906.com-易发彩票app官网| www.576949.com-兰州彩票店移机| www.651455.com-2628彩票注册| www.760458.com-彩票站能挣多少钱| www.834764.com-炫彩生活女包加盟| www.890139.com-买nba体彩-| www.949714.com-160彩票网站| www.990015.com-中国彩吧更懂彩民| www.cp1673.com-福彩快三官网投注站| www.ol58.com-福彩有几个玩法| www.71.cc-网络彩票可以提现| www.69qg.com-正规时时彩官网下载| www.1140.hk-足球胜负彩擂台| www.8982.top-彩票天天选四开奖| www.47058.com-南粤风采好彩3结果| www.92491.com-湖北省福彩网| www.053513.com-彩票网计划-| www.153535.com-时时彩计划定位胆| www.238030.com-爱彩乐开奖结果| www.311868.com-甘肃省的彩票| www.379585.com-尼彩手机n4-| www.518189.com-下载559彩票| www.583775.com-彩票有走势吗| www.656368.com-澳洲45秒彩-| www.767433.com-72期福彩独胆| www.838915.com-福彩老虎机-| www.892324.com-吉林快三有规律吗| www.946643.com-福利彩票东方6十1| www.984609.com-彩虹网彩票网合法吗| www.g44.net-七星彩今晚奖结果| www.34so.com-彩票网站找人代打| www.680.online-重庆时时彩倍率说明| www.4286.biz-怎么做k彩代理| www.9313.online马彩票官网-| www.57055.cc-福彩三d字迷总汇| www.008310.com-上期福利彩票中奖号| www.071882.com-武汉福彩申请| www.136287.com-红金彩票平台| www.210830.com-安徽快三和值大小图| www.280205.com-模拟买彩票-| www.402550.com-彩票平台招租| www.505247.com-39彩票下载-| www.569010.com-办个彩票站得多少钱| www.636186.com-老重庆时时开彩网址| www.754865.com-信誉第一的竞彩| www.836710.com-陕西体彩官网| www.898521.com-彩票扫一扫在哪里| www.961141.com-内蒙体彩中心地址| 中国福利彩票www.08588k.com| www.ct77.com-优信彩票大发时时彩| www.sh43.com-重庆时时彩最稳方案| www.14fr.com-体彩18138期| www.88kz.com-竞彩一直输-| www.1829.cc-7位体彩开奖结果| www.8663.in-体育彩七位-| www.36500.cc-体育彩票和福彩哪个| www.76843.com-新浪竞彩草莓推荐| www.023513.com-彩民乐彩报-| www.087882.com-网络彩票平台大全| www.141456.com-网上彩票代理加盟| www.210341.com-北京极速快三下载| www.272787.com-百彩网资料免费大全| www.422719.com-彩民乐三d图库| www.513361.com-口袋彩店用不了了| www.576490.com-成都福彩咨询电话| www.639943.com-东方彩票app平台| www.751843.com-彩票辅助系统| www.813484.com-福彩牛才总会| www.875465.com-亚投彩票app|