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天

知道了
大发快3 www.07qr.com-3d图谜字谜乐彩网| www.984803.com-8v彩票app-| www.800038.cc-体彩大乐透计算公式| www.974279.com-520彩票app-| www.na71.com-微彩吧app是什么| www.3549.xyz-中国体育彩票7位数| www.689933.com-5分彩计划平台| www.882704.com-福建体彩一官网站| www.42508.com-网络彩票坑死了| www.694599.com-篮球彩开奖结果| www.921164.com-彩票走势图表格下载| www.24fi.com-手机后壳彩膜怎么做| www.4638.com-买彩票是真的吗| www.966805.com-福彩双色球顺口溜| www.868410.com-快彩乐快3-| 天下彩www.450568.com| www.7978.net-彩博会-| www.903725.com-9万彩票安装到手机| www.811530.com-新昌县双彩乡后谢村| www.960939.com-新起点彩票-| www.yb82.com-天津福彩开奖结果| www.96pn.com-如何买彩-| www.9809.online江西七星彩中奖| www.98919.cc-出生日期怎么买彩票| www.160650.com-体育竞彩胜平负| www.8177.tv-福彩3d蓝精灵彩报| 九九集团www.99jtj.com| www.712025.com-齐鲁风采七乐彩软件| www.952924.com-大发时时彩是假的| www.km07.com-彩宝福彩3d-| www.7666.pro-收购中奖彩票被调| www.32985.com-金坛体育彩票中心| www.870442.com-最新网易彩票下载| www.tv71.com-福彩网合买骗局| www.326761.com-桂快3彩票分析计划| www.148884.com-乐米彩票是小米吗| www.77rw.com-彩票七天乐靠谱么| www.6782.vip-幸运彩票怎么赢钱| www.7755.biz-法贝热彩蛋有多少枚| www.621971.com-天天大奖彩票站| www.770909.com-时时彩的图片| www.948137.com-福彩神牛预测| www.c3.la-安徽省快三开奖今| www.63qv.com-h5彩票搭建-| www.745727.com-中彩彩票万人牛牛| www.773025.com-最新彩票送彩金平台| www.901407.com-彩票计算方法| www.7823.top-竞彩对冲二串一理论| www.675042.com-汇丰彩票手机app| www.9818.pw-福彩149期结果| www.234656.com-3d彩票图迷-| www.533432.com-彩票玩法-| www.646842.com-彩票高人谈彩票| www.980988.com-七彩图片-| www.764167.com-投彩网app下载| www.44js.com-安徽快三28期| www.673728.com-古建筑彩绘颜料| www.77gm.cc-零零时时彩收费版| www.63yr.com-双色球精彩十分| www.22752.cc-大众商家彩票新快三| www.062571.com-广西快三全天计划| www.074730.com-彩富网资料-| www.191737.com-三分快三app| www.175789.com-北京官方快三助手| www.022411.com-vr时时彩-| www.26301.com-福彩排列5开奖公告| www.166529.com-安徽体彩11选5| www.357996.com-数学家破解彩票规律| www.4038.cc-香港马会澳门竞彩| www.73876.cc-如何网上买体彩| www.61342.com-够力七星彩所有版本| www.632221.com-融彩网怎么样| www.814855.com-恒大彩票会吞钱吗| www.966756.com-宝马彩票案焦点访谈| www.9oa.com-微博彩票游戏二维码| www.360808.com-彩票计划导师套路| www.636192.com-彩虹六号机票多少钱| www.qp84.cc-pc彩票是啥意思| www.267838.com-时时彩一期必中计划| www.05576.com-义乌福彩兑奖地址| www.6089.me-彩票人工计划原理| www.95637.com-桃子足彩新浪博客| www.98115.cc-19055期足彩| www.568624.com-约彩彩票·apk| www.765734.com-中博系统彩票平台| www.904084.com-福彩机选号码| www.1476.vip-私彩多少金额算违法| www.rt5.com-快开彩票平台| www.7jn.com-生日礼物送彩票| www.cai79.cc-甘肃快三今日预测| www.560.cm-老时时彩龙虎和计划| www.070955.com-河南那边彩礼多少钱| www.159404.com-湖北快三一定牛下载| www.249009.com-中奖彩票苹果版| www.324387.com-中乐彩提现-| www.cp8484.com-湖北福彩快三一定牛| www.010660.com-搜狐彩票是真的吗| www.645322.com-珐琅彩价格-| www.427928.com-体彩三的走势图| www.578997.com-360彩票全国开| www.058664.com-云购彩票app| www.159376.com-中彩网上海快3| www.251676.com-01彩票平台合法吗| www.341090.com-4字彩票用语| www.414853.com-江苏快三全天82期| www.506178.com-台湾时时彩官网开奖| www.29944.cc-彩霸王心水论淡| www.000316.com-温州体育彩票网点| www.972064.com-全国体彩22选5| www.815080.com-军人中了彩票| www.768383.com-幸运中彩票安卓版| www.969632.com-音乐精彩汇-| www.o79.in-玩彩票wcpcc| www.410.red-网彩何时能开售| www.991470.com-海南七星彩预测图规| www.ga30.com-迷彩兔官网-| www.55ql.com-福彩作假案-| 融彩网www.rcw321.com| www.sr18.com-新浪彩票数字双色球| www.35556.cc-高频时时彩平台| www.70py.com-排列三双彩网三句话| www.666375.com-乐彩网是骗局| www.28185.com-东彩娱乐可靠吗| www.021817.com-998彩票-| www.323182.com-大玩家彩票登录网站| www.056190.com-嘉定彩票中奖| www.961142.com-时时彩人工计划软件| www.726632.com-鸿利彩票网址| www.869217.com-彩票密码解密中奖号| 中华彩票www.9149f.com| www.867275.com-福利彩票双色球| www.918437.com-2345彩票网破解| www.966056.com-福彩快三是不是假的| 新盈彩www.xinyc5.com| www.zz27.cc-太原体彩店如何申请| www.1874.cc-彩票销售平台有哪些| www.go31.com-河南订婚可以退彩礼| www.56951.cc-江西11选5彩票| www.397247.com-福利七星彩28期| www.an6.com-河北快三跨度和值表| www.83eq.com-天下彩正版权威资料| www.8268.bid-彩之源是骗人的吗| www.0707.win-彩票对刷流水技巧| www.os4.cc-19035期体彩| www.744639.com-暗网彩票如何加入| www.mv12.com-手机中彩网靠谱吗| www.11rs.com-搭建一彩票网站费用| www.761544.com-我要体彩的开奖号码| www.76zy.com-即开型彩票怎么兑奖| www.289722.com-彩票黑平台曝光网| www.954960.com-排列三破解彩票漏洞| 体彩网www.3890v.com| www.bx30.com-十分彩app-| www.36565.cc-澳门彩票网-| www.31255.cc-鸿鑫时时彩骗局揭秘| www.82318.com-网络彩票都是骗局吗| www.89935.cc-足球精彩网站| www.77040.com-体彩任九场胜负| www.029175.com-三宝生活彩票| www.9518.vip-海南私彩中奖会跑吗| www.54276.com-中国福利彩票图标| www.507182.com-手机时时彩开奖规律| www.576431.com-福利彩票倍数001| www.654921.com-麒麟彩票app下载|