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天

知道了
1分快三 www.vx29.com-快三怎么玩最合算| www.318657.com-奔腾彩票-| www.100341.com-乐彩网软件-| www.12381.com-如何下载一分快三| www.669630.com-彩钢板一吨有多少米| www.786005.com-xr关原彩-| www.868879.com-双色球彩票骗局| www.938007.com-彩之王下载地址多少| www.999889.cc-福彩3d黑龙字谜| www.by11.cc-彩票长龙怎么看| www.vi68.com-体育彩票怎么算中奖| www.18ps.com-亿米彩软件怎么样| www.99hy.com-8828yy彩票-| www.ty7.com-体彩开奖结果排列三| www.127629.com-彩虹岛手游官网| www.227233.com-分分快三输惨| www.563509.com-d8彩票下载软件| www.939388.com-湖北新快三今天号码| www.053663.com-分析足彩收费违法吗| www.5427.com-福彩3d天庚图| www.314508.com-足彩胜负平都买| www.422589.com-腾讯分分彩验证计划| www.550567.cc-火星彩票购彩大厅| www.687768.cc-福彩往期开奖号码| www.778469.com-彩乐园3下载| www.854853.com-极速快三游戏规则| www.953201.com-体彩排列五奖号码| www.jy01.com-人人彩票下载| www.144326.com-皇冠竞彩违法| www.255683.com-易盈彩票苹果| www.350112.com-佳缘七星彩骗局| www.506801.com-竞彩总进球数23球| www.647407.com-好运来彩票怎么玩的| www.772766.com-大发时时彩杀一码| www.888885.com-黑彩彩票机器| www.988794.com-中国彩票有哪些| www.je66.com-福彩快三奖励| www.38605.com-环彩手机app| www.255310.com-北京时时彩开奖记录| www.357387.com-中彩票离婚怎么处理| www.515790.com-彩票奖券纠纷| www.636832.com-分分彩手机做号软件| www.579039.com-360福彩3d杀号| www.875126.com-福彩魔图-| www.808899.cc-彩票兑奖周期| www.6076.cn-彩色纸箱设备厂家| www.25oj.com-华彩集团宽甸| www.50684.cc-更好的彩票平台源码| www.099166.com-查福彩三地藏机图| www.391456.com-艾彩原创海天足恋| www.603480.com-快三作弊软件下载| www.731324.com-怀诚体彩店app| www.818864.com-北京福彩投诉电话| www.974729.com-有时时彩微信群吗| www.lb44.com-万人牛牛彩票| www.337344.com-赌快三输10多万| www.150536.com-迅盈彩票官网下载| www.d00.top-时时中彩票平台登录| www.322786.com-全球盛兴彩票v1| www.d44.org-七星彩梦册解梦大全| www.057679.com-大发移动彩票| www.136992.com-青岛七彩-| www.230215.com-盈彩网真的能赚钱么| www.307411.com-韩国金山快三图| www.378935.com-彩票中奖查询网| www.482895.com-5个数的彩票有哪些| www.559255.com-包头福彩网点| www.625804.com-天天爱彩票客服电话| www.95852.cc-中国福利彩票规律| www.056466.com-合肥体育彩票店转让| www.836023.com-丰彩娱乐app| www.392310.com-纸质彩票怎么兑奖| www.79110.com-手机彩铃怎么定制| www.996174.com-足彩北京单关| www.08879.com-福彩双色球是假的吗| www.077155.com-买三位数的彩票| www.102297.com-五分彩全国统一开奖| www.690301.com-足彩实时欧赔| www.234638.com-幸运快三app| www.671553.com-风云彩票网址| www.890738.com-十分钟彩票倾家荡产| www.94wn.com-体育彩票哪种快| www.14lz.com-安徽体彩在哪里兑奖| www.165314.com-快三手机版破解器| www.8309.me-体彩购买下载| www.436628.com-体育彩票十一运夺金| www.290529.com-内蒙古快三奖金| www.835634.com-云南体彩官网app| www.036692.com-彩票榜邀请码| www.191496.com-分分快三软件最新版| www.315071.com-最大的时时彩平台| www.r06.cn-福彩通官网-| www.003880.com-新盈彩平台登录| www.520841.com-体彩中奖喜报| 乐彩网www.566897.com| www.57153.cc-武汉休闲快三拉花| www.2095.in-微信好友彩票诈骗| www.cp3022.com-福建福利彩票快3| www.467846.com-摆渡龙江体彩网| www.97893.cc-神兽时时彩专业| www.300022.cc-福彩手机购彩软件| www.570312.com-七彩云浏览器手机版| www.889157.com-易彩网彩票3d| www.783223.com-环球彩票9028| www.7701.org-幸福彩票官网下载| www.546178.com-体彩换纸-| www.954656.com-竞彩外围投注app| www.343959.com-网易彩票电脑版网页| www.587867.com-彩票吉林彩票快三| www.760076.com-南洋彩开奖结果查询| www.314533.com-体彩足球竞彩比分| www.596726.com-体彩排排列三中奖号| www.781646.com-2019体彩新规| www.865585.cc-3d福彩推荐-| www.232220.com-福彩有几种玩法| www.192229.com-福利彩票快三开奖| www.c51.cc-苏快三是什么| www.634186.com-七彩阳光公司| www.32596.cc-河南周口订婚彩礼| www.973761.com-一分快三ios下载| www.n67.net-彩票分分快三规律| www.nk93.com-福彩3地走式图| www.1215.pw-全民彩票手机版苹果| www.128439.com-福彩官方网-| www.256110.com-北京丹彩快三| www.770824.com-福彩中心举报电话| www.4739.xyz-买彩票落网-| www.445592.com-福彩3d布衣天下二| www.70550.com-体育彩票出票公司| www.ri5.cc-福彩三d走势图| www.0xa.com-中彩网高手的姐预测| www.585576.com-有大学生中彩票吗| www.569734.com-牛彩网三d字谜总一| www.76175.com-竞彩按比例投注计划| www.187.online-伯乐彩票网址| www.796482.com-快彩网合法吗| www.765069.com-七星彩加急版一日谈| www.661507.com-过夜彩金幸运28| www.947229.com-竞彩14球比分| 福彩www.15355hh.com| www.033876.com-凤凰彩票苹果手机版| www.sc18.com-广西褔利彩票ap| www.632234.com-时时彩先赢后输| www.015624.com-中彩网快3江苏| www.707569.com-大发彩票骗-| www.07ps.com-天使与恶魔刚力彩芽| www.36752.cc-幸运28彩下载| www.358962.com-新浪微博怎么买彩票| www.711871.com-58彩下载安装| www.um76.com-彩票分析软件手机版| www.6729.com-新会员布衣彩吧图库| www.268070.com-安徽快三遗漏值| www.714695.com-1210彩票-| www.156838.com-新浪足球胜负彩首页| www.850406.com-足彩二串一玩法| www.804579.com-博彩源码论坛| www.822872.com-体彩7星彩12号的| www.968008.com-赌场买彩票吗| www.09aa.com-尼彩最新手机| www.628098.com-荔浦的彩调-| www.12235.com-福彩能网上买吗| www.173360.com-甘肃快三一定牛荐号| www.21667.cc-彩民之家总站| www.13el.com-足球彩票倍数怎么算|