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天

知道了
彩01彩票 www.732291.com-政府打压彩礼| www.941325.com-体育彩票七位数唯一| www.222553.com-快三和值图-| www.746100.com-北京5分彩是真的吗| www.3871.xyz-七星彩四位-| www.0466.win-今日7乐彩中奖号码| www.627857.com-快三复式彩票| www.257805.com-大发快三开奖网址| www.2144.cn-福利彩票宣传广告| www.292577.com-北京快三高频开奖| www.419.pw-腾讯分分彩技巧回血| www.068268.com-幸运一分快三是什么| www.679688.com-戒烟戒毒戒彩票| www.877390.com-彩票计划全天在线| www.964741.com-体彩e球彩查询| www.cp859.com-高手教你玩uu快三| www.731644.com-甘肃快三和值计算| www.824339.com-七星彩内部资料| www.943328.com-福彩快三开奖视频| 发彩www.50732e.com| www.vh42.com-江苏老快三一定| www.74ep.com-中国彩宝市场| www.125485.com-福彩刮刮奖骗局| E彩堂www.9818x.cc| www.0879.site-最新白菜博彩| www.28455.cc-昆山体彩中心| www.152507.com-双色球彩之网| www.440212.com-789彩票app-| www.985700.com-买量竞彩比-| www.055.live-14亿彩票平台| www.376672.com-七星彩图片中奖| www.660401.com-购彩v是骗局吗| www.aj75.com-体彩开奖视频app| www.53xk.com-彩中堂黄大仙料| www.8539.top-快乐时时彩游戏机| www.897651.com-搞笑彩票广告宣传语| www.968639.com-彩金保值吗-| 500万彩票www.626990.com| www.385095.com-彩票源码社区| www.538478.com-福彩3d大花虎图库| www.992420.com-河南快三买和值| www.721.cn-vr重庆时时彩| www.88gn.com-体彩大透开奖| www.7864.vip-胜负彩论坛-| www.69859.com-大彩鲸11选5彩票| www.911456.com-福彩公益行最近走进| www.cai7533.com吉林省正规快三群| www.6623.org-双彩是什么意思| www.191258.com-彩票快3网站| www.39271.cc-3d双彩论坛字谜| www.590190.com-福彩三地合值表| www.453793.com-自制化妆品彩妆| www.805837.com-上海基诺福利彩票| www.905911.com-甘肃体彩app下载| www.968782.com-彩票倍投计算公式| www.04qe.com-先学线描还是彩铅好| www.822250.com-彩巴3d迷图第二版| 彩民网www.76520d.com| www.ko82.com-大发福彩快3| www.924974.com-快乐彩中奖助手软件| www.0143.win-彩色代表什么含义| www.7488.vip-8彩票直通车官网| www.55358.cc-时时彩平刷做号技巧| www.865969.com-注册福彩咋注册| www.8394.loan-北京快三开奖到几点| www.564078.com-贵州多彩贵州城| www.9lk.com-七星彩私彩回扣| www.560.cc-优乐彩登陆-| www.531558.com-中三千万的彩票反目| www.195282.com-彩长期盈利心得| www.296958.com-中信彩票是不是真的| www.6538.club-珠江彩票平台| www.19671.cc-一分时时彩规律| www.60150.com-中奖彩票税费| www.867428.com-七星彩廉江好彩哥| www.966952.com-信彩票网站官方网站| www.iu2.com-澳门快三开奖结果| www.rl28.com-重庆时时彩最强规律| www.6509.cc-爱中彩票网页版| www.949705.com-懂彩帝官网免费下载| 易彩网www.686vv.com| www.gh75.com-快三输钱怎么回本| www.ze54.com-一定牛体彩版本下载| www.488870.com-七星彩最高中奖注数| www.832167.com-七星彩走图表电脑版| www.21981.com-赢彩85cc-| www.560928.com-福彩3d5行走势| www.4909.xyz-3d福彩大报-| www.50011.cc-华宇彩票吧-| www.770434.com-篮球体彩怎么买法| www.912607.com-河南幸运彩开奖号码| 大中华彩票www.951077.com| www.15fv.com-腾讯时时彩游戏规则| www.5115.vip-时时彩下载苹果| www.51171.cc-彩之源彩票骗局| www.086100.com-乐山快三查询| www.178371.com-福建体彩网11选五| www.067559.com-江苏快三怎么看| www.130478.com-彩票站号怎么查地址| www.199676.com-河北快三同号推| 大赢家彩票www.530781.com| www.97ce.com-天下彩蓝月网站| www.76924.com-优彩买彩票靠谱吗| 彩神网www.csw288.com| www.77459.com-彩票走势图显示屏| www.168236.com-快湖北快三-| www.696873.com-汪汪时时彩下载| www.qp94.com-体彩福彩哪个靠谱| www.5610.com-彩票充值卡-| www.51028.com-黑彩平台黑钱报警| www.226225.com-福利彩票的宗旨| www.918805.com-送彩金的网站排行榜| www.270806.com-76cp彩票下载| www.1524.vip-赤峰体育彩票| www.st22.com-时时彩9码注码法| www.358398.com-新宝彩票平台怎么样| www.88611.com-永信彩票app下载| www.913149.com-万彩网有人玩吗| www.966664.com-大连体彩中心地址| 奔驰彩票www.281877.com| www.bi34.com-彩71是骗局吗| www.pa32.com-河北体彩网开奖结果| www.5du.cc-怎么看五分彩趋势| www.774802.com-微信好友玩彩票骗局| www.kd05.com-福彩官方手机客户端| www.20033.cc-彩经网安徽快3| www.58971.com-福彩字谜百度汇总| www.036148.com-九彩凤凰图片| www.6814.biz-日本四季彩-| www.596435.com-中国福彩安卓版下载| www.696525.com-澳门时时彩有官网吗| www.42wv.com-福利彩票团队| www.4822.vip-江苏快餐福彩| www.290255.com-彩客电脑版-| www.370385.com-欢色球彩票技术分析| www.954949.com-瑞彩祥云互动大厅| www.223039.com-5oo彩票网比分| www.284265.com-快乐彩开奖号码预测| www.345980.com-华夏云彩app下载| www.395533.com-七乐彩一周开奖几次| www.7710.cn-香港地下六仺彩开奖| www.34544.cc-玩彩平台信誉好排行| www.514116.com-开原琳彩一部| www.124169.com-高频彩票算法| www.gm41.com-河南彩礼标准公告| www.f56.cc-可以赚钱的彩球游戏| www.7452.cc-体育彩票游泳夺金| www.095730.com-福彩有几种-| www.67461.com-排列三新彩票| www.795111.com-猛虎报自动更新彩图| www.867108.com-金钱豹彩票游戏| www.256975.com-玩快三黑彩能赢| www.378584.com-好彩3选号技巧| www.470067.com-足彩也是赌博吗| www.550645.com-贵州福彩三d| www.661520.com-779彩票群-| www.41500.cc-h5彩票程序-| 大奖彩票www.77djcp.com| www.gj31.com-分分快三是不是骗局| www.vw71.com-v8彩app-| www.417929.com-彩票双机店转让| www.558045.com-彩神4邀请码| www.872780.com-购彩大厅与uu直播| www.757661.com-淘彩网是不是正规的|