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.237196.com-江苏虚拟足彩e彩| www.455456.com-聚乐彩jlc-| www.642817.com-彩礼的意思-| www.33198.com-彩票趋势软件安卓| www.77953.cc-彩票走势图彩助手| www.948.bid-彩票店上班-| www.9361.org-彩票是邓家的么| www.072002.com-亿彩彩下载-| www.32202.com-网上彩票改号| www.91689.com-福彩36选7开奖| www.066282.com-海南私彩庄家软件| www.829306.com-彩管家app-| www.017433.com-易旺彩票怎么样| www.070370.com-大发快三如何预测| www.156678.com-新浪网彩票走势图| www.874431.com-重庆时彩时彩走势图| www.8334.cm-时时彩900注方案| www.974572.com-众彩娱乐网页| www.53456.cc-彩虹六号壁纸| www.765691.com-喜快3是啥彩票| www.850282.com-快开彩票怎么玩法| www.971502.com-厦门福彩-| www.hw22.cc-北京快三购买平台| www.26kp.com-石家庄竞彩快三查询| www.03718.com-网赌彩票的背后| www.015818.com-够力七星彩官网最新| www.019658.com-中国彩下载-| www.fi55.cc-天津华夏快三| www.zs15.com-重庆市彩害了多少人| www.79fl.com-沉迷买彩票的人| www.977804.com-哪里买足彩-| www.s61.cc-电脑开机彩屏| www.93jf.com-重庆五分彩规则| www.77675.cc-福彩御桥-| www.358548.com-福彩打票员教程| www.552070.com-彩球-| www.55912.cc-网投彩票犯法吗| www.111432.com-顺丰彩票是正规吗| www.85283.com-武汉快三预测| www.83900.com-河南各地彩礼钱排名| www.145356.com-今日足彩分析| www.933099.com-1分钟快三坑人的| 大赢家彩票www.493326.com| www.vw94.com-一分钟快三怎么赢| www.255155.com-彩票规律的计算方法| www.368288.com-双色球走势图星彩网| www.711606.com-竞彩足球单关分析| www.830951.com-老彩民高手它坛| www.972740.com-荷花涂色水彩| www.jx09.com-七星彩开奖号码结| www.56kp.com-福彩好做不-| www.3361.org-六个彩开奖网址大全| www.11638.com-福彩懂事长-| www.031065.com-038彩票下载网站| www.695221.com-常州彩票案件| www.777856.com-彩票漏洞软件| www.848776.com-大同广灵彩礼| www.913171.com-彩客网快三是真的吗| www.970835.com-腾讯分分彩漏洞刷钱| 日彩网www.rcw789.com| www.mg23.com-中国福彩基本走势图| www.s26.bid-北京体彩网首页| www.551187.com-内蒙古快三开奖链接| www.151851.com-505彩票平台| www.245899.com-易彩集团是什么| www.399156.com-七星彩出过豹子吗| www.005125.com-筒井彩芽-| www.156550.com-最近福利彩票事件| www.620912.com-彩票七位数走势图| www.767589.com-福彩3d定位-| www.897931.com-竞彩店和体彩店区别| 天朝彩票www.86079.cc| www.00se.com-一支彩染发安全吗| www.2654.org-e乐服app福彩| www.948651.com-手机怎么样买彩票| 网易彩票www.083wy.com| www.593989.com-特彩吧开奖-| www.739316.com-吉祥彩娱乐平台登录| www.954681.com-彩77安卓下-| www.hk67.com-750彩票网-| www.627569.com-彩迅pc-| www.739916.com-爱彩乐快3一分钟| www.813838.com-开快三群判刑吗| www.905965.com-浙江之间福彩网| www.989357.com-乐彩彩票百度| www.383292.com-体彩7位大乐透开奖| www.5618.net-u9彩票网安卓下载| www.362.website90彩票网站-| www.4466.me-彩薇花生产厂家| www.31rm.com-彩虹宝宝歌词回音哥| www.315321.com-七彩坊运动内衣连锁| www.509929.com-3d彩报图集-| www.692985.com-17彩票绑定安全吗| www.vw97.com-手机快三怎么玩| www.38ib.com-彩票王马洪平| www.23uq.com-亚洲杯足彩竞猜| www.032.biz-华富彩票-| www.4224.cn-竞彩即使比分| www.yh06.com-一分快三倍投技巧| www.22651.cc-彩票店几点停售| www.30bu.com-长春体彩到哪里兑奖| www.816.biz-体彩店装修-| www.5965.xyz-酷彩app不能提现| www.691789.com-足彩14场即时比分| www.67ib.com-日本熊猫彩滨| www.397514.com-体彩迷图总汇| www.507484.com-cpcp彩票官网| www.110130.com-鸿运五分彩开奖软件| www.200598.com-彩票123没有了| www.797072.com-彩博士全能王| www.618169.com-体彩举报黑彩票站| www.703003.cc-福利双彩票开奖结果| www.773271.com-恒彩彩票怎么样| www.838937.com-外围博彩和竞彩套利| www.901946.com-中大奖彩票网| www.963351.com-七星彩直播开奖直播| 8号彩票www.60108w.com| www.346662.com-大地彩票可靠么| www.2712.cm-解彩票-| www.6786.wang-时时彩后二万能8码| www.7830.me-彩票捕捉出没数字| www.082066.com-下载荣博彩票| www.2no.cc-买彩票一直反着买| www.08138.cc-体彩竟彩网手机版| www.392005.com-体彩竞奖流程| www.d85.club-乘风网彩票能提现吗| www.75iv.com-pp彩票真能赚钱吗| www.448866.com-重庆时时彩结果现场| www.763.xyz-网上买彩票群| www.xs12.com-怎么买彩票中五百万| www.088111.cc-澳客彩票正规吗| www.189697.com-河南快三今日遗漏| www.297608.com-关于彩票的知识| www.399858.com-永盛彩票ios| www.63sl.com-足彩单关购彩| www.42752.com-中彩网怎样支付| www.287358.com-七星彩票开奖现场| www.662003.com-竞彩2串1中奖故事| www.055271.com-彩票系统官方| www.7285.top-与彩虹有关的儿歌| www.7098.net-七彩阳光幼儿园简介| www.953969.com-助赢彩票pc-| www.cp864.com-福彩快三网站合作| www.026751.com-福利彩票刷流水单| www.609197.com-香港跑马派彩| www.04pw.com-彩铅线描画简单| www.467346.com-彩票投注计算| www.qq98.com-福彩的属性-| www.201343.com-七星彩1到9的口诀| www.kj37.cc-彩票中奖图片生成器| www.353252.com-八八彩票官网| www.374386.com-万彩吧资料大全| www.764803.com-连续签到彩金88| www.350928.com-福彩3d和值购买| www.835862.com-福利彩票代销证办理| www.917989.com-玩彩票大平台怎么样| www.894372.com-49am彩票平台| www.977570.com-彩票截止时间| www.qb33.com-新彩票软件-| www.503329.com-快乐彩任三中奖规则| www.637652.com-网上能买3的彩票吗| www.126914.com-优彩彩票网安全吗| www.783740.com-彩99原版-| www.466378.com-乐彩网怎么挣钱|