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.03856.com-劝人不要买彩票| www.06xk.com-彩铅画大全少儿| www.481323.com-喝彩中华评委方芳| www.778945.com-3d银海彩报-| www.928103.com-彩色复印机印钱| www.340395.com-玩彩代打兼职| www.659160.com-七星彩摇奖机| www.466668.cc-越南彩票种类| www.uo5.cc-广西快三开奖软件| 大赢家彩票平台www.810525.com| www.f48.loan-马来西亚做彩票客服| www.73hf.com-凤凰iii彩票| www.446.net-福乐彩平台正规吗| www.2935.cc-福彩快三倍投计划表| www.01094.com-免费送20彩金棋牌| www.xf41.com-优乐彩网站靠谱吗| www.249678.com-彩票77-| www.062217.com-万彩网彩票-| www.211067.com-福彩三d藏机图| www.388143.com-华彩地产老板是谁| www.526286.com-江西时时彩还有吗| www.607795.com-亚洲杯竞彩预测| www.677842.com-易彩堂开挂器下载| www.752632.com-3d专业玩彩-| www.820093.com-足彩14中9多少钱| www.887679.com-阿里彩票开多久了| www.966597.com-广西快三正规吗| 彩票5www.725422.com| www.538551.com-宝利会彩票平台登陆| www.933185.com-蓝月亮天天开彩| www.972720.com-彩虹六号经典语录| www.595038.com-京东彩票多少能提现| www.744411.com-九万彩票安卓| www.895685.com-今晚4场进球彩对阵| www.984317.com-手机时时彩网投网址| www.ju28.cc-彩票计划软件下载| www.01fp.com-彩票查真伪-| www.00189.com-爱投足球彩票| www.098731.com-pc蛋蛋彩票合法吗| www.254235.com-福彩快乐-| www.358427.com-彩票自动跟单软件| www.957232.com-南国彩票精彩论| www.fo32.com-uu快三稳赚计划| www.16fc.com-新葡萄金彩票| www.4032.org-独家七星彩小七靓码| www.20563.com-blued彩票赚钱| www.86671.com-体彩手游彩-| www.246936.com-中彩堂开奖记录| www.027921.com-彩票o2o-| www.216326.com-彩票双色球玩法介绍| www.365180.cc-中信彩票平台网站| www.525375.com-3d彩票报第三版| www.654496.com-彩22彩票开奖| www.34223.com-面部花草彩绘彩铅画| www.oc62.com-中国体育彩票6+1| www.t44.biz-体育彩票押注| www.331225.com-csw588彩神-| www.878916.cc-彩票号码自动选| www.335656.com-广西快三合法不| www.024594.com-广东体彩网官方网站| www.971434.com-手机下载网易彩票| www.hz45.com-彩票网站排行榜| www.29vh.com-今天晚上福彩什么号| www.136655.com-海南福彩app| www.331394.com-天天彩票软件安全吗| www.505763.com-怎样玩黑彩能挣钱| www.656064.com-彩神争霸玩的人多吗| www.26si.com-万博竞彩软件安全吗| www.1165.pw-彩票经典对联| www.lh08.com-天天中彩官方app| www.9032.cc-七乐彩开奖单式结果| www.43601.com-旺彩超级大乐下载| www.631609.com-购彩网怎么注册账号| www.900866.com-福彩三d东北彩霸三| www.211715.com-民彩网彩票-| www.320362.com-百宝彩app-| www.lv9.com-寻找可靠快三平台| www.30pz.com-周五那种彩票开奖| www.1337.space-彩票双色球字迷| www.05582.com-丽水福利彩票站点| www.86167.com-十一选五快彩助手| www.y61.club-贵州快三开奖规则| www.51bi.com-1分彩什么玩法| 乐购彩www.390366.com| www.207622.com-上海快三下载| www.684781.com-富贵彩票可靠嘛| www.555501.cc-彩票什么算豹子| www.898248.com-足球彩票的区别在哪| www.984062.com-下载手机购彩| www.sb72.com-一分快三怎样抓豹子| www.3251.net-在哪里下载冠彩网| www.42cx.com-融彩网官方下载| www.507727.com-中兴彩票官网首页| www.90eg.com-澳门博彩足球app| www.z20.cn-96彩票-| www.679993.com-福利彩票胆拖投注表| www.756977.com-永成彩票这个软件| www.61uw.com-福彩3d17点和值| www.77sd.com-仙彩竞猜app| www.377007.com-竞彩专家推荐号码| www.06031.com-好彩票app是骗人| www.690068.com-足彩了310星相图| www.6495.xyz-七乐彩专家杀号高手| www.585293.com-赊账打彩票-| www.586569.com-游戏送彩金-| www.253927.com-大发快三作弊app| www.60lh.com-网易彩票为何买不了| www.1645.org-彩票今期开奖结果| www.919068.com-河南快三跨度遗落| www.43ml.com-挂彩的征兆-| www.0221.net-时时彩补天经历| www.6152.xyz-传统足彩派奖规则| www.337169.com-快三加奖公告| www.408656.com-彩礼限高令-| www.623555.com-竞彩猫推荐-| www.691625.com-烟台福彩双色球中奖| www.773135.com-cc极速和彩-| www.858698.com-彩票延迟开奖| www.929602.com-全民星彩官网| www.981811.com-中国福彩中奖号码| www.if69.com-手机能买福利彩票吗| www.471389.com-台湾十分彩开奖结果| www.se26.com-时时彩票走势图| www.084586.com-盈彩网如何注销账号| www.323292.com-篮彩竞猜-| www.470079.com-足球彩票亏-| www.986365.com-福彩金手指报纸| www.gw30.com-中国体彩网官方首页| www.27vd.com-福利彩票怎么兑奖啊| www.1532.vip-湖北福彩投注| www.7238.in-彩票开奖北京kp| www.035857.com-合买彩票广告语| www.144109.com-彩票8软件-| www.41422.com-乐彩赢抢红包| www.81229.cc-福彩3d倍投计划表| www.332248.com-买彩票需要培训吗| www.107931.com-金帝网络彩票| www.594973.com-好彩赢三张下载| www.445955.com-七乐彩出号规律| www.418333.com-盛大彩票邀请码| www.657906.com-福彩彩票机子说明书| www.761394.com-好彩妹是什么意思| www.862122.com-幸运彩软件-| www.951400.com-977彩票aqq-| www.fj06.com-安徽快三单期计划| www.d18.cc-彩票开奖七星彩开奖| www.91ye.cc-网彩何时恢复| www.672715.com-彩票开奖查询三d| www.155808.com-非法经营彩票罪分析| www.561327.com-名人彩票合法吗| www.731038.com-彩票开奖查询141| www.809829.com-财政部彩票最新消息| www.912745.com-彩客网投注靠谱吗| www.972388.com-福彩3d排列三魔图| www.eq86.com-北京快三路线图| www.76338.cc-彩博士软件下载| www.911920.com-网上买彩票怎么判刑| 500彩票www.52072j.com| www.ik10.com-喜中彩-| www.yd22.com-大发快三可以作假吗| www.01lu.com-彩虹红色的象征意义| www.19676.com-一分时时彩技巧| www.007999.com-七乐彩查询中奖结果| www.117863.com-19050期七星彩|