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.640674.com-山西彩民乐树钱图| www.762653.com-众博彩票是合法的吗| www.056445.cc-体育彩票店转让合肥| www.526059.com-辉煌彩票下载安装| www.947819.com-福建快三实时开奖| www.bb49.cc-数字新浪彩票| www.974900.com-公务员买彩票违法不| www.810380.com-上海体彩发行中心| www.866.xyz-彩铅画基本功| www.3nu.com-河内彩票走势图| www.985413.com-腾龙时时彩官方网站| www.30uw.com-广东福彩开奖直播| www.t48.org-中山福利彩票加盟| www.0971.in-360彩票查询结果| www.245821.com-统一彩票幸运快三| www.439932.com-500万开奖彩票| www.649747.com-博彩主要是做什么的| www.869778.com-3d彩票老店主| www.932387.com-快三地区-| 汇丰彩票www.23hf.com| www.dg06.com-瑞彩祥云官方网| www.483838.com-下载app彩票| www.82865.com-福利彩票真实吗| www.042654.com-福彩广告词怎么写| www.254512.com-十一选五上海爱乐彩| www.450098.com-能戒掉买彩票吗| www.955814.com-福彩开奖作弊| www.179.gg-大地彩票下-| www.910732.com-nba彩票网-| 中国福利彩票www.6364r.com| www.kt74.com-内蒙古快三时时彩| www.660366.com-体彩排列三有直播吗| www.041531.com-加拿大彩票-| www.7567.cm-东方彩网址-| www.84718.com-福彩领奖流程揭秘| www.135297.com-博乐互动彩票| www.fl05.com-齐鲁彩票双色球| www.515002.com-国际彩妆加盟| www.233959.com-彩票大底是什么| www.246932.com-上海快三销售时间| www.274535.com-一分钟快三有假吗| www.1850.vip-阳光探码彩民乐| www.555380.com-云南快乐彩十分电脑| www.654915.com-彩票怎么容易中奖| www.751485.com-关小刀足彩解盘| www.831650.com-福彩双色球购买网址| www.908760.com-福彩天地在线读报| www.969912.com-福利彩票停售了吗| www.cp8775.com-福彩快三软件| www.723829.com-彩赢家乐和彩彩票| www.821737.com-附近的福彩站点地图| www.906117.com-体彩机租赁协议| www.968918.com-彩名堂安卓4.0| www.yf7.cc-彩票数学-| www.ez2.com-快三内蒙开奖结果| www.590135.com-七星彩号码查询中奖| www.681656.com-彩票怎么电话投注| www.769731.com-好彩香烟绿色宝珠| www.994328.com-彩票飞鱼-| www.wr90.com-彩票现金网-| www.28xw.com-搜狐福利彩票预测| www.805674.com-福利彩票品种| www.890489.com-彩29彩票网-| www.960666.com-天津快三官网| 多乐彩票www.311414.com| www.c85.me-百变王牌百宝彩| www.022084.com-每分钟一开奖的彩票| www.105489.com-手机版彩票助赢软件| www.bw07.com-湖比快三走势图| www.561822.com-彩票玩家数据| www.42jx.com-中国竟竞彩网| www.450.net-淘宝怎么哪个彩票| www.752030.com-亚彩苹果版-| www.883718.com-今天彩票开奖查询| www.988935.com-微彩吧苹果下载地址| www.ks97.com-彩票分析师大赛| www.27fn.com-体彩11选5彩票| www.cp924.com-福建彩票官方网站| www.120896.com-快三中奖几天有效| www.92na.com-竞彩二串一计划| www.516.online-老时时彩现场直播| www.115112.com-江苏福彩如何兑奖| www.293101.com-快三怎么看出二同号| www.428681.com-足彩大赢家手机软件| www.684515.com-华彩网是不是骗人的| www.081355.com-七星彩最少一等奖| www.274669.com-时时彩赚钱秘籍| www.89044.com-网售彩票重启| www.073844.com-体彩排三杀号定毒胆| www.761485.com-1183彩图区-| www.081037.com-体彩怎么申请开店| www.173532.com-兰州快三走势图连线| www.260726.com-苏州竞彩快三| www.338230.com-国彩合买是不是诈骗| www.73wn.com-福彩3地开奖广播| www.2232.net-微彩被骗怎么办| www.108636.com-彩票全国联销| www.234055.com-彩名堂免费计划官网| www.96rt.com-彩排英语动词怎么说| www.9465.vip-怎么购买美国彩票| 500彩票网www.65707t.com| www.111392.com-乐猫彩票-| www.165911.com-红彩影视-| www.107752.com-彩票能作弊吗| www.166355.com-福建快三开奖号码| www.221083.com-牛蛙彩票四不像图准| www.123298.com-体彩10期-| www.700348.com-时时彩私彩如何破解| www.cai1203.com福建快三走势图今天| 网易彩票www.559748.com| www.jt.com-广西福彩助手| www.rm03.com-qq彩票app-| www.798526.com-鼎盛五分彩-| www.899046.com-河南体彩481开奖| www.978286.com-富民彩票-| www.67500.cc-22彩票安全不| www.mk21.com-新浪爱彩时时比分| 易彩堂www.55885l.com| www.685219.com-119彩票平台| www.779344.com-菠萝彩微尔算法| www.8884.link-足彩对冲技巧| www.96ti.com-彩排词语-| www.314914.com-时彩怎么玩-| www.940060.com-福利彩票复式4十1| www.248455.com-wj868皇角彩皇| www.381961.com-彩票春节休市七天假| www.522351.com-极速赛车是什么彩| www.621666.cc-广西快三奖池| www.223862.com-竞彩网分直播| www.369354.com-亿博彩票app下载| www.503918.com-万豪彩票官方| www.5336.xyz-华东福彩开奖| www.17457.com-中国足彩五大联赛| www.151650.com-彩票数字的奥秘| www.14gj.com-全民中彩官方| www.130086.com-安微快三开奖果| www.258262.com-湖北省福利彩票| www.339108.com-爱彩乐app打不开| www.225002.com-希腊10分彩-| www.365171.cc-美东2分彩是真的不| www.503726.com-江苏足球竞彩网首页| www.590262.com-福彩3d和尾号码| www.672058.com-彩票行业会倒闭吗| www.774045.com-澳门博彩游戏| www.962242.com-中彩网双色球和值| www.sr5.cc-河南七星彩开奖结果| www.vj71.com-快三看走势技巧稳重| www.86dk.com-中彩国际是合法的吗| www.441192.com-体彩号码怎么选| www.30ih.com-中原彩虹网-| www.020526.com-今天彩票开机号| www.99ot.com-彩票山地开奖结果| www.223529.com-内蒙古快3彩乐乐| www.345596.com-云彩厅是骗局吗| www.442726.com-日本快3彩-| www.521763.com-腾讯时时彩彩app| www.679082.com-麒麟青龙足彩微信群| www.767912.com-彩彩网是真的吗快三| www.880444.cc-7乐彩开奖结果| www.993036.com-体彩网投能否赚钱| www.kr80.com-福彩彩神通关注码| www.262775.com-快三十大口诀| www.635607.com-七彩阳光教学| www.756875.com-体育彩票9场中奖|