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.852655.com-华人官方彩票注册| www.968593.com-优乐彩提现问题| www.82be.com-体彩7星彩奖金| www.886357.com-环彩app-| 91彩票www.9155g.cc| www.024742.com-江西省体彩中心位置| www.157623.com-体育彩票点球算不算| www.510538.com-体育彩票放几天| www.268937.com-彩经网3d杀号定胆| www.381980.com-宁夏休育彩票大乐透| www.538731.com-彩票必赢方法| www.630208.com-266彩票-| www.721956.com-彩票作假最新事实| www.811772.com-特彩吧49qcc| www.887890.cc-七星彩开结果奖历史| www.di19.com-福彩作假-| www.ym43.com-今日说法彩票骗局| www.733932.com-福彩中4个号多少钱| www.875232.com-新皇冠彩票-| www.980351.com-我买彩票在哪买| www.im20.com-福彩3d群-| www.365220.com-彩票不能提现骗局| www.774723.com-瑞彩网彩种-| www.3924.biz-竞彩足球可以买了吗| www.09804.com-福彩巅峰独胆| www.61755.cc-七星彩跨度多少| www.117775.com-竞彩普及日强胆推荐| www.017186.com-福彩门户香港报码| www.186020.com-彩客站快三是真的吗| www.280970.com-时时彩员工会坐牢吗| www.373011.com-322彩票-| www.500955.cc-彩票都有哪些| www.580895.com-七乐彩开奖胆拖| www.539710.com-上海快三计划高手| www.672609.com-默彩-| www.081919.com-在线彩票计算器| www.079046.com-官方大玩家彩票| www.176730.com-福彩快三有啥规律| www.263207.com-河北快三一定牛开奖| www.398702.com-送彩金可提现游戏| www.98tm.com-足彩串怎么算| www.7769.vip-彩九ios-| www.44247.com-福建体彩31阿四| www.366600.com-福彩33期出的杀号| www.176982.com-福建快三开奖一定牛| www.335336.com-广西快三是合法的吗| www.446655.com-福利彩票自动销彩机| www.553076.com-今天南风彩36选7| www.639743.com-1分钟时时彩能玩吗| www.798080.com-辽宁11选5彩票| www.879188.com-和彩中华-| www.957895.com-kc一分快三-| 七彩www.53900r.com| www.819406.com-七星彩彩图版区| www.092755.com-送好和彩礼一样吗| www.7294.biz-小米彩虹电池和南孚| www.39285.cc-全福彩app-| www.47oh.com-刚力彩芽红吗| www.840167.com-鼎吉传统彩票| www.960004.com-山东3亿彩票| 大赢家彩票平台www.913075.com| www.cp06.com-江西快三彩票| www.830397.com-彩票查询中奖软件| www.906063.com-安徽快三规律| www.999663.com-星耀国际彩票托| www.zg32.com-鑫彩娱乐靠谱吗| www.41et.com-安庆市福彩中电话| www.0315.love-体彩店距离限制| www.111058.com-破解私彩票软件| www.190010.com-山西福彩快三| www.268801.com-哈尔滨快三-| www.350303.com-福彩3d五行推算| www.36547.cc-澳门彩票平台推荐| www.3346.in-彩票有走势吗| www.21378.com-网上买彩票诈骗| www.118746.com-有97彩票吗-| www.196038.com-上海快三今日开奖| www.267210.com-彩票开奖信息| www.341200.cc-沧州市体彩中心| www.964030.com-描写雨后彩虹的句子| www.671416.com-老版彩乐园-| www.761269.com-好彩店苹果版下载| www.wt77.com-福利乐和彩开奖结果| www.10yf.com-彩钢板门图片| www.73od.com-在哪能买福利彩票| www.977650.com-豪彩娱乐app| www.94775.com-足彩赔率规律| www.260234.com-福利彩票怎么领大奖| www.353308.com-爱乐透彩票门户网站| www.490044.com-买福彩的技巧| www.573852.com-世界研究彩票牛人| www.eu30.com-手机版彩票助赢| www.e97.club-彩78彩票网址| www.qq80.com-中国福彩发行宗旨| www.31od.com-体彩星期走势| www.537.cc-长江国际彩票app| www.79582.cc-3d之家彩票预测网| www.033570.com-足彩外围是什么意思| www.427986.com-博友彩1分快3| www.yl95.cc-038彩票网络平台| www.17dc.com-三d福利彩票规则| www.81zl.com-陕西省福彩中心电话| www.1411.in-众彩子默双色球杀号| www.6438.cm-福彩网什么意思| www.11113.com-8k彩票是不是骗局| www.51215.com-牛彩app真的吗| www.646141.com-博彩注册送彩金38| www.78033.com-北单竞彩官网| www.023435.com-23彩票-| www.8096.com-中国福彩一倍多少钱| www.690105.com-500足彩网分析| www.786167.com-至尊娱乐购彩| www.883857.com-新博瑞彩票幸运快三| www.8738.biz-刮刮彩票中奖图片| www.698.cm-竞彩赔率总结| www.8419.vip-生日彩票生成器| www.53882.com-体彩竞猜网-| www.063895.com-致富彩登录-| www.025216.com-竞彩篮球彩票投注| www.159063.com-爱乐彩彩票投注平台| www.343884.com-海南七彩开奖| www.816796.com-快三老输钱-| www.888783.com-078彩票经销商| www.969134.com-彩票公益金项目| www.as94.com-高频彩拉人赚钱吗| www.ud35.com-王者彩票押大小| www.05mt.com-彩29登录-| www.ut61.com-吉林快三号码走势图| www.8836.bid-重生之彩票专家| www.009109.com-买彩票输了三万| www.073998.com-体彩p3杀码技巧| www.141740.com-彩运网cy553| www.215263.com-306彩票app-| www.282229.com-彩票为什么不是直播| www.357108.com-彩铅美食图片| www.433655.com-江西快三500期| www.524318.com-黑彩票网站大全| www.4578.pw-易彩乐违法吗| www.18835.com-彩票官方网站快三| www.78771.cc-亮彩打印纸-| www.717611.com-初学者买什么彩铅| www.795595.com-天天彩平台-| www.cp7966.com-福彩网快三下载| www.136.biz-彩虹屁是啥-| www.242826.com-福利彩票几点开奖| www.457062.com-美国彩票华人得主| www.cai2221.com河北快三推荐号码| www.tx46.cc-快三投注员头像| www.547318.com-富盈彩票app下载| www.880060.com-内蒙福彩主任电话| www.942927.com-杭州体彩兑奖中心| www.980496.com-注册送彩金的网站| www.uc4.cc-今晚体彩开奖号| www.vy90.com-江苏快三改时间了吗| www.06kl.com-彩铅色彩搭配口诀表| www.150226.com-快乐中彩票-| www.949513.com-江苏快三杀号软件| www.997255.com-竞彩足球官网| www.cd33.cc-体育彩票五排列| www.sr77.com-红宇体彩店-| www.762137.com-竞彩猫ios版| www.710258.com-荣兴彩票官方网站| www.797068.com-福彩三d守号| www.853940.com-万彩吧彩票玄机图|