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.041374.com-欧洲百万彩票| www.309299.com-生肖彩票网站| www.748198.com-九盛彩票-| www.355883.com-体彩藏机图彩报| www.ru14.com-安徽省福彩-| www.365565.cc-彩铅叠色是什么| www.704404.com-彩票快乐十分怎么玩| www.ja08.com-快三信用玩法| www.713771.com-彩票尺寸多大| www.604943.com-所有赛马结果及派彩| www.731508.com-中国竞彩网电脑版| www.06ss.com-二年级上册彩铅画| www.314.cc-众赢彩票团队李胜| www.835863.com-丰彩中一百万| www.968048.com-民政部福彩中心贪| www.cp4567.cc-河南快三复式玩法| www.zm15.com-上海爱彩乐爱彩乐| www.493081.com-竞彩足球赢千万| www.026196.com-黑彩平台套路| www.130671.com-捷豹彩票365网址| www.223660.com-快购彩票3平台官网| www.ip59.com-竞彩500篮球| www.071628.com-福利彩票站转让费| www.306403.com-彩票咋样才能中奖| www.9626.cn-胜彩高手-| www.151826.com-时彩族人工计划| www.862209.com-体育彩票中奖号| www.946535.com-福建省体彩管理中心| www.997438.com-海南七星彩大公鸡| www.fk50.com-买彩票下载-| www.f39.net-乐彩赢大发快3| www.16848.cc-3d牛彩藏机图总汇| www.523080.com-亚彩联盟app| www.614115.com-大丰彩票网9.9| www.271544.com-中原彩票是真是假| www.295971.com-江苏快三冷号| www.5488.cn-七乐彩3拖8多少钱| www.733011.com-金坛体育彩票中心| www.820928.com-彩钢卷材厂家| www.893857.com-彩61网址-| www.961983.com-贵州体彩七星彩| 大赢家彩票平台www.081502.com| www.93367.cc-快三试机号今天查询| www.855350.com-双彩论坛试机号| www.951592.com-分分快三红彩网| 来运彩票www.9999y.cc| www.01668.com-中国福彩刮刮乐扫码| www.365588.com-七星彩查询开奖结果| www.fj48.com-福彩快三买大小单双| www.082116.com-彩妆连锁加盟| www.781486.com-聚合微彩下载| www.870815.com-彩票投注翻倍计算器| www.955678.com-同学群中彩票| 大赢家彩票网www.544094.com| www.20977.com-二四六免费彩票| www.528323.com-大连竞彩店外兑| www.659704.com-高频彩直播开奖网站| www.770232.com-彩票提款被黑怎么办| 99彩票www.66201.cc| www.971795.com-8号彩票正规吗| www.xk0.cc-彩票棋牌平台| www.rv78.com-福彩3d杀5跨方法| www.39yz.com-彩票包网免开版费| www.623.mobi-体彩五位数-| www.466411.com-福彩七乐彩派奖规则| www.598185.com-福彩复式中奖计算器| www.725874.com-亚上彩合法的吗| www.881623.com-体彩第19018期| www.982442.com-鸿彩网盈利模式| www.vv08.com-福彩北京28-| www.035552.com-彩票在线试玩| www.41299.cc-中彩中彩-| www.111672.com-荷兰三分彩开奖公告| www.710405.com-彩神4app-| www.792858.com-彩票兑大奖流程| www.880507.com-广西体彩11选5看| www.952943.com-竞彩足球胜平负分析| 鼎丰彩票www.cp2838.com| www.057143.com-搜狗彩票走势图大全| www.620036.com-在中国买美国彩票| www.684358.com-中国龙3d福彩| www.751720.com-立彩彩票助手| www.661574.com-竞彩8串16-| www.737062.com-上海福彩中心投注| www.7652.loan-正彩彩票下载安装| www.07924.com-中彩那天词语| www.331260.com-贵州快三计划网页| www.390050.com-福彩3d天中天气网| www.526153.com-时时彩计算豹子| www.607223.com-中彩网怎么支付投注| www.710503.com-鼎隆刷彩是做什么的| www.789819.com-nba篮球竞彩网| www.856751.com-体彩七星彩开奖历史| www.909646.com-大学生qq群买彩票| www.964002.com-彩虹颜色的顺序| 大赢家彩票平台www.257630.com| www.96966.com-竞彩必发盈亏| www.6691.net-彩神vip邀请吧| www.7697.cn-网络彩票犯罪吗| www.616.in-e彩票正规手机版| www.rr78.com-魔方彩票有没有假| www.129093.com-福彩礼拜几开奖| www.224990.com-481彩票网下载| www.954782.com-今日彩票吉数查询| www.t90.cn-博友彩票是骗人的吗| www.233.com-时时彩5星直选计划| www.9237.wang-248彩票软件下载| www.65164.com-世界杯竞彩比分| www.026267.com-如何制作博彩app| www.396933.com-中彩高手万人交流| www.579815.com-三d福利彩票和值表| www.618348.com-体彩11选五冷号| www.771947.com-南国彩票梦册| www.309593.com-陕西福彩网-| www.047124.com-今天3d彩报第一版| www.137789.com-彩客网首网-| www.762208.com-竞彩足球有哪些软件| www.859088.com-上期彩票中奖号码| www.927103.com-红旗彩票多少年了| www.979154.com-内蒙快三怎么猜号码| 通盈彩票www.848566.com| www.431722.com-91彩站联盟官网| www.623019.com-红牛娱乐彩票| www.860264.com-qq彩票下载安卓版| www.970026.com-福彩和双色球区别| www.cai18.cc-快三开奖-| www.527682.com-时时彩10个号全买| www.e39.top-体彩nba分析预测| www.74pg.com-利奥彩票骗局| www.752574.com-彩票猜谜语-| www.469934.com-去国外做彩票犯法吗| www.557735.com-彩票728安卓| www.616738.com-中奖彩票掉了| www.723.win-19028期胜负彩| www.025177.com-58彩票官方下载| www.113470.com-手机微信如何买彩票| www.187568.com-时时彩9码漏洞| www.587091.com-鴻彩彩票-| www.680896.com-买彩倾家-| www.780839.com-排列五奇偶走势图彩| www.872214.com-彩票网826诈骗| www.355884.cc-桂快三开奖-| www.431311.com-49gcc特彩-| www.175216.com-彩神8官网合法吗| www.6531.biz-中国快三走势图| www.0774.me-河北体彩时时彩| www.404783.com-开门彩预测咨讯| www.526085.com-王者彩票网是真是假| www.671277.com-快乐彩怎么预测和| www.739774.com-凤凰快三-| www.799375.com-葡京送彩金-| www.868298.com-网上8亿彩是骗局吗| www.660067.com-广东福彩官方网| www.853608.com-天津新宇彩板怎么样| www.923819.com-秒速时时彩开奖规律| www.971596.com-快捷彩票网址| www.cp3565.com-梦想彩票网址| www.ru63.com-55彩票官方网| www.20lq.com-宝彩票-| www.424212.com-星彩虎论坛-| www.630466.com-就业肘报3d天天彩| www.733879.com-正规的时时彩有哪些| www.825957.com-彩王争霸平台| www.923797.com-秒速快三下载|