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.8079.cm-水彩抽象画-| www.50787.cc-幸运28中彩票| www.338624.com-湖北彩民中大乐透| www.466928.com-彩票走开奖势图| www.611155.com-彩35怎么玩-| www.692736.com-彩神v注册码| www.771714.com-南粤风釆好彩3中奖| www.883734.com-快三黑彩能玩吗| www.59xs.com-易购彩票合法吗| www.ts70.com-合买彩票网-| www.70kr.com-彩易达上市了吗| www.5194.cc-中彩网3d走式图| www.029856.com-神舟彩票官网首页| www.114130.com-福彩3d组选跨度表| www.sj18.com-中国时时彩投注平台| www.698927.com-华夏彩下载-| www.792322.com-不用彩票能兑奖吗| www.875032.com-熊猫竞彩无网络| 500彩票www.758500.com| www.175982.com-一分快三破解版下载| www.8998.loan-足彩竞猜网任九| www.7448.top-中国福彩慈善| www.773332.com-竞彩赢了没到账| www.z08.net-明代红绿彩特征| www.94pj.com-乐米彩票怎么注册| www.45ql.com-彩票双机店转让| www.75fo.com-彩之家彩票网如何| www.8143.com-彩48彩票网-| www.579612.com-朱雀彩票我的账户| www.631725.com-香港牛娃彩票资料| www.741939.com-可以网上购彩的软件| www.837368.com-聚彩51app大发| www.903456.com-万豪彩票助手老版本| www.980322.com-27彩票-| www.xe.com-河南福彩快3一定牛| www.qn22.com-一分快三赚钱技巧| www.1nm.cc-体彩几率-| www.076228.com-内蒙快三360开奖| www.228809.com-福利彩票好彩1玩法| www.590708.com-時時彩走势图带连线| www.33857.com-专业彩票数据分析师| www.046355.com-体彩申请书怎么写| www.892256.com-彩票榜邀请码谁有| www.968432.com-宁夏福彩网双色球| www.cp3772.com-北京快三一天多少期| www.992640.com-足球博彩高手心得| www.hg02.com-3d福彩过滤app| www.5164.net-新管家彩图图片| www.581003.com-天津体彩电话号码| www.663808.com-越南5分彩-| www.737562.com-彩吧图库牛彩图库| www.821106.com-常熟福彩销售点| www.264567.com-彩票端作弊-| www.956377.com-彩神输钱-| www.610375.com-彩票777被骗| www.709762.com-体彩店的营销方案| www.790902.com-福利彩票随机号码| www.879176.com-在线彩票缩水过滤| www.958207.com-福彩3d线上-| www.ur55.com-找回365彩票| www.597635.com-澳门福彩app| www.739632.com-福彩3d好中奖吗| www.896787.com-五分彩官方走势图| 彩天下www.c2398.com| www.rx18.com-福彩旺彩下载| www.130044.com-5分彩开奖记录| www.260216.com-河南省福彩兑奖地址| www.394344.com-山东彩票中奖3亿| www.564598.com-时时彩三星4胆方法| www.689822.com-微彩娱乐平台app| www.00028.cc-彩色印刷包装袋| www.8828.link-足球胜负彩比分直墦| www.31162.com-快三倍投回血| www.67801.com-黑彩算赌博吗| www.019637.com-超级赛车彩票怎么玩| www.076826.com-中华彩票app下载| www.302923.com-好彩3中奖规则| www.388585.com-时时彩后一稳赚方法| www.518555.com-辽宁福彩中心主任| www.640880.com-今天彩民乐图是什么| www.770116.com-彩票代投账号兼职| www.853985.com-五分时时彩是官网吗| www.949250.com-中国彩票快三真假| 彩客博www.8667p.com| www.gr74.com-彩票返点怎么算| www.xd56.com-彩票快三玩法方法| www.82877.cc-大奖彩票机子能兑| www.578161.com-世界杯体彩兑奖期限| www.714774.com-瑞彩祥云网址多少| www.790523.com-幸运快三开奖查询| www.857721.com-盈彩彩票是不是黑网| www.910981.com-体彩排列三钱王预测| www.547.bid-七乐彩中奖查询结果| www.42263.com-福彩3d第三版图谜| www.004243.com-乐购彩票快3| www.58299.cc-江苏能不能买七星彩| www.022067.com-安徽快三直播| www.475581.com-下载双色球投注彩票| www.580755.com-七星彩高手交流纶坛| www.32847.com-三d走势彩宝网| www.99628.com-北京单场购彩| www.12gf.com-2013体彩排列三| www.1720.la-可靠一点的黑彩平台| www.67778.cc-九州彩票输钱了| www.153130.com-旺彩预测电脑版| www.60rd.com-网易红彩能赚钱吗| www.4288.in-快彩v2.1.17| www.430549.com-江苏人彩礼-| www.533375.com-彩票中大奖电影| www.731674.com-上海大彩鲸快三| www.9775.net-七星彩2276预测| www.022831.com-福彩5d中奖怎么看| www.1230.cm-腾讯出售华彩控股| www.48ip.com-手拿福利彩票图片| www.2244.top-魅力易彩骗局| www.8969.cc-彩娱乐代理-| www.61601.com-柬埔寨博彩客服| www.030741.com-正规官方彩票购彩网| www.hs03.cc-彩之家app下载| www.814062.com-极速1分彩下载| www.883817.com-博彩彩票站-| www.996833.com-海南福彩快三投注站| www.fw40.com-重庆时时彩讨论吧| www.8mt.com-江苏省福彩发行中心| www.190333.com-一分快三走势怎么看| www.265376.com-快三多久开一次奖| www.385201.com-拍拍贷新彩虹计划| www.491528.com-彩虹鱼图片大全| www.563979.com-多彩贵州航空招聘网| www.639541.com-福彩复式玩法| www.743165.com-购彩3是什么东西| www.873595.com-专业玩彩个人网站| www.937506.com-销售时时彩彩票软件| www.990643.com-手机彩票软件代理| www.ph.com-快三是什么的简称| www.sg40.com-彩乐乐走势图| www.47mz.com-机选福彩六加一| www.0744.org-足彩滚球让球| www.145301.com-体彩5p-| www.955408.com-凤凰彩票开挂| 必发彩票www.783309.com| www.pz23.cc-手机彩票应用| www.39qk.com-风雨彩虹铿锵玫瑰| www.99ac.com-体育彩票一周开几次| www.2214.com-幸运十分彩官网| www.6823.com-d东盛彩报2-| www.10683.com-…中国足彩网| www.133741.com-广西体彩网网页版| www.205332.com-内蒙古体彩兑奖中心| www.267663.com-彩票易中奖-| www.346634.com-彩神三码-| www.079116.com-七乐彩胆拖6拖3| www.896360.com-彩75官方-| www.247770.com-福彩快三软件网站| www.389783.com-大朗体育彩票店转让| www.492633.com-创业难还是买彩票难| www.571909.com-竞彩篮球最稳的买法| www.636013.com-七星彩开奖结果一一| www.987714.com-93768时时中彩| www.hr90.com-五百万彩票网电脑版| www.vw40.com-购彩助手-| www.14zy.com-那个软件买彩票安全| www.948230.com-手机版二四六好彩网| www.cp9669.com-旺彩双色球手机版|