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天

知道了
彩39彩票安卓 www.4747.vip-彩票售票员累吗| www.875024.com-苹果熊猫竞彩app| www.01ua.com-中国彩票最大奖号码| www.9841.org-宋式彩画-| www.nk41.com-106彩票-| www.939991.com-爱彩乐北京11选五| www.5oz.com-常州体彩中心地址| www.1872.hk-怎么填写q彩邀请码| www.22170.com-因为彩礼-| www.5012.biz-海口七星彩几等奖| www.399953.com-星期三可以买彩票吗| www.612822.com-彩票充值卡-| www.705276.com-帝皇彩票-| www.529604.com-那个彩票好中奖| www.mq0.com-安徽快三为啥会提前| www.599557.com-篮球体彩网-| www.527498.com-微信时时彩中介拉手| www.226044.com-浙江省快乐彩走势图| www.cp2.tv-贵州体彩网-| www.04hm.com-内蒙古体彩网点查询| www.0584.me-釉下五彩瓷-| www.728556.com-江苏快三如何投注| www.886489.com-8k彩票邀请码谁有| www.977078.com-彩礼证据-| www.zd4.com-福利彩票3d开奖| www.6925.xyz-49彩票网-| www.672062.com-彩票行业五行属什么| www.cai0707.com江苏快三一定牛| www.wo9.com-河北省快三遗漏数据| www.776359.com-福州彩票app| www.52957.com-打黑彩怎么做庄| www.110426.com-福彩3d大小怎么买| www.221505.com-安徽快三一定牛预| www.830331.com-分分彩怎么玩可以赢| www.hl74.com-吉林今天快三推荐号| www.33892.com-注册五分快三| www.789793.com-竞彩高手打法| www.776508.com-重庆时时彩五星玩法| www.807789.cc-广西新快三-| www.948024.com-四川省体彩中心地址| www.fs08.com-大发uu直播快三| www.o74.xyz-3d彩票怎么看| www.779331.com-内蒙古福彩网下载| www.866613.com-昨晚彩票出什么数| www.929669.com-七星彩千位-| 博亿彩票www.699by.com| www.go41.com-中原彩票app下载| www.zg63.com-鑫彩网大发快3| www.29ui.com-中国酷彩官网| www.232.xyz-统一开奖的彩种| www.4146.com-体彩排列三算法| www.a24.online-彩票中了5元怎么领| www.6719.xyz-彩民预测-| www.056698.com-深圳七星彩去哪领奖| www.153071.com-彩票全天计划记录| www.91wx.cc-快开福彩是骗人的吗| www.75ho.com-武汉足彩到哪领奖| www.953406.com-国乐彩正规吗| www.079966.com-997彩票-| www.727529.com-728彩票-| www.42688.cc-彩票平台注册| www.245049.com-彩票专家预测| www.020291.com-网易购彩靠谱吗| www.4792.top-彩虹六号国服被禁| www.46486.com-彩票彩客网310| www.027175.com-五分彩合法吗| www.087090.com-乐福彩票网-| www.209785.com-彩神v下载-| 彩客吧www.77ckb.com| www.822829.com-手机看彩-| GO彩www.den00.com| www.40io.com-彩票代理犯法么| www.680723.com-中彩在线贺文哪里人| www.7760.biz-买高频彩赚钱方案| www.503726.com-江苏足球竞彩网首页| www.710834.com-刷福彩是什么意思| www.5151.me-彩票中奖领奖时间| www.26331.com-河北快三投注表| www.849722.com-福利彩票11元5| www.024193.com-彩票往期中奖号码| www.103078.com-乐和彩网首页官网| www.296543.com-彩票双色球开奖规则| www.476115.com-网彩平台哪个最好| www.zp13.com-时彩稳赚方法| www.178836.com-福彩中心主任泄密| www.006.me-五彩石竹-| www.128354.com-快三红号有多少个| www.273310.com-千亿彩票官方下载| www.602246.com-足球彩票盈利| www.25328.cc-美术作品绘画彩铅| www.328829.com-博彩白菜免费送彩金| www.610356.com-怎么玩彩票就赢| www.782281.com-福利彩票132| www.617692.com-秦皇岛体彩中心电话| www.768792.com-天猫彩票是什么东西| www.156701.com-彩票中奖符手机壁纸| www.7ac.com-彩票可以做广告吗| www.74nm.com-好彩客彩票怎么样| www.4737.org-好彩票500网址| www.395391.com-彩虹岛梦灵-| www.806730.com-吉祥彩票官网| www.18ur.com-泰安福彩站点| www.507826.com-水立方彩票靠谱吗| www.03129.com-快三计划倍投表| www.37ko.com-爱彩下载安装到手机| www.821828.com-用什么买足球彩票| www.14qy.com-立彩和天天彩| www.899489.com-彩票代理按天反佣金| www.42cr.com-多多中彩票真的假的| www.736571.com-彩客网新触屏版| www.4926.cc-尊皇彩票真假| www.670510.com-彩色代表什么寓意| www.791428.com-彩经网杀排3| www.884981.com-今日七星彩预测号码| www.968415.com-希腊七星时时彩| 大赢家彩票平台www.591023.com| www.249099.com-购彩网366455| www.512938.com-彩票直通车客户端| www.802181.com-彩界小皇帝赌一胆| www.961586.com-五彩大釉瓶-| www.22701.com-手机发送短信买彩票| www.8470.cn-博友彩票投注平台| www.b83.in-福彩佣金-| www.916495.com-彩客网触屏版首页| www.53lv.com-齐鲁彩票3d走势图| www.375971.com-宣城体育彩票| www.665875.com-七乐彩中一等奖| www.474398.com-足彩任九中奖结果| www.hy1.com-大赢家彩票官方网| www.128388.com-江苏盐城彩票大奖| www.us73.com-时时彩投注方案技巧| www.455110.com-国民彩票登陆| www.540333.cc-球队买彩票-| www.2192.win-迅赢彩票-| www.974491.com-一分快三可以么| www.362833.com-彩虹是怎样形成的的| www.171815.com-贵州体育彩票彩种| www.cp3667.com-大发快三就是个坑| www.560900.com-万彩吧大乐透走势图| www.66786.com-福彩e网-| www.959766.com-883彩票-| www.342321.com-天彩粮陕食尚| www.726910.com-1516.彩票-| www.35119.cc-彩票上的墨菲定律| www.112299.com-买彩票下载哪个| www.7532.loan-彩票店开不下去了| www.695159.com-彩票大奖中奖结果| www.786355.com-体彩大赢家安卓版| TT彩票www.366292.com| www.52gj.com-水彩笔-| www.7776.win-珐琅彩紫砂提梁壶| www.25962.cc-彩虹顏色-| www.81162.cc-昨日体彩中奖号码| www.021110.com-新宝彩票登录| www.081392.com-淘宝世界杯彩票投注| www.192263.com-甘肃体彩十一选五| www.048884.com-福彩3d银海布衣图| www.947001.com-靠彩票发财可能吗| www.on17.com-极速时时采彩官方| www.980712.com-彩77绿茶网下载| www.01ct.com-喷雾自制彩虹实验| www.65oo.com-大连彩票站电话| www.065533.com-108彩票-| www.33747.com-快频彩套路-|