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天

知道了
江西11选5 www.155475.com-彩票直播现场直播| www.69161.cc-体彩可以买双色球吗| www.319395.com-幸运快三代玩违法| www.341103.com-拉萨福利彩票中心| www.511047.com-哭着笑彩虹是什么歌| www.593850.com-竞彩即时比分010| www.668885.com-六彩宝典-| www.763552.com-一定牛竞彩-| www.850586.com-竞彩直播即时比分| www.929289.com-盈彩彩票app安卓| www.998624.com-体育彩票七位数玩| www.lw01.com-竞彩篮球app| www.312990.com-福彩幸运一幸运二| www.pw07.com-大资本彩票网址| www.11tt.com-现在能买彩票的软件| www.ci45.com-宁夏中卫快三走势图| www.77ei.com-万彩办公大师安卓版| www.033917.com-凤凰彩票app安装| www.64753.com-竞彩怎么防冷| www.836218.com-998彩票资料区| www.ek21.com-好彩网图谜-| www.wy92.com-福彩快3安全吗| www.850591.com-今天3d彩民乐钱途| www.974433.com-幸运彩吧福彩3d| www.iy83.com-体彩浙江6+1| www.rp34.com-彩票与赌博的区别| www.33st.cc-19019期七星彩| www.qo06.com-鑫彩网彩票是真的吗| www.pn47.com-彩乐乐围二遗漏| www.9524.loan-海南抓获私彩头目| www.284575.com-彩票行业发展趋势| www.753918.com-中国福彩极速快3| www.4707.xyz-彩票一张多少钱| www.083082.com-时时彩小鹿开奖提醒| www.376953.com-体育彩票的行业前景| www.964994.com-快乐彩票红包雨| 天下彩www.344680.com| www.tf57.com-大发快三预测团队| www.669054.com-外国人在美国买彩票| www.057337.com-发彩网下载安卓版| www.268716.com-广州鸣彩-| www.503631.com-黑彩平台源码| www.604791.com-彩猫彩票官网| www.299365.cc-买彩票怎么看走势图| www.985957.com-时时彩是几点到几点| www.fi53.com-代玩彩票拿佣金| www.f01.top-体育彩票手机购买| www.70bd.com-福彩开奖视频作假| www.22077.com-重庆足彩分析师| www.22748.com-广东体彩中心电话| www.666820.com-国乐彩ios-| www.685868.com-下载国际福利彩票| www.dw18.com-自助彩票机去哪申请| www.52161.cc-淘彩官方平台| www.125092.com-梦境与彩票数字| www.034360.com-nba篮球彩票推荐| www.128781.com-彩票猜大小单双| www.518474.com-中彩网双色球金码| www.627920.com-秦兰香桂林彩调| www.737757.com-七天彩破解-| www.f35.cc-乐彩彩票能提现吗| www.071907.com-福利彩票36期| www.222886.com-四川快三走势图| www.399811.com-分分彩长龙记录| www.779686.com-彩票店经营新思路| www.861383.com-中彩网群英会| www.926516.com-开福彩店-| www.981581.com-彩之星彩票靠谱吗| www.cp5378.com-北京快中彩走势图| www.539210.com-时时彩质合购买技巧| www.695577.com-中国竞猜网新浪爱彩| www.773271.com-恒彩彩票怎么样| www.858904.com-多赢吉林快三| www.920967.com-好运福彩网站| www.977309.com-河南南阳彩礼是多少| www.cp3807.com-快三计划网页版| www.026913.com-山东福彩网址| www.888351.com-彩票教程-| www.ff3.cc-时时彩开彩结果查询| www.83jb.com-福利彩3d走势图| www.7094.xyz-七彩艺校-| www.76598.cc-快三怎么守号中大奖| www.317539.com-时时彩越玩越输| www.ax23.com-体育彩票大乐透开奖| www.42ij.com-福彩老店主-| www.7629.xyz-荣耀彩票app| www.310320.com-咸阳市体彩中心| www.qa07.com-大彩彩票下载安装| www.86pe.com-彩票套利赚钱| www.610239.com-怎么在淘宝上买彩票| www.765444.com-哪个彩票反水最高| www.952918.com-广西福彩七乐彩开奖| www.iw23.com-足彩比-| www.56ou.com-体彩世界杯赔率| www.5662.wang-下载c29彩票软件| www.56935.cc-彩票追号倍投计算器| www.017892.com-刚力彩芽作品番号| www.va18.com-智慧彩河南快三| www.800013.cc-福彩领奖地址| www.032814.com-福利彩票如何分真假| www.498196.com-千百万彩票网址| www.722757.com-1688彩吧怎么样| www.cp290.com-河北快三开奖号码| www.945563.com-安徽省彩票领奖| www.3735.cn-彩票管家安全吗| www.50459.com-足球竞彩新浪| www.17414.com-中国竞彩网唯唯看球| www.zq91.cc-舟山飞鱼彩票| www.268920.com-广发彩票骗局| www.542559.com-西宁快三中奖软件| www.800591.com-博达彩票是真的吗| www.967717.com-买彩票能中吗| www.18rj.com-足彩大王杨光华| www.69xj.com-彩票输钱海滨| www.46pk.com-乐透彩票开奖历史| www.444041.com-富贵彩票下载安装| www.0478.org-办公椅彩箱包装| www.0173.org-国彩彩票怎么样| www.8828.loan-彩票白菜发布论坛| www.022447.com-怎么看彩票的走势| www.154397.com-竞彩赔率表-| www.309234.com-网上买彩票骗局| www.ex04.com-网上正规彩票网站| www.zy22.com-辽宁福彩11选5| www.67jo.com-彩票生意好做吗| www.8554.top-掌舵者彩票团队| www.330658.com-七天彩票网是真的吗| www.947457.com-网购福彩是不是骗局| www.093353.com-江苏快三手机平台网| 大赢家彩票平台www.781253.com| www.sd46.com-移动彩票app下载| www.961047.com-时时彩顺龙还是反龙| www.642742.com-900万彩票平台| www.895938.com-大发快三软件公司| www.392949.com-眼睛手绘图片彩铅画| www.8542.vip-福彩消消乐-| www.002878.com-彩c6彩票-| www.100379.com-金龙彩票注册网站| www.o48.club-数学家研究彩票投注| www.091977.com-博盈彩票网安全吗| 500彩票www.998484.com| www.398980.com-众彩网彩票| www.07za.com-刚力彩芽有什么背景| www.2806.top-鸿运彩票苹果版下载| www.154456.com-彩票下载下-| 乐赢家彩票www.918356a.com| www.603772.com-粉彩瓷器瓶-| www.724922.com-一洗彩-| www.827057.com-南方彩票安全吗| www.947990.com-甘肃省体彩十一选五| www.bq81.com-青岛彩票网-| www.519602.com-时时彩推波玩法实例| www.858923.com-彩票中奖信息查询| www.511117.com-张惠妹彩虹| www.722093.com-大庆彩票中奖新闻| www.850899.com-时时彩顺子玩法| www.922503.com-怎么当足彩分析师| www.979621.com-河北快三开-| www.163275.com-福彩排列五玩法| www.88620.com-小网送彩-| www.76gr.com-越南6位数彩票开奖| www.395789.com-当天彩票开奖| www.567200.com-彩虹3无人机的光电| www.657610.com-休肓彩票六加一|