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天

知道了
彩票256平台 www.150893.com-亿宝彩票安卓app| www.108795.com-富贵彩平台-| www.208625.com-广西彩票快三| www.306767.com-吉祥彩票下载| www.409527.com-鸿运彩票365| www.547906.com-宏图科技玩五分彩| www.236055.com-彩票北京快了3| www.352208.cc-众购彩票官方网| www.465781.com-旺角彩网网址挂牌| www.577733.cc-我要加盟彩票投注站| www.688463.com-广东省福利彩票发行| www.576323.com-轩彩娱乐注册下载| www.668625.com-3d牛彩总汇-| www.6311.in-双色球福彩开机号码| www.cp6623.com-北京快三最大遗漏| www.232552.com-足彩的玩法-| www.337012.com-双彩开奖公告| www.494.net-体彩7位数中奖查询| www.796884.com-中国竞彩网赛事公告| www.040347.com-体彩天下官方网站| www.71oh.com-中彩票的诗-| www.323556.com-彩78网站怎么样| www.439819.com-贵阳彩票双机转让| www.546553.com-福利彩票申请书样本| www.875977.com-香港5分彩官方网| www.977363.com-纪梵希彩妆加盟| www.tg0.com-黑客破解重庆时彩彩| www.311861.com-排列5彩票规则介绍| www.040590.com-三千万彩票大奖| www.dd44.cc-108彩票app-| www.xs40.com-收贵州快三开奖结果| www.26df.com-福彩图迷字迷总汇| www.686856.com-四下语文书中彩那天| www.814777.com-网易彩票官方网| www.895548.com-宝马彩票是个黑网站| www.984593.com-人人购彩票-| www.ce31.com-快三对刷不亏| www.w68.xyz-信彩计划在线计划| www.72kf.com-下载十一选五大彩鲸| www.356324.com-华阳彩票提现还没到| www.026410.com-开设私彩网站| www.574211.com-玩彩票有赚钱的吗| www.880259.com-福彩乐吧-| www.968336.com-福彩是真的吗| www.352276.com-金牛彩票真假| www.026982.com-韩国彩票制度| www.105722.com-超级时时彩手机软件| www.180129.com-广西快三结果控| www.131783.com-河南洛阳孟津县彩礼| www.871859.com-快三单注豹子多少钱| www.ct60.com-3d彩票中奖号| www.w89.website伦敦2分彩计划| www.35153.cc-彩票的概率-| www.118140.com-体彩官网电脑版首页| www.948009.com-四川省体彩中心| www.cai708.com-快三中奖助手免费版| www.f14.top-新加坡彩票营业时间| www.621139.com-福彩连连看属于哪的| www.910624.com-全民彩票电脑版| www.ab00.com-体育彩票的骗局| www.169225.com-内蒙福彩十分钟| www.kt76.com-上海快三时间要改吗| www.17bu.cc-彩票技巧书籍大全| www.ox24.com-宁夏福利彩票一等奖| www.4618.net-彩票回收-| www.753866.com-玩彩票安桌-| www.871053.com-关于福利彩票的书| www.950667.com-中国福彩双色球下载| 名门彩www.33997l.com| www.985535.com-博众时时彩专业版| www.418787.com-陇彩票-| www.634378.com-跑马福彩-| www.ev92.com-体彩开奖号码排列五| www.30wp.com-彩色玫瑰图片| www.8238.bid-重庆时时彩遗漏走势| www.947562.com-彩票王成周采访视频| www.cp16.com-十一多乐彩-| www.66023.com-福彩3d过滤选号器| 天吉彩票www.9205b.com| www.037762.com-体彩开奖历史开结果| www.5921.xyz-快乐彩走势图手机版| www.30243.com-福彩3d乐彩论文坛| www.99482.com-山西福彩中心地址| www.8302.vip-易彩怎么玩-| www.559190.com-呼和浩特彩票中心| www.1653.wang-易彩国际登录平台| www.62861.cc-江苏快三导师计划网| 500彩票www.501347.com| www.026437.com-百姓彩坛网站| www.682841.com-娱乐时时彩-| www.772565.com-28彩怎么下载| www.834196.com-好彩双爆焦油量| www.890176.com-cba篮球竞彩分析| www.63139.com-香港6和彩开奖结果| www.898431.com-玩彩票app安卓| www.972504.com-福建福彩快3预测| www.jk8.cc-快三彩票怎么玩黑红| www.062373.com-数据分析快三计划| www.9822.loan-乐彩网丨75o0| www.949265.com-中国的彩票社会作用| www.35527.cc-开彩宝典-| www.505158.com-网恋博彩套路| www.587153.com-彩票安全风向标| www.278659.com-红牛彩票官方网站| www.259335.com-那个彩票软件最好用| www.365455.cc-中超竞猜彩票投注| www.70zk.com-彩票3d图谜-| www.259.live-湖南福彩电子报| www.856330.com-杭州彩票分析师招聘| www.982984.com-致享7彩福-| www.gh29.com-福彩有没有一分快三| www.an6.com-河北快三跨度和值表| www.901258.com-家彩网排列三开机号| www.967372.com-彩票群规-| 乐发彩票www.223559.com| www.oe72.com-赠送彩金qq群| www.6487.cn-下载一定牛体育彩票| www.pd71.com-8号彩票提款靠谱吗| www.374666.com-中国体彩湖南赛车| www.864439.com-太湖字谜汇总新彩网| www.953554.com-玩北京快三输十多万| 500彩票www.202417.com| www.hq49.com-上海快三介绍| www.xv03.com-买彩票后没给钱跑了| www.1216.biz-全民双色彩票| www.760103.com-体彩七位数中奖查询| www.838395.com-江苏快三大奖| www.946066.com-郑州彩礼-| www.3311.red-天才彩女双色球预测| www.225860.com-凤凰彩票只有输| www.331766.com-千百万彩票大发快三| www.444623.com-中国河南体育彩票网| www.552083.com-福利彩票快乐八| www.613657.com-彩票走势模拟投注器| www.961574.com-牛蛙彩票30码资料| www.fw3.cc-时时彩长期稳定玩法| www.tr00.com-福建体彩31开奖号| www.84yb.com-快8彩票下载安装| 彩票5www.023989.com| www.5638.cm-买彩票计划骗局| www.66989.cc-福利彩票领取流程| www.57uk.com-好彩票花呗也可充值| www.81ru.com-快乐彩五行技巧大全| www.4114.xyz-彩虹台官网-| www.02893.com-百乐门彩票正规吗| www.58268.cc-彩乐园1??-| www.99206.com-时时彩怎么才能作弊| www.059379.com-吉林省体彩中心站点| www.159858.com-福彩3d乐彩网摘| www.151299.com-彩民乐钱树图| www.62623.com-大通彩票路线入口| www.2199.cm-彩票51中彩靠谱吗| www.cu1.cc-时时彩走势图| www.350121.com-浙江卢某大复式彩票| www.065308.com-彩铅画风景画| www.00ga.com-万豪彩票十博九输| www.ms22.com-彩票几个数字算中奖| www.784878.com-彩6彩票手机客户端| www.868377.com-七星彩规律怎么看的| www.929963.com-彩票3d九宫八卦图| www.977839.com-500万彩票网上| 大赢家彩票www.548611.com| www.968424.com-福建福彩网快3规则| 大玩家彩票www.544559.com|