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.331200.cc-福彩门户资料大全| www.755780.com-好彩网天宇和值谜| www.35825.cc-福彩开业宣传语| www.323207.com-鸿运来彩票官方网站| www.532812.com-彩吧彩报图迷第三版| www.257944.com-皇都彩票是什么平台| www.uf70.com-深圳快乐彩走势图表| www.395390.com-奇门九宫格预测彩票| www.580559.com-买不了世界杯彩票| www.653019.com-澳彩客户端下载| www.100065.com-彩39彩票-| www.3066.tv-今晚六会彩结果果| www.86fa.com-七乐彩近三十期走势| www.7580.vip-87彩店骗人黑幕| www.35904.com-福彩双色球宣传语| www.139198.com-天天彩票助手推荐| www.336549.com-9万彩票安卓版斗牛| www.160230.com-神舟彩票软件下载| www.303392.com-好彩36选7走势图| www.8563.wang-彩票2元网-| www.54881.com-彩博888资料网站| www.053028.com-快三跨度和值组合表| www.877805.com-如何做私彩老板| www.875473.com-高频彩可以玩吗| www.130940.com-江西彩礼会返还吗| www.545532.com-明日安徽快三预测| www.840043.com-中国什么彩票是真的| www.773945.com-彩博888网址| www.262597.com-宝马彩票平台网址| www.14bu.com-谷歌彩票网站首页| www.811197.com-广西快三高手计划群| www.th57.com-今天福彩开奖号| www.36002.com-大福利彩票app| www.209508.com-福彩排列五开奖号码| www.2057.vip-彩神通四码网站| www.aw09.com-3d彩票的玩法| www.7112.in-福彩双色球专家对比| www.657913.com-利博彩票最新| www.799898.com-彩票查询排列三| www.444179.com-彩票中奖领奖| www.5728.online彩票app代理| www.96140.cc-彩票几点钟可以买| www.195811.com-彩种大厅360| www.353018.com-正规快三购彩平台| www.555118.com-中彩神倍投计算器| www.803685.com-19054期彩票| 彩乐汇www.83565.com| www.g89.club-香港6合开彩开奖| www.0276.org-彩票店为什么关门了| www.46093.com-时时彩助手中奖宝典| www.803308.com-第1彩网-| www.956841.com-彩票服务器修改器| www.xc72.com-中国福彩最新政策| www.8669.cn-彩宝贝个位杀号3d| www.022103.com-福利彩票群规则| www.163420.com-巨彩网是合法的吗| www.237184.com-大红鹰彩票-| www.994750.com-竞彩之家-| www.047744.com-江苏体彩网官方网站| www.020614.com-时时彩免费源码| www.002699.cc-彩票娱乐反水| www.431989.com-福彩停止销售时间| www.739399.com-百盈快三结果查询| www.42924.com-中彩网雷台赛| www.932945.com-国民彩票234下载| www.dv28.com-彩吧彩票快三| www.7182.win-宝乐彩票合法吗| www.834293.com-好彩蓝莓爆怎么买| www.551843.com-甘肃快三开奖官网| 易彩网www.36166h.com| www.932028.com-数字彩技巧大全| www.309311.com-南洋彩开奖结果| www.089102.com-彩汪汪彩票安卓版| www.024032.com-六台彩迷宫14| www.437703.com-福彩谜画谜-| www.447056.com-彩票监控开奖提示器| www.669766.com-海南私彩怎么包码| www.917305.com-赢彩彩票骗局| www.ae01.com-福利彩票开开奖结果| www.613218.com-南洋彩今晚开什么| www.356208.com-168彩票投注技巧| www.669722.com-6位数彩票怎么买| www.810923.com-小剧场精彩表演视频| www.02707.com-什么是彩铃-| www.77375.cc-彩票55违法吗| www.677540.com-彩娃彩票可信吗| www.310536.com-甘肃体彩排五| www.190513.com-e球彩玩法-| www.043355.com-推广彩票技巧| www.d00.tv-360七星彩走势图| www.170199.com-江西快三走势图形态| www.320213.com-福彩开奖号今晚| www.383967.com-福利彩票中不了| www.1884.vip-四场进球彩对阵单| www.553535.com-竞彩兰球推荐| www.237527.com-福彩3b字迷-| www.715383.com-四季彩彩票是骗局吗| www.936034.com-福彩乐彩首页| www.049234.com-河北风彩排列5开奖| www.516166.com-尤师彩票-| www.310344.com-山东体彩如何兑奖| www.773051.com-彩坛至尊免费资料| www.52nn.cc-跟大奖快三有技巧| www.30195.com-竞彩完场比分直播| www.110195.com-福利彩票的奥秘| www.22rv.com-湖北七星彩开奖结果| www.5251.net-德州好彩app下载| 500彩票www.501354.com| www.690016.com-看彩啦双色球预测| www.9306.cm-七乐彩顶测-| www.331339.com-彩83下载-| www.35cs.com-礼拜三开什么彩票| www.980436.com-苏州福利彩票加盟| www.137055.com-彩7彩票送彩金| www.851113.com-qq上玩时时彩的群| www.196026.com-七乐彩开奖结果今天| www.06066.cc-258竞彩网首页| www.023021.com-各种彩票玩法说明| www.982807.com-如意彩票网登录| www.15zq.com-返还彩礼需要证据吗| www.06969.cc-好运来彩票网活动| www.709838.com-网络彩票代购合法吗| www.23hw.com-重庆体彩网点电话| www.029184.com-众彩网专家推荐预测| www.mo67.com-滴滴彩票送28| www.70817.com-大众彩票怎么样| www.826771.com-福彩3d藏机诗正版| www.106705.com-福彩亓奖-| www.166150.com-江西快三走势图| www.46444.cc-宁夏好彩快三| www.188969.com-内蒙福利快三| www.813097.com-华彩赢家-| www.99693.cc-腾讯分分彩个位走势| www.255988.com-时时彩龙虎玩法规则| www.x66.vip-彩8娱乐会员登录| 易盈彩票www.7793k.com| www.85631.cc-网络彩票平台排名| www.368711.com-彩票与生活庄子说梦| www.339581.com-博彩对澳门的影响| www.219370.com-彩钢围挡图片| www.736646.com-普陀区体彩中心电话| www.114319.com-福彩3d试机号分析| www.1118.cm-彩票屠龙术-| www.543079.cc-今天福彩3d开奖号| www.331292.com-彩神x登陆-| www.741183.com-福彩胆王-| www.97811.cc-竟彩唯胜素-| www.140504.com-七星彩早版-| www.605032.com-盈盈彩票下载| 亿彩堂www.988068.com| www.yw98.com-中彩在线是什么| www.6663.bid-彩1平台是黑平台呢| www.302821.com-38博白菜博彩论坛| www.659443.com-利彩注册-| www.896736.com-派彩网11选5| www.5888.love-福利彩票1月7号| www.785630.com-四川体彩app| www.8133.cn-各种彩票开奖日| www.79966.com-快三446-| www.098584.com-98双彩网-| www.710399.cc-博彩刷子-| www.842571.com-河南郸城结婚彩礼| www.48495.com-范德彪竞彩猫| www.570235.com-福利彩票cctv|