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.333911.com-体育彩票如何看| www.575380.com-彩吧vip彩票| www.723221.com-中国彩吧3d开奖| www.kz21.com-苹果彩票手机版下载| www.z28.biz-81彩票是正规的吗| www.71tw.com-恒大博彩-| www.2314.biz-惠泽夭下彩票| www.8901.club-竞彩比分神单图| www.91856.cc-好彩三八解什么动物| www.065406.com-赌博免费彩金网址| www.151516.com-正规彩票软件排行| www.278123.com-快三输了能回本吗| www.377358.cc-正规qq彩票-| www.525409.com-时时彩凤凰平台官网| www.622831.com-福彩彩票站-| www.709760.com-加彩票站老板微信| www.800650.com-彩金戒指-| www.886666.com-福利彩票中奖是什么| 恒彩www.hcw018.com| www.mb88.cc-华宇app时时彩| www.w60.vip-好彩频道在哪里直播| www.67jv.com-太原彩票中心| www.1760.com-下载天天中彩票软件| www.15177.com-温州体育彩票中心| www.68628.com-toto新加坡彩票| www.052175.com-彩票合买图片| www.142577.com-财神8彩是不是真的| www.230802.com-广西福彩中心在哪里| www.318151.com-博彩成语-| www.395343.com-彩虹岛稀有装备大全| www.564064.com-zc中彩娱乐-| www.646355.com-14场胜负彩心得| www.757348.com-彩票长龙最长开出| www.858244.com-博彩黑粉-| www.936084.com-新重庆时时彩走势| 七乐彩票www.qilc3.com| www.fh99.com-网上彩票哪个更安全| www.zg04.com-时时彩后三胆码公式| www.37ev.com-易彩靠谱不-| www.1992.love-宏发彩票官网| www.8362.org-海南七星彩开奖直| www.36331.com-福彩3d今天什么号| www.87297.com-快乐彩票合法吗| www.053039.com-吉林省福彩快三上市| www.247420.com-快3彩票送彩金| www.329663.com-福彩藏机市牛彩网| www.413219.com-卖福彩提多少钱| www.526309.com-私彩代理如何盈利| www.655212.com-重庆时时彩网投博金| www.751934.com-体彩江西11选5| www.832285.com-七彩视界下载苹果版| www.912288.com-幸运彩分分彩网址| www.980627.com-海南彩票解梦查码| www.tp20.cc-快三带线走势图| www.19ds.cc-掌上购彩七天彩代理| www.553.cn-彩福网天空彩| www.5234.win-派彩是什么意思呀| www.10564.com-关小刀足彩任9预测| www.58450.com-时时彩购彩助手下载| www.052921.com-大发快三豹子多久出| www.141797.com-缅甸时时彩诈骗流程| www.227072.com-大发快三开奖号| www.308741.com-南洋乐和彩平台| www.386459.com-武汉福彩快三规则| www.552213.com-3d利彩开机号| www.641211.com-福彩双色球擂台赛| www.736078.com-彩吧网首页开奖公告| www.813647.com-多赢在线彩票手机版| www.889333.com-如意彩票软件下载| www.962667.com-app星光彩票| 亿发彩票www.590833.com| www.jx38.com-长春福彩中心| www.f56.club-彩票官员-| www.42ml.com-湖南福彩数字3| www.868657.com-易彩彩票可靠吗| www.cp9198.com-中彩彩票注册邀请码| www.qg93.com-好彩1871价格| www.14ja.com-7星彩论坛南国火爆| www.98vw.com-彩票投注生成模拟器| www.3180.cn-世界杯竞彩足球分析| www.9858.cc-古建筑旋子彩绘图案| www.53307.com-彩虹六号战队排名| www.062864.com-淘彩app官方下载| www.155972.com-01福彩是什么| www.245320.com-易彩快三免费计划| www.332771.com-如何看懂彩票| www.438580.com-怎么做彩票代理加盟| www.547298.com-金发彩票-| www.3497.org-彩票2等奖-| www.27152.cc-新②彩票论坛白小姐| www.93873.com-七乐彩规律-| www.082688.com-网上分分快三合法吗| www.172747.com-一分快三彩票| www.258931.com-足彩竞猜胜负| www.372423.com-计算快三大小软件| www.494518.com-百姓彩坛香港最快| www.582620.com-进球彩票开奖查询| www.677908.com-体肓彩票试机号| www.08111.cc-湖南省体彩中心位置| www.75078.com-体育彩票星期几开奖| www.052783.com-大发彩票一分快三| www.144686.com-白菜网送彩金| www.283806.com-哪种彩票比较好| www.378821.com-旺彩双色球开奖下载| www.897911.com-彩票的广告语| www.af40.com-彩票开奖今天| www.e26.tv-湖北省福彩app| www.85cb.com-彩93怎么样靠谱吗| www.9395.cc-去国外彩票公司上班| www.020582.com-免费搭建彩票平台| www.151562.com-三地预测总汇多彩网| www.299319.com-安徽快三有假吗| www.428368.com-足彩105-| www.5615.me-体彩11选五67| www.65211.cc-彩娃彩票官网网址| www.087448.com-排列三预测彩票| www.215256.com-江苏快三预测网| www.363027.com-彩虹像桥还像什么| www.hq25.com-今日贵州快三开奖| www.h23.club-美国昨天彩票出奖| www.98rg.com-彩票杀人-| www.6184.com-彩之家彩票下载安装| www.11327.cc-万彩论坛网址| www.78281.cc-福利彩开奖今天| www.039080.com-福彩快三如何投注| www.128303.com-中国3d彩票玩法| www.210745.com-大发快三稳赢| www.297600.com-彩票知识图片大全| www.401966.com-七星彩七星彩综合版| www.34480.com-彩票王下载苹果| www.021626.com-快三单双技巧| www.117947.com-时时彩每天稳赚| www.199875.com-快三二同号单选技巧| www.317183.com-彩票九怎么样| www.387163.com-快三和值多少钱| www.44qm.com-时时彩半顺的玩法| www.946.tv-简单彩票-| www.5921.me-彩票燕赵-| www.15913.com-老翁识彩双色球专栏| www.62679.cc-支付宝买世界杯彩票| www.018038.com-彩票賺錢-| www.105113.com-好彩蓝莓双爆| www.220407.com-彩运8怎么看趋势| www.331241.com-高频彩联盟开奖直播| www.626623.com-时时彩三胆技巧| www.699150.com-网络卖彩票会坐牢吗| www.783939.com-爱彩票安卓-| www.868857.com-七星彩精准计划软件| www.015945.com-老版的唯彩看球| www.089925.com-好运彩彩票网邀请码| www.156073.com-代玩彩票提供帐号的| www.234025.com-痴迷彩票-| www.307536.com-彩友会app-| www.374621.com-好彩一开奖结| www.488300.com-足彩稳赚不赔攻略| www.579471.com-众亿彩票网-| www.654607.com-体彩和福彩下载| www.727595.com-杏彩app下载| www.801957.com-c58彩票下载| www.894465.com-拍照查询彩票中奖| www.57094.com-中国人福彩网| www.036151.com-彩票号码统计器| www.165098.com-中彩网的预测| www.258112.com-乐米彩票关停了|