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天

知道了
1分快三 www.144201.com-北京皇冠竞彩违法不| www.689676.com-500彩票网竞彩| www.801561.com-彩运宝合法吗| www.889084.com-大华彩票app| www.8972.com-国彩在线是骗局吗| www.8167.org-顶级会员彩票登陆| www.22921.cc-福彩3d是不是假的| www.269069.com-933c3彩票网| www.495171.com-彩漂能洗黑衣服么| www.740606.com-幸运28彩下载| www.970883.com-福利彩票考试| www.604154.com-手机cc彩球网官网| www.774473.com-水彩画-| www.971547.com-福彩概率奥秘图| www.dv00.com-福彩自助彩票机加盟| www.129482.com-众彩娱乐彩票| www.060021.com-最新彩票走势图| www.326585.com-古建彩绘谱子| www.523703.com-最有信誉彩票平台| www.639774.com-彩票牛牛玩法介绍| www.763525.com-廊坊快三彩票开奖| www.883403.com-彩王彩票网-| www.956970.com-k百彩网-| 500万彩票www.96386v.com| www.mq59.com-彩票规律的计算方法| www.37uq.com-七星彩这个软件| www.779458.com-600万彩票网登录| www.915266.com-博盈彩票导航站| www.19zn.com-创名彩票有人带玩吗| www.548431.com-彩票预测准不准| www.8154.vip-上海快三加奖公告| www.48312.com-竞彩足球手机彩票| www.sy77.com-彩票都有什么种类| www.836710.com-陕西体彩官网| www.920983.com-数字专家破解博彩| www.cp986.cc-中国快三网官网| www.rr80.com-什么彩票稳赚不赔| www.14kz.com-掌中彩登录-| www.649.bid-哪个平台有圣地彩| www.025504.com-网络彩票能挣钱吗| www.123970.com-体育彩排列三开奖号| www.65ci.com-新浪分分彩计划数据| www.063304.com-加盟体彩要多少钱| www.693437.com-244彩票网-| www.802738.com-全中彩票-| www.878762.com-福彩积分卡兑换| www.947687.com-贵州体彩兑奖流程| www.994523.com-时时彩自动投注机器| www.cm80.com-快三助手苹果| www.093080.com-彩钢围挡压瓦机| www.266979.com-汪苏e球彩-| www.379196.com-购买世界杯足球彩票| www.ep69.com-炫乐彩票网址| www.7vm.com-联合买彩票-| www.74ef.com-彩票预测计划软件| www.2166.com-下彩网可以提现吗| www.9808.space-南京市体彩中心| www.693065.com-短信购买福利彩票| www.855660.com-快三平台是什么意思| www.940317.com-我的彩票登陆头彩| 大赢家彩票平台www.763227.com| www.943532.com-易盈彩票正规吗| www.ff88.cc-彩票开奖查洵公吿| www.22069.com-时时彩如何长期盈利| www.007960.com-七乐彩中奖表| www.pp24.com-爱彩乐官方网站官网| www.117.site-体育彩票几天过期| www.329653.com-3d彩涂字谜-| www.969988.com-双彩网网址导航| www.012467.com-彩票网站制作多少钱| www.152008.com-全民彩票网官网| www.a13.cn-彩票破解计算| www.sb84.com-福彩快乐12走势图| www.22657.com-cp彩票官网-| www.017328.com-福彩3d两元走势图| www.828137.com-吉彩宝-| www.948364.cc-福彩文化-| 新盈彩www.xinyc2.com| www.h89.top-鸿鑫科技彩票平台| www.96rn.com-万豪国际彩票网址| www.7277.com-幼儿绘画彩虹| www.860139.com-手机上的时时彩票| www.9753.net-排列三和值彩宝网| www.57181.cc-彩8下载ios-| www.761428.com-好彩妹什么意思| www.966832.com-3d专家疯狂彩迷| www.039751.com-华彩彩票可信么| www.269056.com-98彩票网输钱| www.533914.com-明发彩票mfa| www.2880.win-快三彩票内蒙| www.261805.com-腾讯快三计划师| www.293389.com-彩票软件制作排行榜| www.90599.com-彩票还是自选的好| www.515966.com-足彩大神跟单| www.660843.com-陕西十一选五彩票| www.785051.com-七星彩日历直码| www.930223.com-快三豹子三后出什么| www.co34.com-温州快三综合走势图| www.09ue.com-体彩大乐透几点封盘| www.959005.com-彩民版app靠谱吗| 金掌柜www.83993g.com| www.53926.cc-3d彩票组选多少钱| www.703087.com-旺旺年彩票-| www.8wz.cc-彩360官方彩票网| www.wh87.com-彩票曲线图怎么看| www.238041.com-福利彩票下载安装| www.831506.com-竞彩新政看法| www.9931.net-福彩3d天宇和值谜| www.769976.com-彩票线上购买| www.894520.com-彩票理财是真的吗| www.952391.com-英国三分彩-| www.992159.com-快三改规则-| www.nz87.com-宁夏快三今日开奖| www.34761.com-福利彩票了3d图纸| www.777044.com-彩宝宝手机版| www.cai4222.com内蒙古快三购买| www.079960.com-福利彩票中奖好嘛| www.383311.com-天津体彩下载软件| www.34sy.com-七星彩论坛南国| www.240641.com-福彩3d彩票贴吧| www.150211.com-彩票机器全套多少钱| www.595288.com-福彩3d泓铄制作图| www.7208.vip-宝乐彩票快三| www.86232.com-体育彩票手机助手| www.765956.com-十分彩开奖结果| www.898186.com-重庆时彩刷返点方法| www.9000.shop-数字彩票直通车| www.051316.com-福彩3d投注站| www.180124.com-北京快三遗漏值| www.328674.com-彩之网下载-| www.530565.com-彩票737欢迎您| www.675150.com-足彩胜负彩中奖心得| www.885650.com-内蒙快三奖金规则| www.998024.com-体育彩票365| www.90br.com-博彩滚球平台| www.4114.net-购买海南七星彩源码| www.22329.cc-万豪福彩正规吗| www.78663.cc-乐彩论坛净台版| www.050023.com-黑彩3d中奖规则| www.545917.com-福彩投注站申请电话| www.815680.com-ak彩票骗局全过程| www.961603.com-500彩票网登录| www.bx54.com-最新彩票平台| www.2bo.com-手机要不要贴彩膜| www.6868.gg-浙江飞鱼体彩| www.031932.com-下彩网是黑庄吗| www.174000.com-快三app哪个好用| www.291961.com-北京基诺彩-| www.643567.com-天下彩开奖结果表| www.939892.com-重庆市福彩-| www.ct19.com-黑彩平台排行榜| www.08nl.com-合买彩票中奖案例| www.405449.com-赢家彩票网-| www.788000.com-亚博体育竞彩下载| www.881932.com-8号彩票兼职真的吗| 500彩票网www.97655k.com| www.392285.com-优优彩票网-| www.724760.com-cc彩球c红财神| www.272.pw-美国加州彩票网站| www.86756.cc-福彩牛彩图谜汇总九| www.101312.com-天天福彩官网| www.210206.com-吉林快三我输50万| www.298882.com-中国手机福利彩票网| www.434434.com-彩39网站靠谱吗|