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.504966.com-提前彩排的重要性| www.823100.com-彩票缩水软件是什么| www.945580.com-上海快三百科| 彩多多www.78949u.com| www.149865.com-掌中娱乐彩票| 杏彩www.00840l.com| www.092225.com-福彩全部图标| www.781249.com-微彩社交app| www.889195.com-易彩快投注-| www.7882.org-体彩大乐透开奖视频| www.48081.com-彩之家怎么注册| www.439055.com-福彩36o全国开奖| www.764122.com-为什么禁止网彩| www.691616.com-彩乐乐打不开网| www.541996.com-亚洲彩票能赚钱吗| www.719725.com-手机快3福彩| www.819482.com-刘海柱买彩票电影| www.902510.com-pk彩吧下载-| www.990240.com-湖北快三能玩吗| www.al76.com-7星彩近500期| www.ug44.com-输入彩票号自动查询| www.278723.com-快三机选一注| www.810615.com-彩尊时时彩登录平台| www.898436.com-福利彩票32期开奖| www.981561.com-体彩七星彩奖结果查| www.ll83.com-今日彩票app下载| www.9199.tv-航天彩虹股票牛叉| www.831110.com-三分幸运快三技巧| www.931855.com-彩票中1亿交多少税| 博乐彩票www.622207.com| www.911.name-怎样用巫术买彩票| www.95be.com-18117老牛足彩| www.ew88.com-快三输了几万块钱| www.6ho.com-好运来分分彩软件| www.299.pink-足彩跟单app| www.404000.cc-大乐透彩神人| www.530023.com-台湾时时彩免费计划| www.609397.com-彩票买3注多少钱| www.680034.com-大乐透彩票二元网| www.yk87.com-贵阳福彩官方网| www.29zd.com-全民彩票代理邀请码| www.0561.win-彩吧谜图第一版| www.28711.cc-599彩票ios-| www.254405.com-云南彩票快乐10| www.886390.com-登陆好运来彩票| www.994836.com-兼职彩票是真的吗| www.254357.com-爱乐彩十一选五| www.340400.com-玄武彩票下载| www.020815.com-php彩票源码| www.132471.com-彩妆店加盟连锁| www.157812.com-足彩胜平负公式计算| www.274682.com-分分彩互刷方案| www.707448.com-今日足彩推荐网易| www.784401.com-网络售彩是否合法| www.859339.com-福彩三d选号高技术| www.924622.com-傲赢彩票安卓版| www.14cd.com-七星彩海直播| www.8210.tv-澳门彩票下载安装| www.22914.com-福彩3d心太黑了| www.026702.com-q彩网8位邀请码| www.007800.com-全民彩票手机版| www.530993.com-彩票平台源码怎么样| www.41406.com-天天乐购彩票平台| www.2029.date-香港好彩堂资料单双| www.308623.com-新彩彩票计划| www.845649.com-订婚彩礼钱女方不退| www.271569.com-广东福彩26选5| www.375501.com-睛彩宁夏-| www.489862.com-时时彩代理加盟官网| www.583176.com-彩色简笔画人物| www.888229.com-爱彩乐骗局-| www.069.org-七星彩一个号有奖吗| www.9748.vip-大乐透在线彩宝网| www.53854.com-多彩贵州酒店| www.002444.com-七星彩走势图表最全| www.111976.com-fatego彩圈-| www.188563.cc-爱彩乐官网平台首页| www.063806.com-湖北彩票官方网站| www.172113.com-快三自创绝密技巧| www.012860.com-时时中彩票登录入口| www.127731.com-足球彩票腰折怎么算| www.197840.com-体育彩票开奖公告| www.259044.com-快三单双最多连几期| www.329591.com-深圳市福彩官方网站| www.423832.com-三国有星彩这个人吗| www.620442.com-美国加利福尼亚彩票| www.248989.com-大赢家—购彩大厅| www.418943.com-彩票买5个数的| www.518410.com-赢彩网手机版下载| www.579043.com-赢彩票是不是真的| www.639650.com-竞彩销售管理细则| www.718215.com-吉祥彩票是骗人的吗| www.781942.com-彩票黑彩网址| www.878697.cc-体育彩票大乐透杀球| www.939701.com-重庆时时彩开奖走势| www.999375.com-不买足彩-| www.tz1.com-36o彩票-| www.cp712.com-网络快三能不能玩| www.632339.com-时时彩怎么玩稳赚| www.ab59.com-快三买豹子技巧| www.sh07.com-彩乐乐网站可靠吗| www.03vt.com-彩天地靠谱吗| www.008891.com-腾讯3d彩票开奖| www.jf24.com-下载手机买彩票软件| www.45188.com-福彩刷单-| www.88681.cc-梦见自己中彩票了| www.023834.com-r8国际彩票网站| www.112327.com-彩票注册送99| www.182382.com-河南福彩快3彩票| www.278722.com-如何戒掉彩票瘾| www.362987.com-彩票真实的吗| www.460020.com-彩帝包肖大论坛| www.555146.com-全民彩票苹果版下载| www.615150.com-央视报道彩票新闻| www.679589.com-人人中彩下载| www.773187.com-竞彩精灵-| www.835079.com-红好彩香烟缅甸版| www.904018.com-u9彩票下载安装| www.966156.com-福利彩票新排列五| 500万彩票www.96386a.com| www.hx66.com-快三的投注技巧教程| www.0423.site-体彩481走势| www.088917.com-快三买和值中奖金额| www.167274.com-江苏快三是不是骗局| www.296530.com-体彩e球彩规则| www.789215.com-澳洲5分彩计划软件| www.899783.com-83彩票官网下载| www.991867.com-时时彩定胆位方法| www.ey88.com-牛蛙彩票四不像图准| www.553.live-易购娱乐时时彩平台| www.143.cm-夸人颜值的彩虹屁| www.52832.com-福建好彩头官网| www.127440.com-999彩票登录| www.810590.com-彩票软件彩票集团| www.141262.com-七星彩论坛2027| www.sm96.cc-足彩竞猜网-| www.137167.com-体育彩票世界杯奖金| www.329182.com-七星彩开奖808| www.671258.com-万彩动画大师安卓版| www.786395.com-彩票大赢家骗局| www.66.cn-爱投彩票怎么样| www.02638.com-登录亚彩99| www.059103.com-足彩即时比分500| www.948121.com-彩票到底能不能中奖| www.re9.com-吉林快三什么意思| www.42578.com-体育彩票几点停售| www.118640.com-辽宁体彩十一选5| www.895654.com-彩票合买大厅发起人| www.bp50.com-瑞彩祥云app| www.cp2.live-精彩十分玩法奖金表| www.798.website大六壬测彩票绝招| www.730221.com-黑龙江福彩大家乐| www.19539.cc-浙江省福彩网| www.739553.com-下载人人中彩票安装| www.010107.com-分分彩定位胆口诀| www.62200.com-8848彩票app| www.919564.com-彩票十大人物| www.662915.com-彩店宝彩票怎么样| www.964650.com-七星彩周公解梦数字| www.ch38.com-福彩3d系统出租| www.786293.com-大赢家彩票主页| www.2015.name-和彩日本料理| www.173663.com-江苏快三开奖走势| www.355113.com-万彩吧3d字谜总汇|