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.844583.com-中奖彩票支票| www.947349.com-七乐彩综合走势| 500彩票www.66653w.com| www.637085.com-航天彩虹无人机| www.010458.com-彩票中奖最多多少钱| www.153348.com-彩票都是几个数的| www.820215.com-彩票厅怎么赚钱| www.956380.com-最新彩票软件| www.cp3660.com-大发快三是真是假| www.rc05.com-体育彩票官方| www.8691.com-彩票開獎查詢結果| www.44596.com-福建体彩官方网站| www.025859.com-彩票套利是真的吗| www.49811.com-摩羯竞彩足球app| www.4db.com-加拿大彩票大奖| www.41185.com-网上买彩票是骗局| www.754211.com-彩经彩票平台怎么样| www.928557.com-大奖彩票网是黑网吗| www.985925.com-福彩3d必出码绝招| www.bp78.com-易彩网app可靠吗| www.tj70.cc-乐炫彩票网址| www.95.me-地下六仺彩开奖资料| www.923792.com-60cp彩票-| www.982135.com-3d彩票选号神器| www.fs4.cc-六给彩彩票香港| www.960999.cc-杏彩彩票平台官网| www.582736.cc-买彩票被害惨的人| www.75757.com-好彩双爆珠香烟价格| www.6898.cm-好彩头的意思| www.086617.com-上海彩票机器人代理| www.827925.com-手机彩票红包聊天室| www.963737.com-竞彩资讯竞彩网| www.lj44.com-中彩网网址关闭了吗| www.6643.vip-双色球彩票讨论区| www.74yk.com-七星彩寒若冰预测| www.1687.cc-彩票下一期预测| www.7223.wang-彩虹六号大盾原型| www.20433.com-彩588app-| 818合彩www.www.9889hc.com| www.03730.cc-彩票赌网-| www.696135.com-新浪爱彩竞彩比分| www.900014.com-新版天天彩票下载| 8号彩票www.81520w.com| www.163298.com-3d彩图吧-| www.822776.com-牛彩网3dp3-| www.963827.com-刮彩票怎么玩法| www.438317.com-彩票代理利润| www.34cs.com-七星彩最新信息| www.3161.cn-胜负彩怎么玩法| www.299902.com-福彩走势图制作| www.35os.com-808七星彩早版区| www.27673.com-七乐彩图表走势图| www.7444.cc-体彩店那里开最好| www.91159.com-彩烟烟花多少钱| www.126885.com-福彩3d魔图高清| www.181269.com-足球彩票app大全| www.978368.com-彩票网址app大全| www.95vk.com-香港赢彩s55cc| www.32682.cc-篮球竞彩玩法| www.355025.com-怎样看彩票是否中奖| www.650966.com-吕志凯水彩-| www.743122.com-新星彩幸运快3| www.863233.com-胜负彩19038| www.bg4.cc-快三三军玩法介绍| www.037092.com-500彩app官方| www.766675.com-时时彩k线图手机版| www.21028.com-彩票两个公式| www.064141.com-时时彩送15彩金| www.231531.com-快三号码大全图片| www.971964.com-武汉彩票案-| www.cp4988.com-快三北京和值走势图| www.9977.biz-好运来大发快三| www.696562.com-新浪爱彩首页| www.414433.com-人生出彩的意思| www.265576.com-彩吧图库3d开奖| www.733989.com-杭州竞彩快三开奖| www.638210.com-网上怎么买竞彩足球| www.869376.com-七星彩中几个有奖| www.776202.com-赢彩票登录不了| www.78fs.com-173彩票下载安装| www.431996.com-贵州体彩投注站| www.530556.com-时时彩输死人了| www.379812.com-彩票009是谁开的| www.609232.com-派彩网违法吗| www.814789.com-福彩快3开奖实况| www.948355.com-体彩分析软件| www.637218.com-彩虹六号邀请赛冠军| www.876564.com-牛彩网三地图库| www.99272.com-时时彩全天最稳计划| www.yt03.com-吉林省体彩领奖中心| www.82sq.com-澳门快三分析软件| www.863.space-时时彩推荐打法| www.923764.com-cp彩票网-| www.vg4.com-七乐彩机选-| www.732276.com-解除婚约退彩礼案例| www.370385.com-欢色球彩票技术分析| www.465178.com-各类彩票的玩法| www.601533.com-彩漂怎么样-| www.732568.com-买快三的网站| www.842370.com-竞彩资金分配| www.950234.com-新华网网络彩票| www.kd.com-038彩-| www.7183.biz-宝乐彩票是假的吗| www.764118.com-带俸禄的彩票金管家| www.885460.com-云彩宝彩票怎么样| www.984514.com-奥客手机彩票| www.ig69.com-福彩天吉网彩票论坛| www.32379.cc-彩色印刷包装公司| www.04ty.com-玩大发彩票害死人| www.383379.com-699彩票苹果下载| www.uz53.com-彩票湖北快三开奖号| www.088088.cc-足彩必发指数| www.101856.com-正版时时彩平台出租| www.8030.vip-时时彩代理刷量技巧| www.743365.com-多多彩票官方网站| www.335757.com-彩票d-| www.05ip.com-竞彩猫直播预测分析| www.957.live-七乐彩单式顺序| www.24245.com-宝马彩票群-| www.e21.pw-盛兴彩票v3入口| www.911077.com-彩神计划app下载| www.980234.com-彩12彩票-| www.cp8478.com-内蒙古快三360| www.sk93.com-买彩票被骗已经报警| www.26zh.com-体育彩票一线屏| www.233594.com-河北快三单双号玩法| www.299442.com-快三计划app| www.356870.com-大庆福彩中心位置| www.10uz.com-欢色球彩票技术分析| www.3975.biz-新橙博彩靠谱吗| www.11591.com-双色球彩乐乐预测| www.6178.xyz-盈利彩票官网| www.974312.com-福彩三d开奖号预测| 126彩票网www.745126.com| www.dj78.cc-马来西亚分分彩开奖| www.408090.com-买七星彩有什么妙招| www.668132.com-新快报福彩票| www.24980.com-彩色铅笔画画桃花| www.41xt.com-如何解冻彩票账号| www.932308.com-怎么玩七星彩三字定| www.173.host-话费购彩票-| www.5684.com-微信玩彩票群| www.193115.com-河南快三质合走势图| www.572036.com-彩81彩票下载苹果| www.692290.com-福彩主任冯贪3千亿| www.767967.com-高频彩能赚钱吗| www.838001.com-nba季后赛彩票| www.902291.com-内蒙古福彩pp下载| 网易彩票www.089wy.com| www.1776.club-南国七星彩手机板| www.344973.com-彩票看图解码今天| www.155833.com-快三出豹子的概率| www.86rs.com-公益彩票网可靠吗| www.2971.org-新疆时寸彩开奖号码| www.28395.cc-智博网彩票资讯| www.536483.com-美国彩票在哪买| www.609326.com-派彩网是正规网站吗| www.668499.com-马来西亚博彩违法吗| www.750600.com-彩票丢失-| www.570613.com-快三走势图秘籍| www.666537.com-百事乐彩票官方网站| www.723046.com-藏宝阁丨4s彩票| www.790712.com-七星彩模拟摇号| www.890652.com-南方双彩网杀号定胆|