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天

知道了
彩票123现在叫什么名字 www.42iq.com-彩票上亿大奖| www.971064.com-快三稳中-| www.85047.com-附近有没体育彩票店| www.095158.com-彩票作弊器视频| www.251832.com-正规官方彩票有哪些| www.363821.com-全国体福彩中心电话| www.502246.com-附近体彩中心| www.599901.com-彩票全中是多少钱| www.54xm.com-竞彩微信交流群| www.3855.wang-竞彩分析资讯| www.75898.com-足彩规则及奖金| www.312699.com-信彩彩票app下载| www.428448.com-大赢家足彩缩水| www.346342.com-90彩票网页版| www.481107.com-澳客竞彩开奖结果| www.579214.com-福彩3d彩吧藏机图| www.653587.com-北京彩票中心| www.67663.cc-v8彩票平台坑人吗| www.767649.com-彩票平台提现被冻结| www.279825.com-5oo足彩网-| www.993317.com-彩票平台怎样赚钱| www.515537.com-彩票纠分案-| www.606136.com-意大利维斯快三赔付| www.712053.com-足彩十四场-| www.799896.com-微信能买体育彩票吗| www.892191.com-足彩4串1中奖规则| www.522633.com-分分时时彩追号计划| www.672396.com-江苏快三怎么玩独胆| www.787880.com-澳客手机彩票网手机| www.928177.com-陕西派彩电子走势图| 500万彩票www.500cd.com| www.526639.com-福彩开奖是直播吗| www.169834.com-吉林省快三开奖图| www.876184.com-山东福利彩票网| www.977233.com-濮阳彩礼限高| www.gi5.com-彩种是什么-| www.nh93.com-福彩3的杀码| www.h25.tv-古建彩绘图片大全| www.29il.com-体彩投注软件山东| www.967246.com-重庆时彩胆拖玩法| www.cf.cc-500快三平台| www.365747.com-人物彩色铅笔画图片| www.7885.in-玩时时彩的个人经验| www.93au.cc-078彩票com-| www.175792.com-彩票快三技巧秘密| www.381574.com-公然摆卖私彩| www.568303.com-彩票天天快三咋玩| www.680012.com-什么是彩光祛斑| www.799819.com-福彩领奖规则| www.912574.com-大发时时彩计划网| QQ彩票www.89894j.com| www.1315.cn-彩票106黑吗| www.86587.cc-郑州福利彩票停办| www.139450.com-百福彩是正规的吗| www.587217.com-中国体彩网幸运快三| www.490082.com-小白彩票下载安装| www.hi17.com-全民中彩票下载| www.035678.cc-红彩会官方网站| www.3548.xyz-福彩3d校长-| www.00959.com-河北福彩开奖时间| www.81599.cc-福彩3d昨天的事情| www.121644.com-soul加到彩票托| www.202907.com-吉林快三跨度表| www.356944.com-买彩票的意义| www.456076.com-防止彩票成瘾的办法| www.2584.cc-足彩十四场时时比分| www.593757.com-七彩通达-| www.578397.com-幸福彩票是什么意思| www.474999.com-新彩吧天气网| www.959171.com-河南快三模拟器| www.ep0.cc-腾讯彩票快三| www.021969.com-皇冠彩票合法吗| www.031137.com-22彩票坑人-| www.401790.com-七星彩一七位和| www.590898.com-彩票平台1688| www.796418.com-福利彩票属于赌博吗| www.971754.com-创彩网首页-| www.x12.org-随时赚彩票软件| www.5686.xyz-淡三彩手镯-| www.56315.com-帮买彩票骗局| www.28615.cc-中奖容易的彩票| 500彩票www.401273.com| www.95rw.com-叮叮彩票合法吗| 幸运彩票www.444602.com| www.e20.cc-杳彩票开奖-| www.49mg.com-足彩攻略-| www.2869.win-彩虹糖和mm豆的梗| www.ek.com-江西快三app下载| www.wc51.com-七星彩今晚开奖吗| www.30iy.com-2019天津彩民| www.75275.cc-国家的彩票种类| www.101419.com-立彩彩票骗局揭秘| www.3137.xyz-2元彩票走势| www.34073.com-亿彩聊天室-| www.19309.cc-福彩3d天牛网| www.869833.com-彩票开奖视频道| www.6068.vip-福彩3d聪明组合| www.ei62.com-关于取消体彩高频| www.18on.cc-云南彩票大王杨光华| www.3030.me-0k00澳客彩票网| www.8882.org-网投分分彩作假| www.391131.com-体彩11选5私彩| www.510838.com-彩玉摆件-| www.35ix.com-南京体育彩票网站| www.569313.com-福彩快三坑哭人| www.143329.com-内蒙福彩公众号| www.184254.com-手机快三输钱是骗局| www.603773.com-彩刷是什么-| www.682494.com-广州好彩酒家门店| www.767390.com-牛彩纽约测速登陆| www.856796.com-福彩3d藏宝图全图| www.932816.com-宝马娱乐彩票app| www.984839.com-福彩快乐8-| www.bm38.cc-可靠彩票平台有哪些| www.ux85.com-江苏快三预测助手| www.398312.com-摇摇乐彩票破解| www.276.red-美容彩妆培训学校| www.62op.com-如何买中国福利彩票| www.h73.com-搜狐彩票基本走势图| www.298.xyz-七星彩怎么守号| www.591419.com-竞彩有一个必胜规律| www.750431.com-豪彩平台总代理| www.848143.com-麦久彩票网3d字谜| www.920091.com-华彩软件彩票网| 大赢家彩票平台www.210715.com| www.ml45.com-快三电视走势图软件| www.8qz.com-时时彩平台制作的| www.75ho.com-武汉足彩到哪领奖| www.1304.pw-体育博彩app推荐| www.289297.com-博彩有信誉十大网站| www.7568.vip-潭头东方亮彩怎么样| www.267267.com-盛兴彩票网-| www.629912.com-今天的足球彩票预测| www.905693.com-yy彩票揭秘-| 中国福利彩票www.3478b.cc| www.492984.com-彩票平台靠谱吗| www.559595.com-陇彩宝如何充值| www.028425.com-新博瑞彩票正规吗| www.54rj.com-815周彩票-| www.046381.com-彩票下app-| www.8ia.com-88爱彩是正规的吗| www.618491.com-19047期足彩| www.721555.com-大家都在哪买足彩| www.800700.cc-福彩代打靠谱吗| www.866482.com-前天彩票中奖号码| www.919332.com-中彩网北斗3d推荐| www.970560.com-分分彩最新漏洞| www.li9.com-内蒙快三早知道| www.qn03.com-广西快三分开奖| www.4ig.com-07彩票是正现的吗| www.45hp.com-快三投资多少钱| www.002.hk-亿彩堂网址-| www.3688.win-彩色复印机租赁报价| www.8310.top-重庆新时时彩走势图| www.21982.cc-手机app刷彩兼职| www.4892.me-福利彩票改革| www.36382.com-澳博彩票平台合法吗| www.869944.com-快三周易推算魔图| www.981402.com-分分彩个位必中| www.d65.club-123彩票平台网址| www.789393.com-最官方的彩票app| www.145713.com-阿里彩票平台投注站| www.125365.com-彩皇-| www.2498.vip-l天天彩票与你同行|