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.dl69.com-网上快三靠谱吗| www.14eq.com-福利彩票3d广播台| www.0710.net-喜彩网图库大全| www.8556.biz-怎样研究七星彩规律| www.42166.com-558彩票靠谱吗| www.89517.com-新生彩票手机登录| www.052220.com-足彩分钟师-| www.234861.cc-乐彩3d论坛静态版| www.323822.com-摇一摇机选七乐彩| www.412009.com-原彩显示在哪里设置| www.532234.com-大悲咒求财中彩票| www.665741.com-七星彩四数万字表| www.756055.com-全民中彩ios| www.867836.com-七星彩重复中奖号码| www.950382.com-百乐彩怎么下架了| 博亿彩票www.622by.com| www.hc79.com-彩788app-| www.i28.vip-约彩彩票下载安装| www.52bt.com-利彩正规吗-| www.0637.vip-时时彩杀号工具在线| www.08364.com-推广彩票广告词| www.58568.com-彩拾彩票软件| www.032455.com-全彩助手app下载| www.119755.com-福利彩票打票员工资| www.201591.com-全员彩票开奖查询| www.285892.com-信誉好的足球彩票| www.425228.com-添点七彩鲜花网| www.533290.com-彩票均衡原理实战| www.639826.com-香港开彩现场直播| www.739604.com-苹果彩票软件靠谱吗| www.826888.cc-98彩票成立时间| www.907993.com-彩票预测网站源码| www.976217.com-拿彩礼当陪嫁| www.mz53.com-彩票巴士app下载| www.z83.cc-福、彩3d走势图| www.65tr.com-沈阳市福彩中心地址| www.1382.cc-福利彩票中奖个税| www.9990.top-掌上福彩宝典app| www.59528.com-时时彩网站大全| www.024994.com-老版新浪彩票频道| www.106049.com-微信彩票竞猜怎么了| www.183433.com-快三游戏规则| www.266386.com-福彩排7走势图| www.392367.com-足彩搜狐-| www.523897.com-福彩快乐12怎么玩| www.615926.com-美狮彩票软件| www.692689.com-辽宁体彩网一选五| www.780271.com-彩票代售点怎么申请| www.865740.com-意彩app-| www.938477.com-彩运网平台下载安装| www.996391.com-彩票软件下载安卓版| www.ab03.com-老快三开奖结果查询| www.tl75.com-淘彩票大发快3| www.13ju.com-天天彩票五少同行| www.90li.com-世界杯博彩类书籍| www.3171.cc-体彩任九奖金怎么算| www.9049.xyz-众彩网客户端下载| www.75888.cc-体彩纸-| www.029620.com-利彩是什么平台| www.112282.com-彩票云顶网址| www.188107.com-快三跨度中奖金额表| www.268162.com-武汉快三推荐| www.401200.com-福彩排列五哪天开奖| www.516333.com-金网彩票与你同行| www.591875.com-977cc彩票官网| www.669830.com-福彩弓d试机号查询| www.755257.com-中彩网不能出款| www.918112.com-3d图3d彩票-| www.971834.com-泰安体育彩票电话| www.pg00.com-兰州体彩中心地址| www.4wt.com-彩票必中号码组合| www.67kz.com-捷豹9号彩票| www.1001.website足彩金手指日报| www.9358.biz-彩票中心原主任| www.53116.cc-汇彩国际平台登录| www.001008.com-有玩快三的软件吗| www.072455.com-彩票双色期球开奖| www.141946.com-如何在竞彩猫上推荐| www.221252.com-彩票赚钱软件| www.299114.com-河北快三统计图| www.370713.com-双色球杀号彩经| www.468833.com-手机迷彩-| www.555757.com-快三路线北京| www.628935.com-查今天体育彩票| www.700747.com-彩套印刷-| www.779512.com-福利彩票大乐透开奖| www.859988.com-内部人士彩票骗局| www.930105.com-福彩预测3d-| www.988034.com-彩民乐与阳光探码图| www.cp5221.com-青海快三今天开奖号| www.nl21.com-竞彩官方-| www.7qu.com-2元彩票走势大全| www.66jq.com-969彩-| www.1188.cm-福彩对望码-| www.9297.org-分分彩技巧投注方法| www.39867.cc-台湾威力彩最新开奖| www.77474.cc-高手破解福彩3d| www.028040.com-投彩骗局相亲| www.103308.com-旺彩双色球打不开| www.172740.com-彩票平台下载| www.337036.com-体育彩票开奖日期| www.416444.com-福利彩票快三魔图| www.520538.com-彩网北单加奖12| www.590293.com-四柱预测彩票| www.662635.com-二四六天天有彩| www.860376.com-体育彩票微信群| www.911594.com-乐彩神app邀请码| www.974315.com-五福彩分分时时彩| www.hj43.com-博众彩票软件官网| www.zb38.cc-排列五走势图众彩网| www.22dh.com-彩票开奖源代码| www.559.win-胜负彩高手-| www.4211.top-彩神之首双色球三股| www.9415.org-体彩双采图迷总汇| www.60531.com-乐和彩票网官方端口| www.020944.com-众彩网首页网| www.090727.com-江苏快三2码遗漏| www.155448.com-最新白菜网彩金| www.258598.com-湖北快三精准计划| www.327779.com-幸运快三彩票| www.395454.com-澳门全天彩是真的吗| www.531778.com-中大奖彩票公式| www.610676.com-湖北有精彩十分| www.679371.com-陌生人买五分彩| www.752706.com-h5彩票程序-| www.859606.com-福建福利彩票查询| www.922372.com-吉林快三预测群| www.976059.com-彩礼图-| www.wj2.com-爱彩乐广西快3| www.qq95.cc-鑫彩网彩票-| www.83.la-彩票测试账户| www.63mo.com-湖北快三结果走势图| www.0364.com-彩娃app3.5-| www.7949.biz-大众平台博彩| www.23658.com-福彩3d金码号| www.63095.com-c8万彩吧cn| www.092406.com-彩经网走势图电脑版| www.156731.com-彩票扫码兑奖| www.252360.com-全民乐彩票下载| www.316237.cc-竞彩店如何开| www.383159.com-茶陵公益彩票| www.518911.com-福彩3d淘彩吧| www.582998.com-体育彩票购买时间| www.652187.com-黄金8五分彩app| www.751005.com-福彩时时彩赚钱技巧| www.813955.com-爱彩乐走势-| www.878859.com-福利彩票代理青岛| www.970415.com-快三能控制么| 至尊彩票www.208990.com| www.fs87.com-宝马彩票软件下载| www.xg33.com-7彩彩票犯法吗| www.15ry.com-汇彩国际彩票注册| www.728.tv-彩票帝国-| www.4532.cn-七星彩历史同期查询| www.9520.vip-盛宏彩票登录| www.59334.com-上海彩票选4的玩法| www.011413.com-天津时时采彩开奖号| www.072082.com-国家整顿彩票| www.130426.com-博牛彩票快三| www.198452.com-玩彩票有上岸的吗| www.270553.com-怎样下载新彩网| www.388917.com-幸运快三公式| www.505730.com-黑彩买大小能赢钱吗| www.567406.com-欢乐生肖时时彩|