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.748495.com-红彩彩票安卓版| www.865204.com-大奖网彩票官方网站| www.932302.com-亚博国际彩票| www.985181.com-好彩堂论坛首页| www.nn6.cc-五分快三怎么看走势| www.yf77.com-江苏福彩十五选五| www.768046.com-包赔团队彩票| www.865878.com-腾讯彩票手机版| www.942158.com-体育彩票店营业时间| www.997791.com-赌一分快三输了6万| www.bd24.com-澳门博彩app| www.xh56.com-上海十一选五爱彩乐| www.23ot.com-幸运彩河南手机网| www.125047.com-腾讯分分彩开奖号码| www.220898.com-彩票快三的规律| www.302450.com-贵州快三一天多少期| www.633557.com-什么彩票是七色的| www.774568.cc-永利彩票注册平台| www.869009.com-七星彩1对数是什么| www.940031.com-海南省体育彩票图| www.990271.com-体育彩票几个数| www.tv1.com-全国彩票360开奖| www.ti08.com-催祥云驾瑞彩| www.282910.com-佛法求财中彩票| www.805801.com-福彩形式-| www.940335.com-福彩吉林快三登录| 聚福彩票www.50989j.com| www.5585.site-福利彩票破解方法| www.31985.cc-彩票360安全购彩| www.047.date-九久彩票-| www.8809.wang-金福彩票网手机登录| www.55165.cc-微彩吧是怎么赚钱| www.197895.com-彩票屠龙什么意思| www.527864.com-百乐彩网页-| www.613452.com-彩票双色球开奖日期| www.712119.com-e彩乐手机登录| www.788952.com-竞彩足球单场推荐| www.860934.com-体彩手机在线安卓版| www.921218.com-火星彩票官网| www.841970.com-全天五分彩-| www.961557.com-黑牛吧全彩-| www.af40.com-彩票开奖今天| www.961770.com-qq怎么买彩票| www.zh49.com-怎样开网投彩票平台| www.6924.cn-七彩阳光体转运动| www.953494.com-马来西亚彩票查询| 博友彩www.258768.com| www.nx54.com-彩至尊平台官网| www.175384.com-北京快三走势一定牛| www.329924.com-体彩竟彩足球比分| www.501695.com-体彩刮刮乐大奖| www.951147.com-立彩彩票网-| www.hl93.com-广东福彩快三| www.466841.com-七彩乐开奖时间星期| www.563604.com-q彩网网页登录界面| www.655922.com-买彩票快3输| www.739630.com-北京快三公交时刻表| www.817356.com-彩七七充值不到账| www.893863.com-爱投彩票安卓| www.968374.com-谁有时时彩群拉我| www.mb17.com-ct彩投彩票-| www.r93.in-彩票3d怎么玩法| www.367752.com-为什么彩票不能预测| www.5491.com-双彩i论坛-| www.388977.com-c彩38app-| www.531662.com-彩铅风景绘画作品| www.460068.com-天天免费好彩大料| www.585901.com-现金彩网-| www.661010.com-九宫格怎么算彩票| www.491008.com-海口七星彩论坛首页| www.092573.com-福建体育彩票下载| www.180998.com-河北快三一定牛网站| www.266076.com-福利彩票3的d开奖| www.341972.com-东湖福彩社区| www.414689.com-彩96网站可靠吗| www.512142.com-草丛彩铅画-| www.578729.com-星光彩票安全吗| www.650000.com-婴班户外活动彩虹伞| www.739191.com-快三数学公式| www.807299.com-澳门福乐彩开奖结果| www.876921.com-七乐彩历史比较器| www.936700.com-幸运快三是什么游戏| www.982260.com-福彩技巧和值| www.bx34.com-彩神通关注码| www.sn53.com-澳客彩网比分直播| www.188215.com-福彩快3网址| www.76rl.com-湖北体育彡彩票| www.028101.com-爱投网彩票-| www.171655.com-河北快三官网下载| www.47744.com-山西省体彩中心电话| www.000184.com-体彩浙江6十1| www.092174.com-345彩票软件| www.175002.com-快三赚钱技巧集锦| www.627264.com-nba篮球彩票规则| www.733438.com-福建彩票网走势图| www.963798.com-手机上玩彩票输了| www.37ll.com-七星彩幸运之门| www.8917.org-七星彩每晚几点停售| www.181827.com-大发快三官方网| www.585058.com-盈盈彩手机版| www.506996.com-陕西快乐十分钟体彩| www.176137.com-大发快三官网下载| www.281654.com-彩之家邀请码是多少| www.595062.com-36选7好彩1开奖| www.562506.com-速8彩票-| www.05hg.com-体彩任选三中奖金额| www.75ee.com-彩票分析学-| www.168783.com-安徽快三今天走势图| www.7777.bid-青岛中彩票-| www.17706.com-彩店宝新版-| www.55829.cc-网易彩票黄历软件| www.222802.com-彩票奖金计算器| www.ow07.com-福彩3d试机号破解| www.490473.com-七星彩三字定位包法| www.616360.com-亚彩会游戏官网| www.721235.com-新葡萄彩票-| www.850101.com-时时彩计算个位公式| www.932005.com-大发快三黑平台| www.985604.com-广西双彩最新开奖号| www.te0.com-江江苏快三走势| www.979937.com-打彩票赊账不还| www.c5.cc-湖北十一选五爱乐彩| www.17617.cc-竞彩足球比分结课| www.kj06.cc-福彩开奖双色球时间| www.52hs.com-足彩胜负彩欧赔亚盘| www.0794.date-锋彩tv版直播| www.142811.com-彩虹8网络彩票| www.234195.com-快三彩票群-| www.16qg.com-世爵国际重庆彩真假| www.113197.com-富鱼网彩票-| www.650148.com-投彩网c97m软件| www.820649.com-足彩竞猜必发指数| www.063624.com-彩票站什么时候淡季| www.281666.cc-福彩林竹决杀一码| www.377734.com-腾讯时时彩官网下载| www.215269.com-大发快三免费计划| www.541545.com-爱购彩票邀请码| www.725275.com-彩快上娱乐网址| www.792352.com-小军彩吧第一版| www.872185.com-凯里福彩大奖| www.929999.com-大玩家彩票不能提现| www.988062.cc-百万彩票是哪个平台| www.gv5.com-彩票大乐透开奖结果| www.ta13.com-十二生肖彩票叫什么| www.22ig.com-香港703彩票网| www.0105.top-福彩3b晚秋和值迷| www.17677.cc-体育彩票销售| www.227655.com-快乐投手机购彩软件| www.441130.com-彩票开奖查淘| 网易彩票www.097wy.com| www.569630.com-福彩彩吧图谜总汇| www.cy46.com-彩票软件官网| www.wt77.com-福利乐和彩开奖结果| www.18bg.com-福彩双色球最大| www.705618.com-异地买彩票-| www.817630.com-香港快三多久开一次| www.900591.com-彩吧图库第一版应用| www.962871.com-汉中体彩中心电话| 快彩网www.378016.com| GO彩www.gai40.com| www.984214.com-广东彩票手机版| www.bb33.com-江西快三投注道风云| www.ts70.com-合买彩票网-| www.21lf.com-福利彩票怎么考试|