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.715803.com-颖彩双色球下期预测| www.906398.com-彩金是黄金吗| 凤凰Vwww.www.fh7557.com| www.467237.com-七彩乐几点停售| www.587847.com-中奖双色球彩票图片| www.281508.com-时时彩和尾怎么算| www.279929.com-竞彩500比分直播| www.371490.com-宁波市福彩网| www.243880.com-彩61-| www.358966.com-体彩怎样买-| www.301258.com-昨晚彩票开什么号码| www.10ca.com-体彩屋邀请码哪里有| www.607281.com-广州福利彩票投注站| www.cp727.com-体彩福彩开奖结果| www.764709.com-彩神通会员4码很准| www.448008.com-vr赛车彩票计划| www.775084.com-七星彩期开奖结果| www.962242.com-中彩网双色球和值| www.cp2299.com-百盈快三有什么技巧| www.027686.com-外围体彩怎么买| www.7573.top-彩彩虫官方免费下载| www.252580.com-三分时时彩全天计划| www.301579.com-彩票预测大全下载| www.273950.com-二分彩开奖号| www.771909.com-竞彩店申请难不难| www.939267.com-彩神88app-| www.cai6789.cc-快三彩票群真的假的| www.s63.net-福利彩票胆拖复式| www.801.in-附近体彩销售点查询| www.563757.com-四场进球彩怎么玩| 福彩www.16878e.com| www.46681.com-釉彩大瓶价格| www.98679.cc-足彩串关单场| www.356678.com-宁波福彩网-| www.922633.com-人人彩票预测软件| www.991406.com-七星彩排除法| www.505301.com-福彩3d字迷图总汇| www.598875.com-七星彩开奖35期| www.ek09.com-3彩吧图库-| www.149422.com-体彩大乐透中奖条件| www.300063.cc-一分钟一期快三| www.da42.com-吉林快三技巧方法| www.vz95.com-苏州快三开奖视频| www.33jn.com-春节体彩上班时间| www.696.pink-体育彩票店论坛| www.6869.hk-足彩胜负平_澳客网| www.586626.com-福利彩票资讯网| www.675592.com-彩票开奖查询23期| www.752317.com-人人彩票网是新骗局| www.825933.com-12580彩票-| www.903707.com-福彩金码今天| www.969478.com-彩票一期计划网站| 大众彩票www.712887.com| www.52538.com-老鹰彩票电脑版| www.98524.cc-两分时时彩有假吗| www.086895.com-七乐彩3十1几等奖| www.34795.com-广西快三方法和技巧| www.017078.com-分分钟开奖彩票| www.200502.com-江苏快三遗漏号| www.111792.com-布衣图库好彩网| www.025363.com-体育彩票开奖直播| www.25ja.com-华彩什么意思| www.966.space-体彩金7乐中奖规则| www.65904.com-彩票模拟购买| www.041397.com-天津福彩扫码| www.347.com-国外彩票平台| www.6316.cc-福彩双色球真实新闻| www.036396.com-网上彩票漏洞群| www.140038.com-易彩快三技巧| www.518294.com-时时彩输了想赢回来| www.652287.com-体彩和福彩星期几开| www.851993.com-特彩吧报码开奖结果| www.3471.cm-爱彩乐天津快乐十分| www.37077.cc-腾讯的天天中彩票| www.97497.com-聚财神m8彩票| www.067102.com-信誉好的外围彩票| www.147255.com-极速时时彩历史开奖| www.234314.com-彩票快三倍投技巧| www.987506.com-彩票追号投注计算器| www.8384.com-拾柴七星彩软件| www.011355.com-昨天彩票出多少号| www.41112.com-福利彩票怎么开店| www.038823.com-七星彩开奖什么奖| www.947546.com-快三买大小稳赚技巧| www.999237.com-中彩谁家房什么意思| www.7991.pw-博彩无法下分| www.576923.com-彩票突然登录不了| www.87pz.com-七星彩杀号定胆法| www.175692.com-一分快三助手| www.837844.com-博牛彩票用了多久了| www.932345.com-七星彩票开奖app| www.090973.com-众彩易购幕后| www.199017.com-买体育彩票怎么买| www.278508.com-三天苏福彩快3| www.955408.com-凤凰彩票开挂| 大赢家彩票平台www.202370.com| www.cp6221.com-竞彩500-| www.wv92.com-易彩彩民福地测速| www.004111.com-快三是彩票吗| www.136143.com-广西体彩中心地址| www.964578.com-送彩票不限ip| www.cp8990.com-今期福彩3d字谜| www.886023.com-yy彩票注册登录| www.34yr.com-时时中彩票客服| www.0210.com-f彩网是骗人的吗| www.140053.com-xy幸运彩票-| www.239078.com-彩票app赚钱骗局| www.21187.cc-福利彩票吧百度贴吧| www.299723.com-能追号的彩票平台| www.365925.cc-国产水溶彩铅品牌| www.mj11.com-网赌输了买彩票翻身| www.sl64.com-机选一注时时彩| www.77pz.cc-海南网络彩票诈骗| www.1322.net-106官网彩票网页| www.9888.wang-网络快彩-| www.61327.cc-众彩市场-| www.562280.com-彩票界最权威的作家| www.628044.com-天天体彩下载软件| www.957573.com-广东省体育彩票官网| www.ts2.cc-河北快三走勢| www.b98.top-湖壮快三开奖结果| www.59ky.com-彩钢瓦机多少钱一台| www.2605.vip-福彩3d复式价格表| www.27690.com-体彩门头图片| www.476178.com-哪个网彩是正规平台| www.547711.com-十大彩票巨奖得主| www.611901.com-八方联彩-| www.675888.com-江苏体彩排列3预测| www.742997.com-彩票复式中奖率高吗| www.803238.com-捷豹彩票娱乐主管| www.866964.com-彩票图纸今天的| www.947809.com-玩幸运彩票靠谱不| www.985370.com-彩客竞彩app好么| www.hx0.cc-彩票内蒙古快3| www.8569.top-幸运彩票是真的吗| www.86522.cc-福利彩票用什么软件| www.073344.com-全民赢彩票官网| www.154685.com-足彩竞猜方法| www.96815.com-体育足球竞彩资讯| www.206730.com-彩神大发快3怎么玩| www.cp8578.com-上海福彩网官方网| www.3076.pw-明月珰七星彩| www.lo98.com-3d中奖彩票票样| www.41sa.com-查询乐e乐彩网址| www.0662.xyz-福利彩票换纸视频| www.92155.com-迪士尼彩乐园登录| www.057580.com-下载福彩22开奖| www.579041.com-金祥彩票v1-| www.284162.com-国彩8-| www.999560.com-河北燕赵风采福彩网| www.ii11.com-体彩和值遗漏| www.7097.cn-七彩珠心算碧海| www.666127.com-248彩票软件下载| www.777625.com-彩票销售代表工资| www.768565.com-时时彩爱乐网站| www.9381.in-彩票那看真假| www.000891.com-时时彩作弊方法| www.803519.com-浙江体彩6十l| www.65050.cc-竞彩彩票靠谱吗| www.004527.com-时时彩内部号码曝光| www.227179.com-幸运快三代买骗局| www.799888.cc-彩票今日开奖视频| www.949135.com-购买彩票的软件| www.w09.cc-东北快三微信群|