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天

知道了
102彩票 www.613663.com-网上堵彩票被骗| www.383009.com-福彩在线玩-| www.19309.com-国乐彩苹果手机下载| www.c5.tv-好彩app合法吗| www.129603.com-app众彩官网下载| www.299167.com-上海快三预测号推荐| www.621605.com-网上买彩票500万| www.ea86.com-吉林严查黑彩| www.35ov.com-盛世彩票官网| www.916701.com-33彩票平台怎么样| www.4507.org-七星彩历史开奖检表| www.207454.com-彩票大师官方版| www.345062.com-酷乐手游彩票| www.720084.com-锋彩直播手机版官网| www.2gi.com-竞彩足球输了怎么办| www.331468.com-什么是七乐彩票| www.531904.com-体彩九宫图-| www.668928.com-国外彩票中奖| www.915771.com-彩票代理权-| www.981364.com-体育彩票报刊| www.bn8.com-好彩香烟价格表图| www.3615.biz-用奇门测港彩实例| www.kp21.com-吉祥彩票官方版| www.062023.com-彩客足球比分| www.896777.com-俄罗斯彩票中奖者| www.cp144.com-5分彩骗局-| www.03xi.com-98时时彩平台登录| www.2336.wang-好彩2赔率多少| www.6565.net-679彩票最新版| www.548709.com-双色球测彩高手预测| www.731343.cc-彩票2元网可靠| www.981169.com-微信拉人买彩票真假| www.8239.biz-莱利彩票有那种网站| www.26bv.com-长春溢彩洗浴| www.07551.com-中彩那天课文图片| www.5061.vip-竞猜足彩下载| www.963314.com-内蒙福利彩票双色球| www.11008.com-信彩票下载安装| www.380768.com-亿彩票网站-| www.34rv.com-南粤七星彩票论坛| www.gs75.com-好彩香烟双爆珠| www.627886.com-快三复试中多少钱| www.768.bid-竞彩任九开奖时间| www.016397.com-祝福利彩票快三| www.706959.com-怎样在微信上买彩票| www.384062.com-买彩票中5000万| www.585021.com-手机网易彩票| www.23459.com-中国体育竞彩彩票| www.886557.com-c8cn六彩香港| www.03gz.com-风之彩彩票官方网站| www.3996.biz-哪里可以买竞彩篮球| www.215637.com-彩票一般几位数字| www.491473.com-彩虹鱼项目-| www.50su.com-手机投彩票哪个安全| www.12385.cc-3d走势图新彩吧| www.687.me-福彩3d心得-| www.417590.com-体育彩票qq交流群| www.577583.com-江西时彩关闭| www.705626.com-东莞市体彩兑奖地址| www.842188.com-中国竞彩网下载| www.970964.com-体彩票号几种| www.dw10.com-彩客彩票老版| www.2002.love-顺发彩票登录网站| www.861.tv-重庆时时彩个位四码| www.076914.com-5个数字的彩票| www.862888.cc-七乐彩我要投注| www.18zk.com-现在女孩都玩彩票吗| www.54566.cc-爱尚彩彩票正规吗| www.127461.com-彩库宝典查询资料| www.41907.com-中彩吧彩票正规| www.058600.com-快三网页版-| www.225581.com-微信彩票女-| www.411589.com-下载中国竞彩网| www.619578.com-双色球守号中奖彩票| www.753933.com-彩票全部买要多少钱| www.878287.com-手机彩票500网| www.980123.com-彩票销售员南京| www.jd11.com-快三跨度开奖结果| www.39zd.com-聚乐彩票50707| www.9900.cm-为什么竞彩场次少了| www.73363.cc-乐彩客是骗人的吗| www.057268.com-福彩3d预测总汇测| www.238475.com-四川福利彩票官网| www.365535.com-水溶彩铅怎么用| www.462216.com-福彩双色球藏机图| www.551092.com-福彩双色球怎样合买| www.664769.com-东莞市体彩中心| www.761442.com-腾讯分分彩稳定玩法| www.581236.com-外围彩票网站对比| www.967871.com-湖南彩票诈骗| www.864526.com-50倍彩票-| www.548.in-昨天七乐彩开奖结果| www.9296.cc-乐彩客彩票安全吗| www.73807.com-哪个网站买体彩| www.075287.com-五福彩票网5f12| www.175361.com-安徽快三开奖时间| www.234894.com-福彩平台-| www.vh50.com-江苏′体彩十一选五| www.34ld.com-今天七星彩几点开奖| www.674.mobi-重庆时时彩漏洞刷钱| www.3739.com-七星彩定头尾| www.8932.org-湖北快三开结果查询| www.33918.cc-五分快三违法吗| www.118553.com-体彩排列5中奖| www.081089.com-彩票能中大奖的咒语| www.530118.com-北京二八彩票| www.620591.com-如意彩票网是真的吗| www.686033.com-福彩票有精准吗| www.749717.com-福彩上海快三开奖| www.803745.com-彩飘王661766| www.866217.com-网彩最新消息| www.921445.com-中国福利彩票破解| www.969597.com-福彩3d一贴吧| 好彩头www.51331j.com| www.dv48.com-福彩一分快三下载| www.su19.com-时时彩五星缩水大底| www.jp98.com-一分钟快三人为控制| www.814209.com-河北体彩排列5| www.35466.com-吉祥彩娱乐平台下载| www.573852.com-世界研究彩票牛人| www.666833.com-国乐彩计划-| www.75iu.com-伪球迷买足彩胜负| www.84006.com-足彩数学破解规律| www.733379.com-腾讯一分彩官网| www.884974.com-爱彩乐天津十一选五| www.1122.live-篮球彩票那里买| www.440146.com-苏快三玩法-| www.024797.com-体育彩票大乐透杀球| www.022034.com-与彩票有关的故事| www.35694.com-体彩竞彩店装修标准| www.kg1.com-快三时时彩分析预测| www.914568.com-彩票分析专家陆金| www.yl05.cc-彩票书籍大全| www.oy82.com-福利彩票快3咋玩| www.910928.com-福彩快三为何改时间| www.ms26.com-福彩快3网是骗局吗| www.4348.cm-鑫彩网址下载| www.874427.com-私彩1980-| www.610787.com-梦到猪买彩票什么码| www.87le.com-红彩会网址是多少| www.fp51.com-彩票500万下载| www.65yj.com-竞猜篮彩比分| www.607712.com-七乐彩走势图周五| www.a10.name-一张彩票尺寸多少| www.57281.cc-锋彩直播官网首页| www.078628.com-福彩群英会下载| www.57967.com-彩之乐是什么网站| www.9242.biz-和乐彩票首页| www.262281.com-快三遗漏一定牛| www.920332.com-福彩十二生肖开奖| www.32323.cc-彩钢瓦围挡材质| www.gk27.com-中国体彩大乐透规则| www.3225.wang-南方双彩网客户端| www.6332.biz-传奇彩票是国家开吗| www.875491.com-45彩票最新版| www.369408.com-彩友时时彩人工计划| www.535054.com-福利时时彩玩法| www.659488.com-足彩收米app| www.819503.com-彩票统计分析方法| www.895203.com-优彩网网址是多少| www.955499.com-01彩票平台-| 乐发彩票www.3136.com| www.gb00.com-快乐彩走势-| www.235508.com-广东手机福彩投注|