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.95961.com-往上彩票加盟条件| www.133530.com-易彩快3走势图| www.227795.com-福建体彩官方网站| www.503971.com-福利彩票兑奖查询| www.592850.com-彩虹7无人机首飞| www.683665.com-时时彩追热没输过| www.l86.club-天天彩票软件合法吗| www.77qm.com-彩票站五行属水吗| www.2535.cm-彩筑什么意思| www.9019.wang-天天中彩票怎么样| www.034887.com-青岛市福利彩票中心| www.147137.com-海南好彩快三| www.259351.com-体彩预测软件哪个好| www.345782.com-综艺福彩彩神赛| www.443569.com-彩店宝是真的吗| www.576414.com-福彩快三倍数| www.665144.com-7乐彩历史开奖结果| www.736477.com-福彩三地更懂彩民| www.819900.com-苹果买彩票软件| www.899471.com-彩神通软件app| www.971546.com-竟彩开奖查询结果| www.a68.org-黄金8彩票网快5| www.42dc.com-彩虹球-| www.786.name-彩票的复式计算公式| www.5656.cn-高频彩票有假| www.13924.com-竞彩网诈骗-| www.61395.com-2018网络彩票| www.069650.com-买彩票教程-| www.146132.com-体育彩票有多少种| www.256798.com-彩报网-| www.337230.com-福彩双色球3d玩法| www.427210.com-乐彩网双色球下载| www.531760.com-彩客网客户端下载| www.659541.com-2001足彩第一期| www.757329.com-福建体彩中心主任| www.855254.com-深圳福利彩票官方网| www.931912.com-中彩首席导师金振国| www.994943.com-香港五分彩官网| www.ze3.com-福彩3d玩法介绍| www.so17.cc-江苏虚拟足球e球彩| www.19qh.com-点击进入精彩内i容| www.324.blue-中国福利彩票数字三| www.4572.biz-省级快三-| www.03613.com-七星彩靠谱吗| www.52321.cc-快三倍投计划表图片| www.99836.cc-彩票广告图片搞笑| www.071435.com-500彩票快三| www.144311.com-玩彩总是输-| www.303690.com-福彩3d彩乐论| www.379967.com-网上玩时时彩违法吗| www.518603.com-最专业彩票软件网站| www.592692.com-购买海南七星彩源码| www.669598.com-腾讯十分彩计划| www.753268.com-天天中彩吧图库| www.871016.com-7星彩今天开奖结果| www.964225.com-周三竞彩足球对阵表| 600万彩票www.718322.com| www.jx11.com-彩票计算器-| www.f86.club-彩票吧吧-| www.41cr.com-7星彩苹果下载| www.531.net-手机时时彩预测器| www.4662.cm-除了彩票还是什么| www.01112.com-28彩票开奖接口| www.88904.com-光彩票-| www.055251.com-吉林快三会不会作弊| www.155162.com-足彩19044推荐| www.250177.com-彩99下载安装| www.324372.com-乐彩网代理是骗局吗| www.397124.com-福利彩票会取消么| www.598494.com-19021期七星彩| www.672053.com-彩票行业整顿| www.751341.com-凤凰彩票最高邀请码| www.823459.com-500彩票足球竞彩| www.897764.com-中国福利彩票广告语| www.964798.com-时时彩每天稳赚| 财神网www.29277f.com| www.fq41.com-竞彩比分500直播| www.xg60.com-大中华彩票一分快三| www.18hb.com-付费彩票计划软件| www.947.cm-亿彩票靠谱吗| www.5483.cm-长春纹彩刺青地址| www.07438.com-时时彩开奖几点开始| www.52761.cc-七彩山鸡多少钱一斤| www.97224.com-彩票助赢软件网址| www.062394.com-彩吧彩票之家| www.199966.com-甘肃快三遗漏官方| www.273950.com-二分彩开奖号| www.370211.com-彩票最大的骗局| www.464507.com-体彩任九怎么算中奖| www.550680.com-中国福彩三d开奖| www.661747.com-新浪足彩预测分析| www.760622.com-腾讯时时彩计划稳定| www.869893.com-苹果x原彩显示在哪| www.949616.com-共享娱乐彩票| www.991729.com-旺彩3d预测推荐| www.eg3.com-破解彩票平台的软件| www.nz75.com-百盈彩票主页| www.5ht.cc-怎样科学玩高频彩| www.59ly.com-彩钢瓦机器设备报价| www.0033.org-什么彩票是7位数| www.7962.vip-彩搏888-| www.25129.com-彩铅牌子排名| www.66170.com-江苏快三推算和值| www.039395.com-百姓彩票网址| www.123671.com-国彩登录平台| www.193877.com-惠民彩票官方网站| www.262547.com-下载彩猫-| www.827090.com-珠江彩-| www.929577.com-体彩19034-| www.975114.com-七星彩打码软件| www.05ar.com-重庆时时彩双单技巧| www.82vh.com-幸运福彩3d走势图| www.1679.cc-粤海彩票高手料| www.9333.tv-儿童彩球益智游戏| www.45355.cc-关于彩票中奖的报道| www.89952.cc-福彩3d还在派奖吗| www.044112.com-福彩3d今期推荐号| www.144549.com-腾龙时时彩做号| www.230750.com-可靠的彩票平台| www.298341.com-广东福利彩票开奖| www.365405.cc-彩票基本玩法| www.447379.com-体彩二十十一选五| www.534240.com-易中彩网站-| www.656338.com-网易彩票还能买么| www.737507.com-恋母全彩ag-| www.803031.com-七星彩复式最佳买法| www.874312.com-808七星彩论坛| www.964410.com-幸运彩票的号码规律| 9号彩票www.80767q.com| www.fb90.com-01彩票官方-| www.vi48.com-双色彩票开奖结果| www.02su.com-不让买世界杯彩票了| www.64vx.com-2019彩票黄历| www.0061.site-牛彩票预测-| www.29378.com-乐彩软件-| www.69286.cc-海口彩票手机版下载| www.033235.com-下载新版网易彩票| www.104122.com-我国正规彩票有哪些| www.163100.com-3d预测汇总彩吧网| www.262206.com-富民彩票app| www.338270.com-竞彩合买怎么研究| www.402901.com-拾柴七星彩长局| www.502098.com-彩票567-| www.562837.com-青岛快三骗局揭秘| www.622442.com-时时彩神赞计划| www.681909.com-用什么买彩票官方| www.768967.com-软件亚博彩票| www.935150.com-彩之网首页-| www.982091.com-日本彩票开奖结果| www.de67.com-爱彩网上海快三| www.sx28.com-福利彩票几位数在选| www.06ja.com-法郎彩真品图| www.65ts.com-黑彩网站排名| www.0080.xyz-含彩的微信名| www.7445.xyz-体彩福彩怎么申请| www.19176.cc-体彩竞彩网实时比分| www.55363.com-青岛福彩养老院价格| www.93125.cc-竞彩公司团队| www.040851.com-足球博彩概率学| www.155708.com-派彩走势图tv版| www.231961.com-750彩票网-| www.297010.com-一分快三漏洞教程| www.359959.com-体育彩票资料大全| www.431839.com-福彩多少钱一张|