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.656001.com-王文军买彩票方法| www.11831.cc-话费积分怎么换彩票| www.81562.com-昨晚福彩开奖号码| www.866171.com-搜狐彩票网下载| www.326767.com-彩票几位数如何中奖| www.504466.com-预演和彩排的区别| www.655941.com-顶尖的移动彩票软件| www.904990.com-快三越玩越亏| www.ba12.com-网络快三违法吗| www.698157.com-6十1体育彩票下載| www.805242.com-立博足彩-| www.899283.com-83彩票网站-| www.987114.com-购彩堂官网-| www.eu30.com-手机版彩票助赢| www.305607.com-怎么买彩票中五百万| www.437299.com-陕西彩票中奖的地区| www.633376.com-哪个彩票可以买篮球| www.083178.com-福彩3d组六85注| www.190494.com-e球彩实时开奖结果| www.279604.com-5oo彩票网3-| www.365365.cc-极速赛车彩票怎么玩| www.780202.com-海南七星彩梦码查询| www.867611.com-廉江七星彩高手论坛| www.939296.com-单场足彩胜负彩玩法| www.997322.com-足球彩票软件有哪些| www.as85.com-湖北精彩十分怎么玩| www.tm38.com-黄河3d福彩独胆| www.04qg.com-彩铅需要勾线吗| www.72if.com-全彩漫画之大鲸| www.355257.com-常州体彩兑奖地址| www.166275.com-快三走势图分析预测| www.483295.com-体彩分几种-| www.190113.com-内蒙古时时彩走势| www.852727.com-彩票任三开奖查询| www.802617.com-彩神爷算胆-| www.074329.com-旭彩美缝剂厂家简历| www.927870.com-长条七星彩奖表| 易彩堂www.55885c.com| www.mr32.com-锋彩直播苹果版下载| www.130478.com-彩票站号怎么查地址| www.iy39.com-中国福彩开奖号码| www.172365.com-49彩票app-| www.698223.com-温州体彩申请| www.9581.vip-106在线彩票安卓| www.715258.com-彩票中奖达人杨光华| www.00482.com-体肓彩票试机号| www.20zt.com-彩票的社会影响| www.8355.cn-时时彩单式复式区别| www.54948.com-下app送18彩金| www.345697.com-新的彩票下载| www.cf53.com-万豪彩票安卓版| www.247997.com-大发快三投注软件| www.566002.com-彩虹6号干员说话| www.663857.com-福彩3谜语总汇| www.758188.com-高盛彩票平台坑人| www.838642.com-福彩3d乐彩网专区| www.914193.com-体彩快三下载软件| www.989357.com-乐彩彩票百度| www.sd7.com-代玩彩票兼职群| www.26mj.com-加盟体彩站需多少钱| www.027361.com-纯彩色的图片| www.747707.com-环彩网页版-| www.7775.in-彩霸王资料心水区| www.812082.com-竞彩足彩北单| www.163248.com-彩民村心水宝典资料| www.14387.com-极速快三是官方彩吗| www.420027.com-中博的彩票平台| www.48482.cc-宝马人工计划时时彩| www.706048.com-微信群发送彩金| www.797920.com-易彩娱乐怎么没关| www.947036.com-1分彩网页计划| www.mf85.com-福彩3d新彩网吧图| www.90lo.com-中国体彩怎么开店| www.772436.com-广西福利彩票中奖| www.852905.com-手机版彩6-| www.915055.com-体彩天下安装| www.979490.com-宝宝计划彩票| www.dx7.com-分分快三提前开奖| www.92db.cc-手机赚佣金平台彩票| www.310348.com-手机福彩官网投注| www.04186.com-超级彩票助手全能版| www.32659.cc-重庆结婚要彩礼吗| www.cai6783.com极速快三开奖号码| www.sn39.com-彩票指南报纸图片| www.06ug.com-上期体彩中奖记录| www.16557.cc-福彩四等奖结果| www.984319.com-凤凰网投时时彩平台| www.cf99.com-yy彩票平台登录| www.517712.com-我爱彩票网站| www.600030.cc-梦到鱼的彩票号| www.000416.com-爱彩乐充值-| www.433214.com-齐鲁彩票几点开始| www.541127.com-想做彩票代理| www.185820.com-快三中2个号有奖吗| www.c65.top-百宝彩上海快三下载| www.417452.com-广西福彩票开奖查询| www.077917.com-七星彩排列五奖表| www.5475.me-彩虹世界下载安装| www.004768.com-七乐彩开奖有直播吗| www.022950.com-快三刷流水技巧| www.089841.com-中国体育彩票有哪些| www.888927.com-彩站宝怎么发布跟单| www.7467.cm-彩票店好申请吗| www.29323.com-苹果体彩软件| www.81799.com-网络快三输钱| www.521564.com-时时时彩计划网| www.066313.com-澳门博彩税-| www.32jy.com-3d走势彩吧助手| www.019052.com-福彩双色球苏州| www.052206.com-店之宝彩票-| www.134614.com-好彩香烟绿色价格| www.34644.com-好运快三下载app| www.623071.com-乐享彩票平台登录| www.732838.com-七位数江苏体彩网| www.822222.cc-彩民彩票如何解绑| www.939538.com-江苏快三图表| www.oq.com-苏州快三走势图| www.85732.cc-彩票网页版-| www.126790.com-彩铅画人物古风教程| www.203256.com-安徽彩票快3下载| www.303530.com-甘肃省福利彩票兑奖| www.774232.com-微信五亿彩-| www.872160.com-贵阳彩民中奖| www.959481.com-彩民堂-| www.cai891.cc-人人快三投注平台| www.249924.com-天天彩票77678| www.316263.com-今天上海快三推荐号| www.494757.com-老郑足彩微博| www.586330.com-彩票机器好退吗| www.865302.com-重庆时彩彩稳赚软件| www.937515.com-cp710彩票真假| www.984384.com-甘肃体彩下载软件| www.tz5.cc-江苏快三单双玩法| www.tx37.com-11选五爱乐彩| www.41ge.com-vr3分彩计划| www.463938.com-福彩三b试机号今天| www.848149.com-3d麦久彩票-| www.926530.com-购彩lll邀请码| www.31no.com-博友彩app官网| www.0877.ren-公司年终发彩票| www.7337.cm-彩虹六号–1ms| www.47497.com-乐彩网3d试机号| www.006019.com-中国体育彩票官| www.081259.com-吉林体育彩票官网| www.916041.com-网上买彩票违不违法| www.972194.com-快三在线计划网| 众乐彩票www.305644.com| www.970825.com-安庆彩票头-| www.cai3422.com福彩快三是骗局吗| www.612426.com-彩乐购官方网址| www.669582.com-实名制购彩票的规定| www.127518.com-彩虹世界类似的软件| www.316263.com-今天上海快三推荐号| www.60348.cc-3分快三技巧| www.025427.com-快乐五分彩-| www.0030.wang-啥子彩票八位数| www.7577.cm-足彩外围玩法术语| www.20169.com-彩软计划-| www.56951.com-苹果机怎么下彩6| www.009946.com-网络骰子彩票技巧| www.85722.com-布衣图库好彩网百度| www.213284.com-上海快三预测号码号| www.132547.com-潘多拉8度彩妆| www.055133.com-彩色的梦教案|