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.118721.com-彩票大乐透预测| www.143393.com-彩运8官网登录下载| www.31529.cc-香港分分彩正规吗| www.379616.com-高频彩票研究的原理| www.762592.com-五分时时彩开奖计划| www.ru69.com-我要体彩31走势图| www.13003.com-体育彩票公益金| www.012626.com-快三中三个号多少钱| www.328780.com-博彩免费彩金| www.573379.com-澳门彩票真人| www.713562.com-全民快三外挂| www.907501.com-胜利彩票登录网址| 500彩票www.620477.com| www.05fz.com-彩铅画用什么笔勾线| www.2656.wang-竞彩几点停售| www.9922.site-乐彩娱乐-| www.146052.com-竞彩篮球奥客网| www.308765.com-澳门彩票投注哪家好| www.984210.com-快三昨天的开奖号码| www.813.mobi-上海彩票站转让信息| www.110496.com-66彩票5616-| www.206398.com-彩票大小单双软件| www.497720.com-快乐中彩票可以信吗| www.632706.com-登录3d彩票网站| www.757299.com-体彩87-| www.919131.com-河南福彩网快3开奖| 13e彩票www.807735.com| www.1686.vip-福彩历史今天| www.35632.cc-七星彩智能选号器| www.096890.com-福彩与体彩-| www.271709.com-彩票app首存| www.430022.cc-快乐彩十分钟开重庆| www.345417.com-彩神通两码金码| www.724233.com-乐彩彩票官网地址| www.177347.com-江苏快三计划软件| www.015169.com-七星彩包码稳赚法| www.306878.com-快三高手群-| www.u42.cn-11选5爱乐彩浙江| www.87793.cc-哪里玩彩票的人多| www.5346.cm-微信彩票竞猜夹娃娃| www.92ot.com-八度彩票-| www.508842.com-福彩东方6十1开奖| www.15058.com-手机彩票网大全| www.2425.in-中中彩之家-| www.xm40.com-彩之家网址-| www.39jk.com-体彩排列三句话| www.0034.online买彩票一组几位数| www.5999.shop-明天的彩票开多少期| www.10792.com-体彩三排试机号| www.52259.cc-爱乐透彩票| www.93368.com-彩色包装箱设计| www.071253.com-足彩培训师怎么考| www.257481.com-破解彩票思路| www.125757.com-彩票店主众筹| www.779544.com-七星体彩开奖表| www.286139.com-全部快三-| www.592491.com-珐琅彩瓷器价格行情| www.835301.com-日税好彩和日免| www.794722.com-今期猛虎报财神彩图| www.916790.com-易盈彩票网站| www.cai6744.com快三走势图吉林省| www.4nr.com-如何看彩票走| www.2035.site-牛彩神网-| www.33619.com-91彩神合法-| www.020362.com-掌游彩app-| www.230560.com-彩运8是正规平台吗| www.328815.com-巴黎人送38彩金| www.65451.com-数字型彩票分析软件| www.dv47.com-老余福彩3d预测| www.zr69.com-时时彩怎样玩稳定| www.pi77.com-辽宁快三开奖号码| www.910768.com-nba篮彩推荐| www.752905.com-重庆福彩开奖号码| www.894890.com-博友彩兼职-| www.954607.com-足彩奖金规则| www.999197.com-红8彩票网址| www.ct94.com-乐迎彩票平台| www.tk93.com-今晚福彩开奖号| www.18vb.com-七乐彩今晚几点开奖| www.9778.com-湖北快三开奖视频| www.98181.cc-体彩6?1-| www.096331.com-牛彩专家-| www.210977.com-安徽快三遗漏号技巧| www.294832.com-体彩排列三最新断组| www.222035.com-挂机软件彩票| www.302219.com-中彩娱乐充值骗局| www.388913.com-福彩3d微信群讨论| www.510496.com-彩虹屁是啥-| www.585735.com-我要中国彩吧| www.667005.com-大学生买彩票判三年| www.750077.com-彩票3d同号预测法| www.827055.com-3分彩怎么算买法| www.898155.com-足球彩票专业术语| www.962633.com-时时彩百变计划在线| 美的彩票www.89338k.com| www.89298.com-手机cp彩票下载| www.085789.cc-够力七星彩奖表画板| www.950737.com-专业玩彩双色球推荐| 众盈彩票www.77996d.com| www.jn78.com-五亿彩票网安全吗| www.zx24.com-彩虹台-| www.22er.com-酷彩吧中奖怎么领取| www.961.hk-各彩种大厅-| www.590395.com-3d彩票试机号今天| www.711099.com-明彩纺织-| www.798411.com-财神彩票有人被骗吗| www.48lf.com-80彩票推广码| www.8639.wang-彩视怎么注册| www.386259.com-四川南充福利彩票| www.026855.com-辉煌彩票骗-| www.146577.com-体彩排列三和值表图| www.750339.com-中彩票a-| www.868551.com-福利彩app靠谱吗| www.981991.com-安徽福彩快3开奖果| www.wp76.com-怎么彩票走势图| www.84wi.com-支付宝不让买彩票了| www.ol53.com-模拟竞彩-| www.0003.site-中国彩票算法漏洞| www.044570.com-江苏快三屠龙| www.21695.cc-体彩店的营销方案| www.595123.com-渐江快三开奖结果| www.783127.com-分分彩怎么坑人的| www.949017.com-福彩平台刷流水| www.ur4.com-预知快三软件| www.u90.com-gf金彩国际-| www.596784.com-123彩票时彩| www.812003.com-福彩造假事件| www.053716.com-福彩三d黄河| www.86622.cc-湖南省福彩中心主任| www.927111.cc-天天彩票人工计划| www.262609.com-吉林快三代理平台| www.527028.com-时时彩三星直选单式| www.1799.vip-高频彩票有盈利的吗| www.832952.com-网易彩票网怎么注册| www.c21.tv-小财神彩票推荐号| www.466419.com-越南6位数彩票开奖| www.3248.org-冠军彩票app| www.25586.cc-正版管家婆彩图| www.97648.com-完美彩票直播聊天室| www.113606.com-下载买彩票双色球| www.331630.com-彩票冷号热号规律| www.445163.com-西安福利彩票站转让| www.568142.com-幸运彩票如何提现| www.666082.com-海南七星彩万字表图| www.813274.com-彩友吧-| www.940377.com-中国体育彩票官方| www.cai0808.com北京快三开奖官网| www.yt28.com-我要中彩app下载| www.70cb.com-彩票双色球推荐| www.0999.org-胜负彩军长推荐| www.137894.com-中国福彩中奖查询| www.223614.com-足彩胜负14场规则| www.287279.com-彩票开奖调用| www.ya42.com-韩国快三走势| www.282388.com-小鹿彩票-| www.021589.com-幸运分分彩走势图| www.138990.com-旧版时时彩宝典下载| www.251213.com-彩8彩票网址下载| www.366834.com-复杂麋鹿彩铅画| www.816520.com-彩票遗漏是什么意思| www.271931.com-中原彩票首页| www.65uw.com-彩票77会被黑吗| www.69895.com-h广西体育彩票| www.234608.com-买彩票就是一个坚持|