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天

知道了
9彩注册 www.794653.cc-3d之家彩票-| www.959389.com-彩票大本营彩民村| www.cp3577.com-快三怎样追豹子| www.336047.com-惠泽了优彩社区| www.507404.com-传奇彩欢迎您| www.603823.com-足彩加老版本| www.696176.com-3cp上彩票平台| www.789615.com-竞彩输钱害人| www.872462.com-广东体彩app下载| www.cai2644.com时时彩96-| www.mk67.com-中国竞彩足球app| www.3284.net-体彩顶呱呱品牌口号| www.01264.com-3d彩票预测图片| www.xg09.com-快彩快三app| www.64ol.com-彩票代买app| www.2101.vip-广东省福利彩票| www.8959.top-更多精彩点此进入| www.38655.cc-彩运宝下载-| www.94816.com-足彩概率公式| www.868132.com-特区体彩论坛首页| 凤凰彩票www.66652a.com| www.023211.com-福彩10选8骗局| www.386757.com-福彩快3历史号码| www.639652.com-快三网投下载| www.973140.com-真正的彩虹-| www.22074.com-彩票预算软件排行榜| www.79768.com-宁夏体彩有中奖的吗| www.050906.com-福彩快三青海走势图| www.164769.com-安徽体彩七位数开奖| www.322355.com-职业彩票高手怎么玩| www.412727.com-福利彩票19032| www.531215.com-时时彩计划交流群q| www.686133.com-福彩3d宗合走势图| www.770467.com-排列三彩涂二版| www.886632.com-体彩七星彩综合走势| www.973761.com-一分快三ios下载| www.si0.cc-彩票开奖双色球玩法| www.uy61.com-福彩太湖字谜| www.47ud.com-彩铃歌曲排行榜| www.1885.me-广西体彩兑奖方式| www.8574.vip-易彩首页-| www.53799.com-五分快三的软件挂| www.008654.com-众彩网双色球预测| www.091070.com-博众时时彩软件好吗| www.174899.com-贵州福彩地此| www.260476.com-福彩是不是赌博| www.341883.com-诺亚时时彩老客户端| www.434970.com-江西福彩投注助手| www.535466.com-世界杯购彩网万博| www.616308.com-体彩365官方下载| www.706634.com-福利彩票天天开奖| www.794242.com-微信好友让我玩彩票| www.877713.com-做网络私彩罪| www.c3.tv-安徽福彩快三直播| www.ph08.com-快三最新邀请码| www.07qv.com-彩铅动漫古风图片| www.19uh.com-实体店买彩票双色球| www.dd67.com-彩票店是亚盘么| www.200.bid-盈彩的意思是什么| www.4970.in-五分彩官网登录| www.05993.com-实体彩票-| www.54849.com-探探里带你买彩票| www.022361.com-时时采彩预测个位胆| www.134605.com-南通体育彩票中心| www.252315.com-安徽快三走基本走势| www.383089.com-大智慧彩票图表| www.cai9995.com分分快三-| www.wi18.com-今日彩票开奖结杲| www.35jr.com-彩47是官方网站吗| www.97809.com-篮球直播唯彩| www.82kl.com-足彩半场能交易吗| www.774693.com-七乐彩复式机选| www.xk61.com-虎扑足彩讨论区| www.63gs.com-海南体彩论坛规律| www.3879.xyz-苏宁彩票网-| www.9669.me-彩乐园app1-| www.634389.com-建盏七彩光原理| www.807879.com-玩彩票被骗6000| www.912083.com-千禧排三家彩网| www.997524.com-182彩票-| www.fx26.com-彩票群名-| www.w71.net-上海快三手机版网| www.83fe.com-最新网站注册送彩金| www.4332.biz-彩票算法规律| www.16600.com-彩票彩客电脑版网页| www.331093.com-香港马会彩神网| www.492029.com-玖玖彩票网是真的吗| www.593799.com-甘肃快三走势带连线| www.675982.com-彩票3d规律图| www.751056.com-c8·cn彩票-| www.829782.com-大师算彩票-| www.897100.com-中发彩票-| www.962128.com-江西福彩助手ios| E彩堂www.43818d.com| www.ig69.com-福彩天吉网彩票论坛| www.j93.me-河南体彩网开奖公告| www.46av.cc-风落中彩大乐透预测| www.825.red-好彩官网-| www.144050.com-竞彩中奖奖金计算器| www.287990.com-手机彩票合买软件| www.393341.com-福彩三胆图-| www.742366.com-好运来彩票在线| www.817950.com-足彩19024对阵| www.900389.com-淘彩票软件-| www.966532.com-有玩01彩票的吗| www.229333.cc-易彩彩票是诈骗| www.329230.com-皇马战绩500彩票| www.452342.com-太原彩票中心在哪| www.583032.com-买彩app-| www.666316.com-够力匕星彩票奖表| www.751814.com-买世界杯彩票哪个好| www.837027.com-买竞彩篮球就是赌博| www.915611.com-腾讯分分彩看盘技巧| 彩民网www.caim5.com| www.709258.com-分分彩有赢钱的么| www.831832.com-海南七星彩预测直码| www.926963.com-江西福彩双色球查询| www.i15.club-今天彩票的开奖号码| www.418491.com-彩漂的作用使用方法| www.591283.com-中央批复三亚博彩| www.678714.com-米兜彩票公司| www.93cf.com-幸运彩跑马投注技巧| www.5155.pw-福彩3d总汇全图| www.039550.com-京东快彩农赚钱吗| www.183239.com-皇都彩票app| www.258611.com-福彩走势网首页| www.342266.com-谁有江苏快三群| www.439366.com-彩之星网站-| www.538522.com-福彩3d试机号号码| www.738437.com-威信彩票app| www.822812.com-赢彩网排列三试机号| www.915893.com-一号庄彩票| www.977522.com-精彩江苏快三| www.zf77.cc-速八彩票骗局| www.37ku.com-彩票平台招租| www.2029.org-福彩3d中彩网顶测| www.85gi.com-飞彩网是属于彩票吗| www.6137.cc-大发快三豹子怎么买| www.341342.com-经典微信彩票群名称| www.444613.com-彩票3b开奖号码| www.557847.com-玩彩虹伞的背景音乐| www.807072.com-彩票纸回收价值| www.874552.com-大优彩票平台| www.936048.com-时时彩聚宝盆app| www.999673.com-福彩手机版3d字谜| www.gh7.cc-彩票多少种-| www.pw06.com-长城彩票购彩大厅| www.y28.top-安徽彩票app| www.53rz.com-体彩店每月任务| www.8520.cc-彩票二维码有什么用| www.34ed.com-3d彩界精英双胆| www.1808.pw-幸运彩票幸运快三| www.640024.com-手机徽信买3d彩票| www.86234.com-竞彩足彩漏洞| www.048813.com-玩彩老手专家专栏| www.188982.com-内蒙快三遗漏数据| www.256934.com-快三平台那个好| www.327561.com-彩票开奘结果| www.394069.com-75秒时时彩开奖| www.499867.com-天天中彩票的优惠卷| www.555682.com-七乐彩浙江-| www.605738.com-吉祥彩票欢迎| www.660776.com-足球胜负彩开奖公告| www.732610.com-南京市体育彩票领奖|