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.709490.com-湖北福彩短信投注集| www.6443.vip-中国彩票玩法| www.009086.com-今晚彩票开奖情况| www.81fp.com-英泰伟业彩票| www.45247.com-中国彩票靠谱吗| www.088034.com-彩票站如何在澳客| www.949786.com-南方双彩官方网| www.092080.com-百姓彩坛那个资料网| www.576304.com-中大奖彩票官方登陆| www.661205.com-梁老师彩票揭秘| www.q28.top-今天甘肃快三走势图| www.1038.org-玩五分彩有什么技巧| www.9980.biz-彩色压印混凝土模板| www.46663.com-福彩三d之新彩网| www.2475.top-好彩麻将怎么玩不了| www.267971.com-彩圣字谜总汇| www.465920.com-英国彩票平台| www.597622.com-彩票十一选五软件| www.720670.com-彩票计划团队| www.399620.com-海南特区七星彩版| www.008164.com-体彩开奖-| www.eg00.cc-大联盟彩票是骗局吗| www.001008.com-有玩快三的软件吗| www.079255.com-全民彩票投注网| www.258770.com-混合竞彩奖金计算器| www.025882.com-快频彩票下载| www.111923.com-酷彩吧网址是多少啊| www.758706.com-qq彩票竞猜没有了| www.851935.com-竞彩官网网址| www.947857.com-台湾彩票开奖结果| www.998080.com-竟彩258彩票| www.br82.com-福彩3d软件-| www.445535.com-福彩基诺开奖| www.551082.com-彩票跟单平台| www.654036.com-基诺快乐彩-| www.303941.com-快彩在线主页| 凤凰彩票www.77802o.com| www.817699.com-中国香港快三| www.909441.com-乐彩快三能挣钱吗| www.977062.com-河南彩礼立法| www.mh.cc-中国足球彩票竞彩网| www.099698.com-160彩票下载| www.bs00.cc-11选5手机购彩| www.966129.com-福彩双色球中奖查询| www.xs81.com-想认识彩票中心的人| www.768234.com-特区彩票808| www.992191.com-体彩排列五玩法说明| www.55pu.com-云南体彩网站| www.8383.pw-海南七星彩代理平台| www.49kw.com-彩富会员料-| www.4829.com-世界杯彩票买哪些| www.70zz.com-大众彩票3d图谜| www.939092.com-网上拉人进群玩彩票| 彩票驿站www.621431.com| www.116823.com-七星彩二等奖怎么看| www.8719.cn-最正规的彩票网站| www.943406.com-老彩民投注平台| www.113347.com-福彩3d太糊字迷| www.609525.com-彩客网网址是多少| www.822059.com-彩票双色球红球杀码| www.jc.cc-河北省彩票奖快3| www.70uv.com-668彩票软件下载| www.736839.com-好彩i门户-| www.855764.com-七乐彩兑奖号码表| www.259751.com-免费彩票选号器| www.932545.com-重庆快三多久一次| www.358486.com-江苏快彩下载| www.541166.com-时时彩盈利模式| www.134521.com-好彩香烟哪个好抽| www.781694.com-全民彩票安卓版| www.44eq.com-彩虹桥活动-| www.812733.com-福彩3d中奖秘籍| www.893571.com-快三和值最大遗漏数| www.029898.com-美术作品新年彩铅画| www.74609.com-中超竞彩足球| www.713553.com-王者彩票是怎么回事| www.825260.com-竞彩猫杜老师| www.894983.com-体彩官网购彩软件| www.955674.com-足彩胜负彩奖金预测| 彩民网www.76520d.com| www.739383.com-久久彩票客户端| www.844120.com-彩票属于-| www.933909.com-彩票指南电子版订购| www.992140.com-时时彩抢眼计划| www.ca82.com-彩票中奖神器下载| www.95658.com-中彩票为什么蒙面| www.53273.com-彩虹emoji表情| www.982244.com-北京彩票赛车| www.en09.com-北京快三计划群| www.vj03.com-快三精准计划网| www.04za.com-新手彩铅画教程图解| www.69wl.com-新加坡有几种彩票| www.0265.vip-彩票能中的人运气| www.53307.com-彩虹六号战队排名| www.99473.com-足球竞彩大师推荐群| www.349332.com-3d福彩乐彩网首页| www.062183.com-7天彩-| www.136537.com-易彩乐网络网站| www.570799.com-中福利彩票愚人节| www.667876.com-福彩中心窝案14人| www.aj7.cc-快三胆拖怎么中奖| www.520987.com-必发彩票是非法| www.631240.com-博彩刷流水的好方法| www.8792.xyz-爱彩彩票网贴吧| www.91231.com-彩烟哪里有卖的| www.110210.com-买3d彩票的技巧| www.sz1.com-香港168彩票网| www.07sp.com-河北快三3号预测| www.858.website时时彩网页9码计划| www.6894.biz-七彩阳光一至五节| www.167022.com-江苏快三是什么东西| www.8316.wang-江西彩票管理中心| www.968506.com-北京28彩票怎么样| www.95gb.com-自贡市体育彩票网点| www.46673.com-时时彩宝典软件下载| www.032036.com-人人爱彩票软件| www.219795.com-好彩网论坛-| www.372455.com-七彩色头发图片| www.571383.com-好彩足球彩票正规吗| www.71xl.com-彩票012路表格| www.254616.com-福彩3d图谜第二版| www.377903.com-在线买彩票机| www.594939.com-彩票复式计算器软件| www.715665.com-可以买快三的app| www.1845.vip-大正彩翼官方网| www.14417.com-七星彩单式1倍票| www.343597.com-彩神il是真的吗| www.462514.com-吉彩宝彩民客户端| www.556679.com-七乐彩开奖| www.656817.com-竞彩该如何投资| www.538630.com-大花猫1彩吧图库| www.24696.cc-古代人物彩铅画图片| www.315031.com-竞彩网计算器胜平| www.29112.com-爱乐透手机购彩票网| www.986727.com-1号彩票官网下载| www.vj51.com-河北快三彩票空| www.616723.com-甘肃福彩网官方网站| www.76fh.com-今晚七乐彩的号码| www.52568.com-好彩官网app| www.17925.cc-彩店宝下架了吗| www.043478.com-yy彩票官方登录| www.137483.com-足彩14场开奖最快| www.161810.com-网上买彩票被骗经历| www.344430.com-qq群里快三彩票| www.395038.com-广东福彩开奖直播| www.880704.com-代买彩票兼职| www.765518.com-永盛彩票官方网站| www.906997.com-双色球彩票组号宝| www.961171.com-大发彩神ll-| www.8960.biz-通搏彩票-| www.926673.com-3d开门彩-| www.128679.com-正规腾讯分分彩平台| www.480045.com-3d新浪彩票资讯| www.971423.com-众购彩票-| www.528970.com-飞鱼彩票走势图| www.609556.com-双盈彩票网-| www.676593.com-多彩航空-| www.736464.com-上海福彩官方网站| www.804412.com-七星彩热门定位预测| www.886514.com-海南四码彩票兑奖| 凤凰彩票www.88266b.com| www.ij19.com-福彩3d和制图| www.ye05.com-传统足彩开奖结果| www.111667.cc-唐山中3亿彩票的人|