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.963804.com-新手彩票怎么玩法| www.499055.com-今晚3d体彩开奖号| www.582956.com-万达彩票下载| www.6858.cm-买飞鱼体彩的技巧| www.in11.com-手机怎么买福利彩票| www.22.gg-江苏快三有多少期| www.90kh.com-怎么破解博彩app| www.4066.live-哪里可以买网球彩票| www.11240.com-彩票赢家报纸| www.362892.com-七星彩数据分析| www.497373.com-什么是13彩-| www.580055.com-福彩图库天天中| www.680744.com-如何购买江苏快三| 福彩网www.603694.com| www.869602.com-超级彩票下载| www.i29.top-酷彩吧app安卓| www.87ri.com-淘宝在哪里买彩票| www.4368.cm-今天福利彩票报纸| www.11705.com-进入福彩门户| www.1771.net-福彩3d布衣图库| www.41864.com-彩票开奖查询开机号| www.003788.com-全民彩票暂停销售| www.532367.com-买彩票有没有技巧| www.690244.com-风彩网双色球杀号| www.787951.com-胜天半子足彩| www.268278.com-彩神下载app| www.387639.com-彩票官网手机端| www.523710.com-江苏快三攻略| www.923476.com-大庄家彩票合法吗| 六福彩票www.16wa.com| www.798593.com-体彩篮球怎么买| www.890676.com-倍率高的彩票网站| www.965870.com-快三怎么猜大小| www.ak91.com-吉林市3彩票| www.616345.com-竞彩三关是么么意思| www.708165.com-01彩票合法吗| www.783036.com-保定体彩吧-| www.865352.com-分分彩开奖记录软件| www.937017.com-臺湾福星彩-| www.993726.com-足球竞彩如何玩| www.qq32.com-中国彩票还可信吗| www.75jf.com-足彩不输不赢的方法| www.118410.com-时时彩彩票微信群| www.226983.com-彩库宝典下载安装| www.338881.com-内蒙古福彩开奖直播| www.432833.com-36期的7七星彩| www.177928.com-江苏快三技巧顺口溜| www.93013.com-网上福彩投注合法吗| www.519950.com-福彩8平台邀请码| www.881730.com-彩票软件定制价格| www.92669.cc-立彩首页app| www.127657.com-彩虹岛手游版| www.787899.com-彩票手机版哪个最好| www.898014.com-福彩宣传语公益| www.966921.com-福利彩票投注中心| www.cp915.com-精彩十分开奖今天| www.df45.com-福彩3d技巧规律| www.u81.net-福彩神彩通关注码| www.81je.com-彩神通会员专区| www.3005.cm-香港六和开奖记录彩| www.279665.com-时时彩公式怎样算| www.397602.com-彩票图纸第一版| www.1399.vip-微信彩票在哪里添加| www.8673.top-云南时时彩开奖纪录| www.43293.com-微信代玩幸运快三| www.96656.cc-竞彩足球概率| www.795554.com-河北体彩福彩玩法| www.873711.com-乐和彩彩票官方下载| www.974108.com-環球彩票-| www.ns90.com-各省彩票最大奖| www.6vx.cc-网购彩票团购下单| www.73kt.com-2628彩票开户| www.1998.vip-福彩微投-| www.46326.com-卖福彩有任务吗| www.94677.com-卡姿兰彩妆国内排名| www.076700.com-体彩直播视频| www.78239.com-新浪竞技足球彩票网| www.188257.com-河南福彩22迭5走| www.279303.com-乐透彩3d字谜| www.355672.com-竞彩中奖缴税| www.8at.com-吐槽彩票中奖| www.77as.com-三d彩票预算公式| www.2347.org-彩票三d开奖走势图| www.8000.hk-亲子彩虹伞玩法| www.6973.cn-七星彩预测计划网址| www.22446.cc-e乐彩入口-| www.491456.com-巴西十分彩开奖号码| 幸运彩票www.675266.com| www.672652.com-排三走势图一彩宝网| www.809059.com-105彩票真实吗| www.924935.com-也买彩是骗人的么| www.979691.com-香蕉计划彩票| www.gn43.com-蚂蚁致富团队彩票| www.g79.net-6合和彩资料| www.37gz.com-中国福彩三d土势图| www.3112.in-吉林省七星彩一等奖| www.413643.com-豫彩通下载手机版| www.615993.com-福彩领奖强制捐款| www.1680.biz-l7500乐彩网| www.9552.bid-讲故事展风彩| www.51577.com-快速彩票倍投资金表| www.002878.com-彩c6彩票-| www.065058.com-双赢彩-| www.478655.com-竞彩巨奖-| www.35270.com-体彩开奖直播新浪网| www.041390.com-彩票超级稳计划| www.145497.com-中国河南体育彩票| www.260104.com-快三个值中奖多少钱| www.75177.cc-福利彩票程序是谁| www.193279.com-福利彩票是合法赌博| www.7865.xyz-体彩开奖和视频直播| www.69529.cc-吉祥彩票开发| www.033325.com-大华彩票app| www.117653.com-福利彩票幸运快三| www.964848.com-浙江体彩网官方首页| www.cai0345.com快3彩票害了多少人| www.920962.com-彩神争霸v11| www.ki.cc-北京快三官网下载| www.sm18.com-时时彩拉手-| www.26qy.com-彩发发软件准吗| www.0944.me-彩票合买搭建| www.00303.com-香港百姓彩坛论坛| www.78tv.com-不思议迷宫彩蛋整理| www.6168.me-彩钢瓦价格表| www.100742.com-体彩胆码-| www.26899.cc-七星彩规则| www.89842.com-3期计划彩票投注| www.076658.com-彩票需要几位数| www.6552.com-小站宝彩票苹果| www.037645.com-中彩网极速快三| www.972530.com-简单彩铅画-| www.pi56.com-足彩第19024期| www.11sw.com-彩票天下是骗局吗| www.0003.site-中国彩票算法漏洞| www.6948.pw-竞彩连黑10场之后| www.82315.com-福客来彩票登录| www.057963.com-双彩追加和值谜汇总| www.087832.com-网上赌彩票违法吗| www.8xh.com-掘金团队彩票微信| www.81rf.com-福利彩票十三五规划| www.2321.win-华北快三-| www.8357.top-怎么打彩票容易中奖| www.549504.com-竞彩网能投注吗| www.632515.com-立彩彩票注册手机网| www.712999.com-cc彩票网站-| www.796906.com-彩票中奖走奇门下载| www.986888.com-全天时时彩计划数据| www.bw82.com-吉林的快三出来| www.091160.com-百姓彩站-| www.648.me-易彩乐快三平台| www.5450.net-中国福彩黑幕| www.516449.com-中发彩票是真的吗| www.616168.com-609彩票是真的吗| www.699523.com-蓝球计算器-竞彩网| www.778117.com-万彩吧彩票网| www.sr77.com-红宇体彩店-| www.18ke.com-福彩天天-| www.789.cx-彩票指南周三版| www.3700.top-领航彩票软件怎么样| www.397530.com-体彩天庚图-| www.652380.com-体彩排列期开奖| www.720821.com-2元彩票网官网下载| www.791304.com-江西快三综合| www.870700.com-天马快三彩票平台|