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.865835.com-彩票娱乐台子| www.668688.com-华人彩注册-登录| www.666716.com-乐彩充值提现不了| www.765258.com-基诺型彩票三分彩| www.986858.com-福建即乐彩中奖规则| www.970048.com-福彩刮刮彩-| www.o18.org-看彩啦3d今天| www.678159.com-微信北京快三走势图| www.914967.com-幸运五星彩开奖奖表| www.j42.me-武汉彩民中1.7亿| www.589736.com-足彩19039凯利| www.bc07.com-多乐彩票是真的吗| www.52yp.com-被91彩站联盟骗了| www.7224.biz-彩虹4无人机实战| www.70735.com-安徽快三开好规律| www.067941.com-快三概率分析软件| www.982747.com-快三和值9的号码| www.869700.com-彩票开奖查询软件| www.cai3904.com安徽快三预测| www.0721.com-彩票跟单收佣金兼职| www.38513.cc-彩票提现到支付宝| www.021655.com-熊猫竞彩ios| www.36xi.com-好彩客无法提现| www.362126.com-描写雨后彩虹的诗句| www.6844.cm-3d彩报图谜第五版| www.1998.love-福彩出的什么号码| www.32981.cc-苏州市体彩兑奖中心| www.85396.cc-湖北快三早知道| www.092683.com-河南永城送彩礼风俗| www.156104.com-好彩客最新版本苹果| www.223775.com-重庆体育彩票官网| www.299346.com-幸运分分彩-| www.358374.com-广东体彩官方网| www.471455.com-利泊彩票网站| www.56lh.com-哪里可以网上购彩| www.885.mobi-彩票数学公式| www.9316.com-吉祥颜彩和凤凰颜彩| www.33344.cc-山东烟台快三| www.0571.date-播彩老头-| www.006636.com-彩票奖金二等奖| www.086601.com-爱刮刮的彩票成本| www.304998.com-七星彩号码-| www.54wg.com-全乐彩会员登录| www.95ey.com-口袋彩店最新版本| www.650715.com-动物总动员彩票| www.cai608.com-快三助手推荐号| www.10155.cc-幸运彩票网七乐彩| www.758885.com-彩宝贝3d试机号| www.1440.me-菲律宾网络博彩| www.77026.com-买彩票中奖感言| www.035071.com-谁有彩票2倍率的网| www.yp3.cc-彩票怎么看号码| www.nv33.com-吉林福彩快三发图表| www.4fx.com-加拿大中彩票| www.44rj.com-分分彩网站源码| www.99bb.cc-网上彩票大小能玩么| www.3232.tv-乐彩网000-| www.8153.cm-体育博彩qq群| www.23654.com-北京时时彩结果查询| www.63137.com-2019年彩礼标语| www.010345.com-华聚彩票-| www.063833.com-在网上买彩票违法吗| www.205507.com-福彩喜乐彩开奖结果| www.163922.com-足彩容错怎么算| www.258073.com-彩票大赢家手机版| www.470865.com-欧洲足彩app| www.753215.com-福彩跑马的叫什么| www.812004.com-中国福彩造假事件| www.872824.com-遵义彩票中奖双色球| www.984108.com-99cc赢彩彩票| 天下彩www.983480.com| www.gn08.com-三分快三技巧套路| www.tm76.com-玩彩老头独胆| www.z54.net-彩神8iv-| www.79kr.com-彩名堂快三聊天室| www.1121.tv-竞彩半全场玩法| www.4797.biz-彩虹六号下载慢| www.8618.me-彩电视-| www.709020.com-彩票官方公告| www.789434.com-三弟彩票图-| www.863743.com-app132彩票-| www.4rj.com-什么是彩票-| www.76iy.com-七乐彩胆码预测高手| www.6251.top-彩票人为控制| www.13598.cc-足彩奖金计算器软件| www.40196.com-人人中彩票下载官网| www.68592.cc-竞彩江苏店-| www.801942.com-彩票未成年代领| www.356367.cc-买彩票花了上百万| www.501859.com-深圳开彩传媒靠谱吗| www.641516.com-体彩logo含义| www.783663.com-互联网售彩开放| www.861820.com-快三如何推算合值| www.984360.com-彩8com-| www.bx76.com-彩票长龙最长有多少| www.xy91.com-关于彩票的调侃段子| www.096166.com-体彩公益金管理办法| www.059735.com-吉林体彩中心地址| www.230405.com-青海百宝彩票快3| www.329111.com-体彩排三藏机图| www.422499.com-下载新浪彩票app| www.636982.com-分分彩做号手机版| www.942891.com-湖北快三预测推荐表| 九五彩票www.95999w.com| www.69572.com-九九购十分彩| www.323726.com-彩票开奖查询走势图| www.456376.com-红彩直播盒子哪个好| www.559125.com-火红彩票网官网| www.668891.com-美国买彩票-| www.762597.com-时时彩彩票计划| www.848535.com-完美彩票平台| www.920078.com-澳门彩票登录| 彩客网www.ck8199.com| www.284988.com-彩票跨度-| www.935338.com-pk彩票ios-| www.970970.com-彩16ios-| 818合彩www.288hc.com| www.wz8.cc-老彩民高手论| www.nq79.com-时时彩手机开奖软件| www.04gt.com-彩票中奖方法| www.58ba.com-uu快三怎么下载| www.1774.vip-快三计划软件免费| www.9086.cm-北京pk10赢彩王| www.51379.cc-彩世界微信娱乐系统| www.725317.com-彩票不是赌博吗| www.785303.com-最新七星彩开奖图表| www.987318.com-休闲快三慢动作分解| www.bl30.com-有人玩神州彩票吗| www.yf99.com-机选七星彩号码| www.082429.com-内蒙快三二同号遗漏| www.234179.com-168彩票app-| www.345809.com-福彩布衣天下| www.475989.com-北控国彩是什么彩票| www.583159.com-全彩色漫画-| www.920261.com-信博彩票平台可靠吗| www.979476.com-彩金多少钱一克| www.fm22.com-500彩票电脑版| www.657394.com-超级七星彩规律表| www.hh74.com-多彩网三地太湖| www.225216.com-福建福彩快3规则| www.328780.com-博彩免费彩金| www.400866.com-七星彩有试机号码| www.153786.com-新疆福彩喜乐彩| www.354432.com-天天爱彩票密码找回| www.496909.com-海南体彩缩水软件| www.580156.com-买彩票免费领彩金| www.662059.com-头头竞技博彩| www.008079.com-体彩体彩排列五开奖| www.104949.com-欧盟好彩柠檬| www.754828.com-江西福彩中奖规则| www.858755.com-体彩排列三遗漏号码| www.8ds.cc-体彩排列3中奖规则| www.026751.com-福利彩票刷流水单| www.100034.com-e乐彩票-| www.183459.com-体彩网上可以买吗| www.313656.com-体育彩票飞鱼漏洞| www.615308.com-时时彩搭建开发公司| www.721373.com-怎样破解彩票平台| www.833778.com-日免软好彩-| www.911862.com-天天彩选3开奖公告| www.978674.com-搜索福利彩票3g| www.299853.com-体彩屋靠谱吗| www.827.cc-时时彩振幅分析| www.hw70.com-福彩3d容错过滤|