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.jv57.com-人人彩票可信吗| www.02511.cc-好彩票手机网站| www.556828.com-vr彩票直播-| www.769035.com-网上盈彩网合法的吗| www.554580.com-彩票回补正负| www.14fk.com-海南七星彩视频直播| www.161634.com-中国体育彩票内| www.80902.com-河北省福彩网| www.069225.com-200w彩票-| www.216248.com-体彩七星彩中奖彩票| www.308305.com-七乐彩近期开奖公告| www.999649.com-3d福彩怪字神贴| www.fj84.com-彩票中奖对照表| www.911489.com-彩票十一选五内蒙| www.989074.com-彩8下载苹果| www.bx84.com-彩票专业彩吧助手| www.tq13.com-彩票店可以买足彩吗| www.vx34.com-最新时时彩平台出租| www.42ay.com-广东福彩三十六选7| www.033129.com-体彩四川金7乐开奖| www.164802.com-500彩江苏快三| www.262973.com-彩控网-| www.216365.com-彩票的税率-| www.hs77.com-北京彩票pk10| www.920292.com-彩票1分快3-| 易彩网www.12455q.com| www.js69.com-彩神lx下载-| www.914439.com-端彩祥云软件下载| www.mi04.com-青海今天开奖快三| www.133003.com-彩色纸箱制作过程| www.553045.com-彩经网论坛-| 500彩票www.330985.com| www.975708.com-专业福彩快三网| www.nu42.com-快三第一门户是什么| www.596732.com-新加坡多多彩票官网| www.745006.com-暂停互联网彩票| www.939771.com-吉林快三官网电话| www.kn14.com-足彩新浪竞技风暴| www.0509.net-公益彩软件-| www.16826.cc-下载辽宁福彩| www.081802.com-天马彩票提现不到账| www.676543.cc-彩票榜软件是真的吗| www.781634.com-福彩手机客户端| www.917297.com-时时彩怎么靠概率赢| www.993171.com-随时赚彩票苹果版| www.mj07.com-好彩投-| www.111324.com-老彩民app能用吗| www.729856.com-体彩中大奖-| www.809755.com-手机上买彩票违法吗| www.893901.com-金牛彩票官网| www.971554.com-彩票回血计划| www.cp624.com-彩神ix-| www.41mm.com-万福彩票官网| www.19.cn-正规彩票店卖私彩| www.660952.com-南方彩票软件| www.779116.com-彩票3d彩报-| www.873414.com-中彩网3d北斗推荐| www.949381.com-今日体彩试机号| 九州彩票www.6769l.com| www.019630.com-什么彩票好玩| www.137216.com-7彩靠谱吗-| www.245600.cc-易彩快三网址| www.337178.com-时时彩单双怎么玩| www.129704.com-排列三振幅2元彩票| www.233677.cc-乐汇彩app-| www.324605.com-福彩假的-| www.362919.com-彩票放假通知| www.509533.com-淘金彩票安全吗| www.425472.com-汕头彩票赢家报纸| www.328130.com-乐彩3d静态版| www.06yq.com-微信不能买彩票了吗| www.cpw| www.628287.com-滁州市七彩世界诈骗| www.598653.com-买彩票中奖真实新闻| www.558538.com-彩博士正版四不像肖| www.631631.com-体育七星彩开奖结果| www.706209.com-发彩网大小单双| 金冠彩票www.49956w.com| www.613917.com-体彩排列五技巧| www.907598.com-今晚六星彩开奖结果| 福彩天下www.fcff3.com| www.in43.com-澳客网足彩14场| www.8kv.com-百盛彩票平台| www.1279.cn-越南河内5分彩| www.8567.bid-大乐透彩票杀号软件| www.38676.com-乐中彩票app下载| www.91039.com-福彩哪个软件好用| www.057889.com-帝彩塑胶地板| www.125071.com-靠谱的彩票网站| www.203525.com-彩票走势的研究方法| www.3gj.com-下载京彩7515| www.0314.pro-新浪彩-| www.7772.win-七乐彩有什么窍门| www.47111.com-男方提出离婚彩礼钱| www.019040.com-福彩青蛙过河中奖率| www.260288.com-快三是赌博还是彩票| www.766189.com-风发彩票qq-| www.849938.com-中国竞彩网官方信息| www.909665.com-彩界过客3d胆组| www.966215.com-发彩平台-| 幸运彩票www.444086.com| www.191006.com-购彩之道专栏| www.19226.cc-没身份证能彩票兑奖| www.65565.cc-体育彩票选号分布| www.007778.com-彩客彩票手机版| www.086759.com-同心溢彩-| www.75971.com-收藏奥运彩票多少钱| www.195331.com-9彩彩票-| www.288357.com-网赌快三押大小| www.392908.com-昨天体彩中奖号是几| www.659031.com-4d彩票规律-| www.137506.com-中国足彩在线| www.227676.com-福彩网055dcc| www.706349.com-时时彩大神预测在线| www.903633.com-3d福彩试机号金码| www.977491.com-世界杯足彩预测| www.lb33.com-好运来彩票网址下载| www.q51.org-安徽最大的彩票弃奖| www.939388.cc-亚博app买足彩| 好运彩票www.003hy.cc| www.161089.com-新开彩票平台送彩金| www.300799.com-七乐彩今日专家预测| www.427228.com-快三和值预测| www.538136.com-国彩项目是什么意思| www.505326.com-乐彩论坛独胆第一人| www.937210.com-五福彩彩票软件| www.cp209.com-至尊快三彩票| www.xo80.com-新编彩票投注技巧| www.11rf.com-中国足彩馆账号| www.69qz.cc-关于彩票的故事题目| www.0396.org-彩票出票软件| JJ彩票www.07929.cc| www.748474.com-红彩彩票怎么样| www.897742.com-多彩贵州城文化政策| 易彩堂www.55885j.com| www.518628.com-fc平台注册彩票| www.629846.com-网易红彩怎么玩| www.769069.com-江苏快三猫腻| www.630609.com-彩票挑码软件| www.015724.com-七星彩手机怎么投注| www.511522.com-五洲彩票受骗| www.576029.com-v8彩票彩票官网| www.8593.cm-体彩7位数何时开奖| www.34955.com-时时彩后三计划软件| www.180201.com-福彩快三软件下载| www.188724.com-福建快三一定牛推荐| www.254504.com-爱乐彩票正规吗| www.861368.com-体彩任选三技巧| www.928799.com-qq福彩发号真的吗| www.975724.com-驻马店上蔡县彩礼| 华彩网www.hcw332.com| www.gf92.com-福彩快三游戏大全| www.uc45.com-福利彩票往期| www.628899.cc-香港6和合开彩结果| www.qi00.com-中原彩票平台| www.6kr.com-等差数列与彩票| 吉利彩票www.80065p.com| www.lt55.com-万鸿彩票-| www.264880.com-北京快三最长大小| www.398484.com-杭州义彩印刷| www.2993.me-ss866盛世彩票| www.38859.com-红彩彩票怎么样| www.787538.com-湖北快三冷号统计| www.941612.com-合买彩票话术|