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.066358.com-七乐彩票大发快3| www.120536.com-彩票投注站多少钱| www.02870.com-彩票二等奖在哪里领| www.911573.com-中乐彩平台-| www.rw60.com-国家开发彩票软件| www.739425.com-福彩复式计算器| www.856257.com-吉林快三怎么玩儿| 818合彩www.www.9889hc.com| www.5169.love-茶光福彩网点查询| www.58686.com-徐文轩福彩3d讲座| www.327144.com-全国联网彩票走势图| www.5824.biz-7彩网下载-| www.671132.com-合肥福利彩票刮刮奖| www.845895.com-中国彩票作弊人员| www.995640.com-竞彩足球5串一神单| www.f10.shop-七乐彩开奖各省中奖| www.1439.net-彩神4邀请码| www.29931.cc-易盈彩票官网| www.260209.com-异地买彩票中奖| www.764268.com-爱彩人彩票网首页| www.324002.com-内蒙体彩app| www.746454.com-福彩双色球专家推荐| www.959352.com-20选5彩票注册| www.ip23.com-500网彩票首页| www.23lk.com-山西体彩中心官网| www.10695.com-500胜负足彩| www.673989.com-古建彩绘博古图案| www.e96.top-体育彩票现场直播| www.2313.win-福彩三地字谜牛材网| www.283291.com-体育彩票一般几位数| www.03867.com-合法的网络彩票| www.91696.cc-春娇与志明好彩烟| www.958976.com-4040彩票-| www.4355.cc-天水福利彩票中心| www.963502.com-怎么做时时彩平台| www.um50.com-合肥福彩中心地址| www.8058.vip-61彩票下载-| www.68671.cc-快三这样挣钱| www.140260.com-幸运时时彩软件下载| www.373226.com-乐彩网175-| www.633951.com-七彩线坊-| www.819502.com-哪里招彩票计划师| www.72lq.com-彩票3b字谜-| www.026915.com-代玩彩票刷佣金被骗| www.203334.com-彩神3app-| www.398909.com-华龙彩票-| www.719735.com-菲律宾彩票网站租用| www.3400.cn-旺彩3d专业平台| www.99538.com-浙江福利彩票7乐彩| www.598295.com-网络彩票报警| www.906596.com-幸运彩票幸运相伴| 彩宝www.177888a.com| www.i37.club-立彩彩票苹果版| www.608.net-台湾五分钟彩走势图| www.9466.top-成都环球中心彩妆| www.055721.com-易博彩票平台网址| www.186054.com-彩种最全的彩票平台| www.325312.com-福彩3d免费谜语| www.500394.com-皇都彩票彩种| www.698400.com-彩票倍投的风险| www.892795.com-125彩票下载| 500彩票www.540377.com| www.d29.com-全民足球彩票app| www.396487.com-福彩中心下班时间| www.57nx.com-玩发彩犯法么| www.700580.com-e彩堂app下载| www.783871.com-苹果手机版彩票| 500彩票www.50064h.com| www.775553.com-香港彩富网| www.079822.com-彩票兑奖规则是| www.223616.com-福彩网是骗局吗| www.408668.com-通鸿网彩票是真是假| www.141015.com-22彩票的真假| www.129270.com-能用的彩票app| www.316312.com-大通彩票下载| www.494813.com-老郑个人展示竞彩| www.546755.com-福彩投注站审批| www.294322.com-8号彩票能提现吗| www.7205.vip-七彩娱乐东川麻将| www.9610.org-彩米-| www.72181.cc-运发彩票-| www.052025.com-租用彩票平台app| www.116083.com-实体店买足球彩票| www.44547.com-彩票刷流水给佣金| www.680030.com-亚彩会登录手机版| www.61103.com-网络销售体育彩票| www.200495.com-熊猫彩票靠谱吗| www.301005.com-糖果派对掉彩金| www.308502.com-6合万彩开奖结果| www.212786.com-彩票平台110| www.319200.com-七星彩下载最新版本| www.407996.com-彩票店有节假日吗| www.522279.com-相年富彩之网| www.653861.com-3d福彩大全-| www.753273.com-d9彩票d9cc| www.929838.com-哪些省份售七星彩| www.992772.com-福彩无人售票机代理| www.39lw.com-七星彩中奖500万| www.389620.com-新郑彩票店转让信息| www.257207.com-重庆时时彩时间改了| www.408297.com-七星彩福星-| www.64rk.com-足彩qq群俱乐部| www.230603.com-快三最高奖金多少| www.327225.com-鸿鑫科技彩票平台| www.409791.com-今天彩票信息| www.509527.com-赤峰彩票中心电话| www.cp6049.com-广东福彩公众号投注| www.ti66.com-助赢彩票软件app| www.34ka.com-七星彩开奖怎么开| www.914.cm-念佛求财中彩票| www.5670.top-快三开奖图-| www.24353.com-彩铅画动物教程| www.617296.com-榆次体育彩票| www.88jm.com-吉祥彩票快三怎么样| www.016364.com-彩票选号k线图| www.772436.com-广西福利彩票中奖| www.yp7.cc-彩神网-| www.43mw.com-彩8争霸-| www.5328.biz-用微信买彩票安全吗| www.9158.org-星空彩票旧版官方| www.954454.com-彩票店双色球二维码| www.ql16.com-福彩在线是正规的吗| www.26214.com-玩快三群-| www.066371.com-黑彩5分钟一期| www.436833.com-意大利彩票有几种| www.592920.com-彩虹电影台app| www.j87.me-快三把我给坑死啦| www.781470.com-u9彩-| www.252225.com-江苏快三投注网站| www.392544.com-厦门福利彩票站点| www.626065.com-彩票白菜网站大全| www.080045.com-8彩票网-| www.298782.com-吉林快三移漏| www.439518.com-助手彩之星-| www.566645.com-凯发彩票官网| www.668277.com-福礼彩票双色球| www.773308.com-网上代玩彩票骗局| www.875032.com-熊猫竞彩无网络| www.hv81.com-河北快三怎么玩稳赚| www.09jq.com-幸运快三稳定版计划| www.303663.com-鑫彩国际是干嘛的| www.508318.com-奥运场馆彩票收藏| www.up76.com-福彩3d新彩网吧| www.751644.com-彩票不能提现| www.233336.cc-全民快三是真是假| www.038243.com-大财神彩票-| www.136592.com-淼鑫彩票网页| www.211965.com-彩客网app下载| www.268503.com-竞彩猫-| www.333902.com-体彩一共多少个数字| www.3827.wang-竞彩足球高手专家| www.17532.cc-彩票店能加盟么| www.55344.com-地方彩种开奖| www.586353.com-老彩83官方下载| www.674268.com-多彩蜜豆-| www.733565.com-全民彩票赚钱吗| www.790899.com-福彩双色球缩水软件| www.866286.com-搜狐彩票是真的吗| www.917900.com-彩虹歌词周杰伦| www.973066.com-彩虹论坛-| www.sk43.com-竞彩比分直播吧| www.05or.com-体彩四码星星遗漏| www.75ae.com-彩票投注网站哪家好| www.352266.com-彩gg网站-|