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.841985.com-天天中彩票免费提现| www.165702.com-彩名堂网站-| www.93166.cc-成都彩钢围挡租赁| www.138347.com-中华彩票手机版下载| www.298005.com-人人中彩票老版本的| www.415710.com-a7娱彩登录注册| www.548777.com-苹果原彩-| www.636467.com-彩虹六号高清图片| www.926273.com-千里马福彩推荐号| 幸运彩票www.717699.com| www.872991.com-秋业说彩专栏| www.br92.com-信彩三分快三计划| www.0967.vip-风采与风彩区别| www.218073.com-旧版彩神争争霸| www.365676.cc-竞彩冷门规律| www.875435.com-下彩彩票官方下载| www.ye23.com-彩票3d开奖-| www.7024.vip-时时彩助手在线计划| www.61628.cc-乐橙彩票app| www.97592.com-时时彩电子走势图| www.49uw.com-足彩十四场最新分析| www.29881.com-杏彩平台app下载| www.712512.com-快三赌博犯法吗| 云博彩票www.www.196776.com| www.97in.com-博彩之星趋势软件| www.65wu.com-爱乐透彩票买不了| www.3315.cm-彩票看走势图讲解| www.852369.com-c27彩票app-| www.3wu.com-彩票谁发明的| www.0422.com-159娱乐彩票| www.019579.com-福彩快3推荐号码| www.241746.com-七星彩票玩法说明| www.03jc.com-弃奖体彩最大| www.976641.com-利彩开奖排列三| www.em13.com-体彩大乐透走势图表| www.xw59.com-哪些彩票平台好| www.37in.com-dd彩票是怎么回事| www.081915.com-118彩票首页| www.42sr.com-福彩开奖日期官网| www.913677.com-快三提现-| www.997649.com-快中彩找不到开奖| www.il93.com-广东福彩微信公众号| www.579039.com-360福彩3d杀号| www.679179.com-中国福彩刮刮乐扫码| www.779876.com-青蛙彩票开桨直播| www.857716.com-梦想彩票站下载| www.316283.com-体彩大乐透怎么兑奖| www.573734.com-聊天彩票投资| www.678585.com-五分彩是真的还是假| www.229630.com-093彩票手机版| www.81fj.com-乐福彩票邀请码| www.3733.com-富邦彩票-| www.13563.com-体彩竞彩足球靠谱不| www.81144.com-福彩3d关公三字经| www.028464.com-快三黑彩能玩吗| www.590733.com-竞彩足球半全场推荐| www.671758.com-不依彩吧-| www.769106.com-钻石团队彩票计划师| www.841482.com-七星彩内部资料书| www.914183.com-快三数据分析软件| www.978770.com-好彩焦油量-| www.cp3878.com-快频彩湖北快三| www.660057.com-七星彩大公鸡梦册| www.816892.com-彩票周六开什么奖| www.948274.com-彩票软件多彩网| www.ai07.com-七星彩预测最准号码| www.68eg.com-足彩竞彩网258| www.824803.com-周口福彩中心在哪| www.954628.com-境外彩票合法吗| www.wv94.com-糖果派对四个彩金| www.676198.com-彩票守号多久能中奖| www.962914.com-福利彩票开獎| www.cp261.com-广西快三开奖助手| www.0712.date-彩票对冲刷流水| www.753896.com-南国七彩票论坛| www.355460.com-五分彩万位定位胆| www.541981.com-彩票超级大乐透开奖| www.656386.com-天空彩免费大全| www.448008.com-vr赛车彩票计划| www.753120.com-彩票558app-| www.117766.com-实时彩怎么玩| www.302829.com-103彩票app-| www.395234.com-彩虹授权商正版查询| www.508555.com-网上投注彩票合法吗| www.g49.xyz-苹果彩票网址| www.81886.com-易众彩店-| www.900018.cc-福利彩票店装修费用| www.974332.com-广西快三和值遗漏| www.oa.com-中国竞彩网500| www.075507.com-江西体彩微彩助手| www.243243.com-中国体彩中心官网| www.1300.in-365博彩app-| www.382878.com-19002期胜负彩| www.58mk.com-五百彩开奖-| www.4950.net-4567彩票主页| www.670305.com-时时彩追冷号多少期| www.87gt.com-金口诀测彩详解| www.911807.com-开型体育彩票知识| www.980580.com-6768彩票怎么样| www.cp4699.cc-湖北快三销售时间| www.t27.club-永诚彩票网下载| www.vo79.com-福彩3d玩法规则v| www.445332.com-专业玩彩票开| www.784667.com-福利彩票管理中心| www.872661.com-意大利超级乐透彩票| www.947800.com-体彩公益金管理办法| www.990873.com-4scc彩票网站| www.vi3.com-中国手机福彩体彩| www.mk30.com-uu直播彩票破解| www.zv37.com-重庆时时彩直播| www.834.tv-直播间聊彩票| www.999050.com-天天福彩彩-| www.ds05.com-彩票指南报纸手机版| www.021838.com-竞彩网258-| www.108451.com-玩彩票能挣钱吗| www.700079.cc-中国五百彩票网| www.32728.com-…江苏体彩网| www.569626.com-3d图吧彩吧第四版| www.669373.com-pk彩票平台安全吗| www.757438.com-福建体彩官方网站| www.fo5.cc-重庆时时彩助手| www.865867.com-创世彩票娱乐平台| www.555536.com-星宇购彩怎么玩| www.014408.com-七乐彩杀号彩宝贝| www.102958.com-中乐彩-| www.191605.com-彩票走势图大全表| www.254956.com-福彩快三快输死人了| www.349264.com-2345彩票网官网| www.439988.cc-中彩那天主要词语| www.517155.com-柬埔寨招聘博彩客服| www.571559.com-超神江苏快三全能版| www.639503.com-500彩票终端机| www.762520.com-釉下彩-| www.815548.com-福彩3d和差-| www.877390.com-彩票计划全天在线| www.949607.com-讯盈彩票邀请码| www.995666.com-足彩比分技巧牛人| www.uk.com-体彩大乐透开奖查询| www.98fn.com-凤凰彩票能玩吗| www.92686.com-九州彩票官网登录| www.041562.com-混合过关竞彩篮球| www.5025.net-旺彩彩票软件破解网| www.01035.com-五亿彩官方app| www.967411.com-网易彩票可信吗| www.682174.com-今日彩票官网| www.773007.com-快三庄家如何赚钱| www.859422.com-江西南昌彩票中奖| www.927920.com-福利彩票都有几种| www.977916.com-彩铝雨水管-| 购彩堂www.849798.com| www.3043.org-福彩刮刮乐天天中| www.38018.com-体彩20元的顶呱呱| 购彩在线www.66332o.com| www.20wb.com-大智慧彩票注册| www.224554.com-彩神ll网页登录| www.547399.com-彩票互刷拿佣| www.3005.wang-高手彩票论坛| www.13593.cc-安徽快3彩票| www.969563.com-酷彩美国-| 亿彩堂www.558610.com| www.819778.com-vr彩票怎么找规律| www.917928.com-彩虹宝宝第一季| www.979257.com-中国福体彩票| www.x95.org-彩票平台直招总代理|