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.768318.com-今天足彩十四场比分| www.985831.com-足彩推荐分析软件| www.mb4.com-吉林省快三遗漏| www.ua61.com-查今天彩票开奖号码| www.16bh.com-体育7星彩票| www.0037.pw-彩票跟号能中奖吗| www.7266.loan-彩虹5多少钱一架| www.32709.com-江苏体彩021弋| www.84245.com-天津体彩网app| www.050778.com-快三每天几点开始| www.180399.com-内蒙古快三360| www.262179.com-快三有作弊软件吗| www.369042.com-彩票体彩排列三| www.481342.com-喝彩中华报名方式| www.569000.com-1分快三贵州| www.653635.com-莱利彩票是什么| www.782305.com-中福彩下载-| www.868222.com-海南彩票网开奖结果| www.970651.com-彩票高手带计划| www.cp1126.com-彩票平台注册送19| www.ot28.com-正规手机购彩| www.04wg.com-儿童彩铅绘画图片| www.82em.com-极速赛车彩票是哪的| www.2511.cc-86人工彩票网| www.8828.vip-竞彩之家电脑版网页| www.69172.com-印尼分分彩开奖直播| www.034490.com-体彩nba推荐| www.127507.com-周杰伦彩虹英文版| www.210268.com-彩票yy挂机-| www.289030.com-人人中彩票网登录| www.407006.com-杭州体彩中心官网| www.520191.com-青岛福彩郑庄养老院| www.595897.com-鑫亿彩真的能挣钱吗| www.673458.com-福彩走试图-| www.756396.com-新粤彩1000论坛| www.886911.com-网赌高频彩重注都死| www.971666.cc-大牌彩票官网| www.cp703.com-玩快三哪个平台好| www.nn48.com-nba竞彩软件| www.9bk.cc-华彩彩票-| www.71sn.com-恒大彩票怎么登录| www.1555.live-诺亚在线彩票有托吗| www.9977.biz-好运来大发快三| www.59516.cc-那个彩票软件有破解| www.023211.com-福彩10选8骗局| www.098856.com-三星福彩平台| www.170234.cc-福彩快三彩票下载| www.340078.com-网上怎么买竞彩篮球| www.427876.com-足彩4个3选缩9注| www.530268.com-天气网双彩论坛| www.642813.com-彩汪汪彩票-| www.734311.com-福彩生肖开奖表| www.811797.com-七乐彩四拖六| www.886103.com-彩库宝典手机版下载| www.982183.com-福彩3d新彩吧网站| www.kg2.cc-皇都彩票首页| www.qs56.com-贵阳福彩中心| www.09kt.com-有什么好的彩种| www.83ny.com-体育彩票下载官方| www.2350.shop-体彩3d图-| www.8226.cn-网上365天天彩票| www.31578.com-新快三综合走势| www.78708.com-微彩吧邀请码| www.032044.com-怎么推广彩票平台| www.112430.com-广州鸣彩传媒董事长| www.188508.com-爱彩乐app-| www.266386.com-福彩排7走势图| www.477088.com-江西体彩十一走势图| www.562912.com-彩三地字谜汇总| www.636219.com-900彩票黑平台| www.749350.com-全福彩app-| www.818702.com-手机体彩软件| www.891337.com-福彩刮刮奖广告语| www.961478.com-体彩助手二维码下载| 彩82www.128083.com| www.gp14.com-大发快3分分彩计划| www.yi76.com-福彩3d图纸今天图| www.21dr.com-彩票平台数据接口| www.0007.cn-体彩图迷-| www.6510.cn-体彩刮刮卡害死人| www.16698.cc-体彩足球竞猜技巧| www.58258.com-电视彩票走势图大全| www.030637.com-河北开乐彩-| www.108017.com-正规彩票平台排行榜| www.176138.com-福彩3d死规律| www.283230.com-有极速快三吗| www.366727.com-众彩极速赛车破解版| www.456559.com-3d独福彩预测| www.544969.com-彩票算号工具| www.652338.com-上海雅彩鱼缸| www.726119.com-七乐i彩开将| www.788942.com-福彩3b开奖历史| www.863831.com-体彩排列三走势图儿| www.929062.com-彩票条码-| www.982966.com-微信彩票游戏赌博| www.po54.com-求668彩票邀请码| www.0at.com-足彩外围漏洞| www.54iy.com-假彩票机那有卖| www.924.mobi-彩票代售点利润| www.4882.biz-千万彩票如何下载| www.9988.biz-用不了彩娃彩票| www.77524.cc-今日体彩出奖号码| www.027190.com-吉林快三和值图表| www.101738.cc-竞彩推荐平台app| www.167586.com-江苏快三是正规的吗| www.282496.com-反跟导师买彩票| www.365815.cc-彩铅线描动物图片| www.452222.com-太原体彩中奖| www.539804.com-福彩3d跨度定胆表| www.641242.cc-600彩票注册| www.723280.com-美国超级彩票玩法| www.793826.com-网赌买彩票单双骗局| www.868395.com-七星彩的对数| www.019243.com-福利彩票多少钱一张| www.876187.com-三d彩票山东谜| www.931832.com-体彩总部在哪| www.76883.cc-陆慧明足彩任九推荐| www.658757.com-五洲彩票平台网址| www.757809.com-菲律宾彩票平台| www.839122.com-福利彩票詹天佑| www.900988.com-体彩排练3-| www.963307.com-彩宝彩票网合买| 全民汇彩票www.52303y.com| www.dy67.com-2元彩票网-| www.ud82.com-5分彩开奖号码| www.54.org-彩票店能买快三吗| www.63mc.com-彩票体彩分析软件| www.0342.cn-广东政府彩购网| www.9439.loan-十中一的彩票有哪些| www.44683.com-福建体彩网站下载| www.86373.com-琉璃三彩官网| www.033374.com-怎样加入彩站宝| www.102268.com-qq彩票正规吗| www.161199.com-大发彩票注册| www.282000.cc-新浪彩票双色球| www.360214.com-买私彩定罪-| www.441455.com-大众彩票安卓版| www.525235.com-时时彩大全app| www.623020.com-3d字谜牛彩-| www.683706.com-实体彩票店合作网站| www.753632.com-分分彩挂机方案论坛| www.848554.com-彩票官方注册| www.895377.com-贵州彩票中奖快三| www.949584.com-大彩鲸快3-| www.984614.com-广州福彩站主登录| www.lb55.cc-中奖彩票app官网| www.zy12.com-彩票算法大揭秘| www.19dh.com-礼拜五有什么彩票| www.202.org-素描彩铅植物大全| www.2949.vip-中国福利彩票的招牌| www.7862.com-足彩全包过滤条件| www.20338.com-九度彩票是怎么回事| www.56573.com-河北体彩兑奖流程| www.96340.com-福彩体彩合营| www.050317.com-体彩自助售卖机| www.183987.com-河北快三奖金新规则| www.246865.com-彩票冷热号规律| www.309178.com-跟群买彩票-| www.366602.com-体彩33期-| www.441947.com-竞彩网线路检测| www.521946.com-时时彩量刑-| www.580167.com-中国足球彩票网站| www.639417.com-彩票店老板中大奖| www.794888.com-飞鱼体育彩票网址|