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.226861.com-河内5分彩走势图| www.548257.com-彩票共赢-| www.690310.com-赢彩平台-| www.826714.com-信达彩票-| www.951181.com-中彩在线怎么玩| 彩天下www.196081.com| www.sv04.com-七星彩怎么算中奖| www.286332.com-炫乐彩票是不是真的| www.449183.com-彩票怎么打-| www.67577.cc-中彩票以后的生活| www.128202.com-新华彩票今日头条| www.506803.com-足彩进球数看盘技巧| www.627906.com-桂剧彩调-| www.111019.com-602彩票-| www.237070.com-中国体育竞彩网首页| www.50fg.com-福彩全部藏机图汇总| www.275282.com-61彩票-| www.379811.com-黑客更改彩票| www.545361.com-彩票算号-| www.657844.com-情人节送彩票| www.775620.com-福彩助学网-| www.858194.com-国外博彩违法吗| www.346140.com-彩神8事怎么坑人的| www.385051.com-最新竞彩开奖结果| www.381063.com-彩票双色球手机购买| www.66589.com-河北体育彩票网站| www.697515.com-极速快三是官方彩吗| www.647920.com-乐喜彩票登录| www.838501.com-足彩什么叫下盘打出| www.933678.com-时时彩网上代理| 500彩票www.303480.com| www.wl67.com-体彩票开奖查询结果| www.zq59.com-体彩飞鱼8选3技巧| www.62wj.com-170彩票服务平台| www.1665.biz-彩票属于五行属什么| www.9836.biz-图书古建彩绘纹样| www.549550.com-078彩票一经销商| www.730258.com-第一彩票cc-| www.638300.com-色彩图片风景| www.014666.com-海南七星彩预测专家| www.oa89.com-官方彩票九九| www.693062.com-大发彩票邀请码| www.950044.com-上期七星彩开奖情况| www.820051.com-足彩公平盘软件| www.954737.com-体育足球彩票玩法| www.31gb.com-彩虹岛稀有装备大全| www.252579.com-彩票刷水兼职套路| www.796234.com-盈彩国际-| www.895649.com-玩高频彩票的后果| www.976447.com-长春市福利彩票领奖| www.ao88.cc-贵州彩票中奖者| www.rs70.com-福利彩票预测43| www.57bt.com-体彩刮刮乐加盟| www.547270.com-博发彩票高倍会中吗| www.654381.com-南昌彩票店合作最新| www.742228.com-湖南省体育彩票| www.815198.com-福彩彩票机键盘图| www.885849.com-五洲彩票跑路了吗| www.nj24.com-竞彩好用的app| www.s90.cc-彩票中奖恶搞| www.49tq.com-赢彩彩票软件| www.653.red-最新圣地彩十分一开| www.4473.xyz-互联网彩票11选5| www.9411.net-568彩票下载安装| www.680697.com-全民福彩骗局28| www.780070.com-彩铅星空的画法图解| www.870815.com-彩票投注翻倍计算器| www.941632.com-快开彩票新规则| www.993110.com-竞彩足球足彩分析网| www.cl49.com-彩报第一版今天| www.rx11.com-安徽省福彩中心地图| www.6nk.com-pp彩票正规合法吗| www.59dq.com-vr彩票平台-| www.896.in-大学生彩票中奖| www.056607.com-合肥福利彩票销售点| www.xj7.com-吉林省福利彩票| www.yu34.com-美国彩票和中国| www.98qf.com-彩运宝安卓版| www.056364.com-七星彩中了两个号码| www.133266.com-七星彩高手图规| www.707378.com-拼搏在线彩神通| www.880152.com-台北快三规律破解| www.cai1066.com河北快三专家预测| www.7593.cc-彩虫安卓手机版下载| www.389089.com-中囤足球彩票网| www.538395.com-国彩合买骗局| www.606587.com-长沙体育彩票管理| www.672565.com-了安然七星彩| www.743438.com-买彩票中奖概率多大| www.812399.com-福彩3d应用技巧| www.886810.com-彩61是正规平台吗| www.961603.com-500彩票网登录| 彩多多www.78949c.com| www.vz24.com-彩02彩票手机版本| www.08vc.com-彩票广东十一选五| www.553762.com-竞彩严明明推荐| www.639385.com-中国禁止网络彩票| www.2765.in-竞彩输破产-| www.43225.com-一定牛买彩票正规吗| www.111163.com-体育彩票站-| www.12618.com-三宝生活体彩屋代理| www.67669.cc-v8彩票合法吗| www.829290.com-9彩娱乐平台登录| www.937272.com-鸿博彩票安卓下载| www.jk73.com-481彩票app-| www.y45.top-昨天福彩中奖人情况| www.49ls.com-汕头三亿体彩得主| www.0521.pw-时时彩婚恋骗局花篮| www.5577.space-老9乐购彩票平台| www.21367.com-今天竞彩足球跟单| www.zt3.cc-湖北福利彩票| www.ww90.com-约彩彩票官网| www.36iv.com-彩票系统平台开发| www.47255.com-宝马彩票集团网址| www.803998.com-足彩胜负彩开奖公告| www.921105.com-彩票查询双色球预测| www.984775.com-体彩大乐透模拟选号| www.aj89.com-七星彩今期-| www.wh12.com-大通彩票手-| www.42bn.com-彩票开奖软件app| www.1899.top-大通彩票网可以信吗| www.00863.com-临沂福彩中心| www.52279.cc-试机号爱乐彩| www.486644.com-足彩对冲是什么意思| www.593494.com-七彩阳光预备节| www.21ve.com-状元彩票网平台| www.2279.vip-3d彩民乐今天| www.03138.cc-彩票讨论微信群| www.261455.com-百盈彩票主页| www.cs40.com-私彩平台正规吗| www.06ib.com-qq买彩票怎么买| www.4742.cn-谁想中彩票-| www.51926.com-体彩排列三72期| www.287888.com-体彩开奖查询历史| www.076626.com-褔彩3d跨度走势图| www.170252.com-上海快三彩票| www.286083.com-360购彩彩票大厅| www.699583.com-好彩客中了50万| www.773662.com-体彩大乐透直播现场| www.16ps.com-鑫彩娱乐下载安装| www.654885.com-润彩气垫防晒bb霜| www.773115.com-天际彩票下载| www.900006.com-重庆时时彩爱彩乐| www.977730.com-豪彩vipapp| www.ld92.com-下载中彩彩票苹果| www.237121.com-今曰竞彩-| www.326642.com-体彩大乐透跨度| www.398402.com-彩票分析计划软件| www.3777.vip-世界杯足彩中奖查询| www.42344.com-118彩票送彩金| www.011184.com-体彩481任选一| www.129940.com-胜负彩即时比分直播| www.243080.com-体彩排列期开奖结果| www.25361.cc-初学彩铅多少色的好| www.83853.cc-跨省可以兑换彩票么| www.113658.com-彩友网4944cc| www.183730.com-快三注册邀请码| www.254785.com-好彩堂幺机王| www.1351.com-vr彩骗局-| www.038740.com-彩票试机号查询全国| www.68ka.com-网易购彩票-| www.3308.in-福利彩票投资赚钱| 500彩票www.3126t.com| www.oq16.com-跟导师买彩票套路|