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.108906.com-彩票概率计算器| www.237925.com-官方手机买彩票软件| www.315916.com-七天彩下载网址| www.382359.com-穷人坚持买彩票对吗| www.616303.com-竞彩3串2几场容错| www.686916.com-中彩那天词语| www.770879.com-买彩票彩票选号码| www.905951.com-创彩网是真的吗| www.968467.com-新加坡彩票怎么买| www.dh33.com-分分时时彩技巧实战| www.wd48.com-购彩吧下载-| www.16tv.com-秦皇岛福彩快三| www.469.cc-青岛福彩郑庄养老院| www.4603.top-双色球能在体彩买吗| www.03621.com-中福彩票中福快3| www.52861.com-彩控app-| www.99636.cc-足彩310报纸周六| www.069036.com-01彩票真的能赚钱| www.140078.com-彩票777www| www.220457.com-中彩网买彩票靠谱吗| www.298506.com-体彩标准店图片大全| www.369546.com-福彩论坛网-| www.468261.com-冠军彩票是真的吗| www.557692.com-牛彩网双色球字图| www.629585.com-赢钱彩网站可信吗| www.701027.com-足彩通官方下载| www.782243.com-凤凰彩票钱提不出来| www.864596.com-人人红彩票老版本| www.934399.com-佳缘彩票托的套路| www.990519.com-爱彩通app下载| www.em.com-快3彩票玩法| www.og36.com-快三快赚是真的吗| www.9zh.cc-网络快3彩票怎么玩| www.67vr.com-三d开机号彩吧| www.1047.vip-安徽快三和值跨度表| www.10762.com-鑫彩网下载-| www.51355.cc-广东体彩网大乐透| www.89817.com-彩票界动荡-| www.053256.com-福州体彩转让| www.191763.com-高清快三图表| www.267681.com-广西快三360| www.390976.com-手机投注七星彩| www.532105.com-彩票大乐透破解方法| www.625036.com-苏宁易购彩票app| www.688414.com-四季彩可以提现吗| www.768758.com-彩票彩金发放网站| www.947424.com-pc蛋蛋彩票骗局| www.991411.com-大公鸡七星彩奖表| www.cp9565.com-中彩网提现是真的吗| www.nk83.com-免费彩票平台送30| www.7sw.com-微彩怎么充值| www.65rl.com-彩票直通车合法吗| www.0731.date-中国福利彩票邀请码| www.8600.in-彩31网官方网址| www.39077.cc-7彩阳光广播体操| www.84731.com-欢乐十分彩是真的吗| www.037057.com-免费彩票缩水软件| www.137831.com-七星彩模拟选号器| www.211892.com-彩票彩客电脑版| www.283197.com-体彩彩种-| www.399151.com-足球彩票排名前十名| www.520664.com-江苏体彩位数| www.590046.com-dd彩票邀请码| www.858410.com-足彩跟单-| www.915805.com-彩票店加盟要多少钱| www.977670.com-足球彩票心得| www.oj26.com-吉林市福彩上哪兑奖| www.v46.org-彩吧3d图谜-| www.50mo.com-易彩国际客服电话| www.695.tv-美人鱼彩票骗人| www.4433.bid-足球彩票好的app| www.9645.cn-凤凰彩票外挂| www.71530.com-山东省福彩中心位置| www.029876.cc-567彩票手机乐园| www.103104.com-彩票追冷-| www.165896.com-河北快三开奖结果| www.267517.com-彩票倍数表-| www.349368.com-合肥福彩中心墩塘| www.427292.com-哪里下载足彩软件| www.522489.com-智多星时时彩计划| www.587875.com-竞彩足球手机彩票网| www.657088.com-澳门彩票公司| www.777793.com-中彩网3d开奖数据| www.863992.com-vip123彩票-| www.925845.com-常德快三秒奶茶店| www.980126.com-海南彩票网-| www.tr6.com-湖北快三怎么玩稳赚| www.qu03.com-于海彩票案后续| www.95.me-地下六仺彩开奖资料| www.64mm.com-福彩3d雪莲定尾| www.0119.net-哪个网络彩票安全| www.7754.cm-胜负彩最新伤停| www.22975.cc-王者彩票是合法的吗| www.62929.com-彩客胜负过关| www.028782.com-中国彩吧布衣图库| www.100101.cc-百宝彩湖北11选5| www.159080.com-博瑞彩票平台| www.258635.com-中国足球彩票| www.325344.com-精彩十分推荐号码| www.390034.com-星期二彩票开奖查询| www.525510.com-博彩足球平台出租| www.602492.com-中国福秒彩票开奖| www.668605.com-手机娱乐彩票| www.734365.com-3d凤彩网预测| www.800827.com-福彩3d天天开奖| www.869071.com-百盈快三预测计划| www.971469.com-幸福彩票手机报| www.dc23.com-达人彩票合法吗| www.th55.cc-体彩时时彩玩法规则| www.6np.com-彩票智慧管家| www.53dj.cc-彩票体验金账号| www.738.net-今天的足彩竞彩对阵| www.4096.tv-珐琅彩瓷器图片| www.8861.loan-全天重庆彩在线预测| www.69733.com-金凤凰福彩3d| www.024996.com-真锅彩介绍-| www.092194.com-今天的湖北快三| www.148017.com-众购彩票下载| www.245493.com-易彩彩票快三| www.309129.com-qq群买彩票赚钱| www.368127.com-刚力彩芽靖国神社| www.448683.com-开彩票站怎么提成| www.530088.com-湖南体彩大乐透论坛| www.645768.com-胜负彩手机新浪1网| www.719616.com-福彩3d报纸图在哪| www.788352.com-彩云国数据七星彩| www.853876.com-时时彩做庄会赢钱吗| www.910828.com-探探彩票托的套路| www.971307.com-体彩排列五中奖结果| www.vd4.com-福彩30选7-| www.ob97.com-掌上七天彩彩票官网| www.w06.cn-彩票欲出几率| www.39yy.cc-七星彩500特| www.853.hk-海南七星彩铁公鸡| www.4130.xyz-彩虹6号官网| www.8686.site-体彩七星本期号| www.51580.com-大发快三是不是真的| www.89478.com-浦东彩票销售点| www.033699.com-易彩彩票网怎么下载| www.128164.com-买彩票投一倍| www.191727.com-256彩票app| www.251065.com-爱彩彩票下载地址| www.317078.com-中华彩票网开机号| www.375214.com-名彩论坛-| www.525562.com-网易彩票预测网| www.597236.com-亿发彩票坑-| www.658353.com-我中啦彩票网关停| www.741576.com-730彩票黑了我| www.801728.com-w600彩票-| www.863787.com-快三中一注多少钱| www.914193.com-体彩快三下载软件| www.966892.com-福建快三直播| 吉利彩票www.66376x.com| www.cx51.com-百盛博彩app| www.rj95.com-各种釉彩大瓶赏析| www.02mk.com-放彩虹屁-| www.57cy.com-福彩中心加盟电话| www.590.live-有人玩澳洲时时彩吗| www.3534.vip-送彩金导航栏| www.8156.cm-彩之网3d相年富图| www.24601.com-水溶性彩铅画技法| www.61256.cc-11选5旺彩助手| www.061925.com-彩客网可以提现吗| www.127785.com-彩虹岛2腾讯手游|