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天

知道了
顺丰彩票 www.27jv.com-约彩彩票投不了注| www.796608.com-京彩集团网址| www.657684.com-易彩堂是什么| www.403827.com-福利彩票摇奖用球4| www.96460.com-江苏快三好打吗| www.518130.com-海南彩票门户网站| www.329860.com-福利彩票双色球购买| www.411987.com-彩钢棚做法详细图解| www.659530.com-明发彩-| www.123757.com-qg刮刮彩-| www.329415.com-天天中彩票升级版| www.318085.com-彩票开奖日-| www.754140.com-王牌彩票下载手机版| www.876429.com-3毛3d图牛彩| www.968595.com-中乐彩网站-| www.331541.com-彩票走势图分析图解| www.440146.com-苏快三玩法-| www.539205.com-时时彩五星单式平刷| www.968918.com-彩名堂安卓4.0| www.qs47.com-千亿彩票怎么样| www.502675.com-多彩投爆雷-| www.389555.com-手机澳客彩票网首页| www.540012.com-花式快三分解姜丽口| www.498455.com-5k彩票客服登录| www.590912.com-竞彩软件排行| www.671011.com-三d跨度彩经网| www.756900.com-网上买彩票跟群计划| www.854548.com-酷彩吧彩票下载安装| www.926195.com-福建省体彩31选7| www.982298.com-六福彩是什么| www.rf23.com-网络购彩平台| www.927048.com-易彩网抢红包活动| 天天彩票www.2373v.com| www.gt04.com-彩票app的大品牌| www.04tz.com-彩铅临摹世界名画| www.378278.com-周口体育彩票申请| www.11642.com-体育彩票足球规则| www.96905.com-彩票黑幂-| www.49.cm-港彩规律走势| www.414908.com-七彩影城群力店影讯| www.767515.com-3d双彩图迷-| www.883033.com-万美娱乐彩票| www.975791.com-云购彩票-| www.ff35.cc-七星彩头奖表| www.ey82.com-01彩票官方下载| www.355412.com-彩友交流-| www.05591.com-彩票超级缩水软件| www.6887.com-体育七星彩开奖结果| www.545606.com-福彩开店需要多少钱| www.663185.com-彩票平台是一起的吗| www.289308.com-乐彩网首页福彩| www.456166.com-福彩p62中奖方式| www.682837.com-高腾体育彩票终端机| www.791754.com-淘彩是正规的吗| www.867125.com-周五是什么彩票开奖| www.91454.com-好彩绿好抽吗| www.173671.com-快三哪个平台倍率高| www.127911.com-彩虹哥客服-| www.836383.com-至尊彩江苏快3注册| www.941923.com-至尊彩网邀请码| www.44556.com-体彩8串28-| www.255871.com-赢彩票app靠谱吗| www.054608.com-彩票购买网站| www.161665.com-有香港快三吗| www.266068.com-国彩网骗局-| www.70290.com-福彩快二都是哪里有| www.2775.cc-河北福彩七星彩开奖| www.9866.pw-古建彩绘颜料调配| www.683557.com-吉祥购彩平台| www.258373.com-大发快三总平台计划| www.51ee.com-吴江福彩中心地址| www.cai8322.com快三河北和值走势| www.654953.com-七星彩怎么下载安装| www.92945.com-岩棉彩钢板厂家| www.108523.com-网易彩票开奖查洵| www.194400.com-最全的快三彩票平台| www.279037.com-快乐彩怎么算中奖| www.206726.com-彩神大发快3技巧| www.281362.com-江苏e球彩总进球数| www.4287.top-虎扑篮彩-| www.227270.com-福彩快3选号软件| www.01482.com-和彩云收费多少| www.858496.com-彩迷天地36期| www.09707.com-齐鲁福利彩票33| www.52wj.com-彩票都是什么时候开| www.868944.com-七星彩规律讲解| www.283136.com-福彩三d开奖号码是| www.40064.com-中彩吧有多少年了| www.3545.me-人人彩票是真是假| www.42578.com-体育彩票几点停售| www.727762.com-福彩现场直播| www.893083.com-时时彩五星缩水在线| www.874783.com-福利彩票数字| www.974797.com-福利彩票能网上买吗| www.cp3434.com-极速快三破解版下载| www.096483.com-微信快乐彩是假的吗| www.438577.com-湖南省体彩官网下载| www.570969.com-福彩di试机号| www.646900.com-十四场胜负彩贴吧| www.896736.com-派彩网11选5| www.987643.com-蜀州通和小米彩票| www.vi3.com-中国手机福彩体彩| www.sa87.com-2019互联网售彩| www.3cl.com-负债中彩票-| www.66lt.com-拉菲时时彩娱乐| www.1622.wang-彩票中奖表情包图片| www.8529.com-网上时时彩在哪里买| www.24ya.com-下彩手机客户端| www.628320.com-中国体福建体彩网| www.76gi.com-洛杉矶国际快三网址| www.7769.vip-彩九ios-| www.41447.com-7分钟开奖的快三| www.96870.com-海南私彩违法吗| www.073969.com-彩库苹果下载| www.gu93.com-彩票绝密出号算法| www.7aa.com-宁波员工彩票| www.568061.com-时时彩连挂30期| www.083333.com-蓝冠彩票网-| www.167667.com-今天快三开奖号码| www.mp44.com-快三预测一定牛北京| www.139814.com-彩31官网-| www.241088.com-彩铅樱花-| www.338420.com-互娱彩票下载安装| www.791655.com-宁夏福彩中奖记录| www.899597.com-52xyc幸运彩| www.983494.com-皇室彩票-| www.cv02.com-十大私彩平台论坛| www.957601.com-中国福彩3d网站| www.cp9619.com-湖北快三电视走势图| www.x64.cc-福利彩票中奖真实吗| www.141.mobi-广武彩虹谷-| www.191517.com-一分快三走势图技巧| www.085358.com-时时彩定胆技巧| www.520325.com-内蒙古体彩软件下载| www.650760.com-水彩创意插画| www.432909.com-买国家彩票赚钱| www.557565.com-快速登录神灯彩票| www.654305.com-彩之源登录口| www.747481.com-云彩彩票网合法吗| www.831537.com-竞彩实体店销量下滑| www.vu06.com-福彩快乐10分任6| www.16wq.com-竞彩分析师招聘汇总| www.ci37.com-吉林快三我输80万| www.480202.com-澳门快三分析软件| www.440679.com-五百彩开奖-| www.895580.com-新生彩票官方网站| www.955678.cc-神马彩票官方网站| 吉利彩票www.80075n.com| www.fj02.com-快三是国家的吗| www.xg3.cc-彩票湖北快三开奖| www.65wc.com-彩乐网现场报码| www.222727.cc-安徽福彩网官网| www.400371.com-五分彩怎么买| www.22dg.com-七星彩版区-| www.44491.cc-彩色沥青混凝土| www.973436.com-彩虹抖音翻唱| www.cai0844.com彩票快3有规定吗| www.u37.club-赢彩网是不是真的| www.53pz.cc-贵阳彩票中心电话| www.2355.bid-七彩虹gtx650| www.70058.cc-时时彩胆码提取| www.77007.com-天涯论坛高频彩票| www.194519.com-体彩开奖查询网易| www.157772.com-足彩大1-|