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.678253.com-重庆彩钢围挡多少钱| www.865333.com-福彩六码遗漏| www.936151.com-福彩时时彩开奖号| www.999732.com-天天好彩app| www.qg57.com-好彩爆珠有几种| www.137854.com-360彩票走势图| www.292770.com-福彩三地太湖字谜| www.147599.com-大连福彩快三| www.360100.com-足球彩票销量排行榜| www.420262.com-彩票投资盈利| www.rb99.com-大发时时彩开奖历史| www.46vw.com-亏损分红彩票骗局| www.2150.cc-网上买彩票有人抓吗| www.127673.com-彩虹岛手游中文| www.856968.com-vr3分彩-| www.954926.com-黑彩余额修改器下载| 大赢家彩票www.327831.com| www.mj37.com-网络彩票提款被拒| www.13ff.com-微彩彩票骗人| www.89aj.com-足彩混合关一定牛| www.043163.com-中国体育彩票宣传语| www.s12.me-天天盈球竞彩大势| www.927.in-英国幸运5星彩开奖| www.368.date-彩票站风水聚财| www.7882.vip-时时彩赢彩网| www.66052.cc-好彩蓝莓双爆珠图片| www.189267.com-福彩走势图乐彩网| www.320.pw-彩客彩票类似的软件| www.210222.com-快三赔投方法| www.893205.com-彩吧助手彩种全走势| www.cai279.com-大发快三平台| www.07om.com-彩迷是不是骗人的| www.568940.com-彩民乐树图-| www.97786.com-老时时彩开奖宝典| www.397427.com-安徽快三万能码| www.504202.com-十选一是什么彩票| www.570285.com-七彩蛋糕店-| www.86gv.com-657彩票网登录| www.6103.cc-彩票庄家不败的原理| www.009573.com-手机彩膜图片| www.914165.com-瑞彩祥云αpp| www.995914.com-新浪彩通公司| www.6296.cn-福彩好心人布衣图库| www.8803.vip-上海五星体育竞彩| www.509105.com-南粵风彩36选7| www.588249.com-福彩三d和直走势| www.665731.com-福彩三d推荐号| www.737009.com-体育彩票软件快三| www.803557.com-49.cc金彩网站| www.884830.com-高频彩票经验| www.953964.com-彩票自动追号计划| 彩票坊www.022hn.cc| www.757979.com-99彩票可信吗| www.841734.com-外围竞彩竞猜软件| www.913365.com-大乐透彩神通软件| www.973974.com-天天彩票999| www.cp6673.com-中国福彩app官方| www.ln90.com-苹果手机彩膜| www.02ri.com-足球彩票在微信上买| www.73yq.com-360黑彩平台| www.255680.com-彩票店吃票犯法吗| www.515138.com-七星彩三字定今天| www.593736.com-福星彩运济南网| www.668056.com-福彩开奖有假吗| www.738304.com-带玩彩票qq群号| www.801266.com-彩75app下载| www.869119.com-快三平台时间差| www.964985.com-福彩快三胆码软件| 购彩在线www.66332d.com| www.267939.com-福彩3d图全图| www.401163.com-乐利2分彩走势| www.587637.com-排列五彩之家走势图| www.769603.com-好彩真假怎么辨别| www.867602.com-彩票代打兼职微信号| www.7162.loan-七彩本草-| www.092697.com-彩民双色球领奖| www.189514.com-河南快三二码遗漏| www.51493.cc-彩虹糖的美好寓意| 500彩票网www.61655t.com| www.785596.com-双彩球预测专家| www.981947.com-福利彩票新闻| www.bm36.cc-11选五手机购彩| www.5184.biz-三d新彩吧图谜| www.34902.com-山东体彩论坛bbs| www.421715.com-福彩东方六加一| www.672098.com-彩宝彩票客服平台| www.24949.com-彩铅画要求-| www.203826.com-体彩5d开奖号| www.322051.com-海南体彩41| www.407898.com-七星彩中奖奖金| www.654379.com-南昌彩民中奖| www.766023.com-湖北体彩快开奖结果| www.837216.com-彩钢-| www.901133.com-五分钟快开彩| www.963653.com-意彩比分直播| 多乐彩票www.744646.com| www.771868.com-彩票的术语-| www.909590.com-福彩论坛彩界精英| www.866690.cc-陇彩宝app下载| www.957060.com-网络彩票修改器| 新盈彩www.xinyc8.com| www.je05.com-中原彩票快三| www.39wl.com-云南结婚彩礼多少钱| www.449800.com-乐和彩票软件| www.672357.com-福建体育彩11先5| www.781147.com-彩票飞鱼走势研究| www.893756.com-大财神彩票-| www.986465.com-基诺彩开奖记录| www.ir62.com-手机彩票网软件| www.137744.com-排列三预测新彩网| www.365127.cc-风之彩彩票下载安装| www.456112.com-彩虹六号对枪技巧| www.025478.com-体彩481奖金规则| www.129048.com-福彩网官方彩下载| www.220793.com-大奖彩票下载| www.924441.com-云南福彩彩票开奖| www.np24.com-甘肃体彩软件下载| www.44oa.com-竟彩360比分直播| www.0042.win-编程实现彩票走势图| www.m48.net-福彩十选五骗局| www.822996.com-彩铝和彩钢哪个好| www.019367.com-山西体彩中心| www.40db.com-淘宝店铺买彩票| www.869029.com-七星彩的对数排出来| www.ic7.cc-快三两个数有钱吗| www.332263.com-长沙体彩竞猜骗局| www.436643.com-福彩三地历史开奖号| www.526362.com-足球彩票app| www.5rg.com-分分彩提前一期开奖| www.831363.com-七星彩是怎么摇奖的| www.036502.com-查七乐彩-| www.820.in-彩虹糖广告词| www.9387.biz-福彩3d彩图全汇| www.7707.xyz-彩票兑奖5元| www.5855.site-足球胜负彩推荐填单| www.27055.cc-福彩3d出对子特点| www.88904.com-光彩票-| www.899518.cc-手机彩票平台大全| www.985505.com-时时彩组三组六平刷| www.iq63.com-时时彩平台出售| www.530737.com-19年80期福彩| www.176853.com-新骗局时时彩| www.733150.com-镇江市体彩中心主任| www.xk98.com-鑫彩属于合法彩票吗| www.934702.com-快彩11选五电视版| www.055097.com-竞彩足球此分直播| www.192244.com-优乐彩app下载| www.970345.com-刮刮彩-| www.174.cn-体彩复式价格表| www.7574.me-东方竞彩app| www.404419.com-农村彩神大乐透| www.505267.com-福彩3d精准开机号| www.579275.com-投彩网彩票投注站点| www.05ny.com-江苏快三走时图| www.292.club-鸟入屋七星彩是什么| www.4297.biz-那个鑫彩网怎么举报| www.136275.com-福彩七乐彩开奖公告| www.4xi.com-彩票怎么看中奖金额| www.2618.cc-廿肃快三-| www.119800.com-希腊10分彩结果| www.w81.xyz-浙江体彩大乐透1| www.903.cm-中三千万彩票后| www.6944.xyz-天空彩票报码结果| www.822313.com-碰碰运气选彩票号|