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.864353.com-乐彩客-| www.975328.com-时时彩怎么分析跨度| www.cp716.com-安徽体彩十一选五| www.809990.com-高效办理的体育彩票| www.880415.com-喜乐彩票开张结果| www.955165.com-黑客攻击彩票数据库| 彩乐乐www.3005x.com| www.82nn.com-七星彩怎么分位| www.748601.com-中彩娱乐的二维码| www.1pt.com-福彩门户手机网址| www.86of.com-和乐彩票平台| www.089756.com-买中国体育福利彩票| www.373360.com-8亿彩新版下载| www.952941.com-七彩彩开奖-| www.5023.biz-河北快三11和值| www.120704.com-网上彩票投注提现| www.293683.com-彩票南京-| www.kx74.com-快三36期开奖号码| www.x15.net-今晚七彩奖开什么| www.68md.com-彩宝平台怎么样| www.4770.biz-彩虹六号版本| www.031625.com-彩票开奖漏洞破解| www.290540.com-彩宝网排列三走势图| www.2189.cm-下彩网下载-| www.8910.cc-今日竞彩比分神单| www.39098.com-500wan彩票-| www.04kq.com-城市风景彩铅画| www.822879.com-体育体育育彩| www.921691.cc-彩神软件是干吗的| www.995226.com-足彩冷热指数怎么算| www.vi73.com-湖北福彩网公告| www.466926.com-动物彩票开奖走势| www.303420.com-优乐彩票手机版下载| www.500238.com-最近体彩站-| www.587029.com-天福彩票网址| www.713726.com-彩票单双怎么算| www.806666.com-易彩票攻略-| www.925786.com-彩富网资料同大全行| www.fp3.com-时时彩2星走势图| www.989.hk-体彩有哪些种类玩法| www.202762.com-贵州彩票11选五| www.635418.com-七彩阳光视频全集| www.916256.com-入侵私彩数据库| www.311943.com-3号彩票注册| www.5291.net-海南七星彩机选| www.63312.cc-田伟足彩推荐今日| www.681256.com-赌博与彩票有何不同| www.905004.com-赢彩网江苏快三| www.1057.wang-体彩双胆独胆| www.65xg.com-福彩站点申请网上| www.4945.cm-迷彩兔网站-| www.30117.com-8彩平台-| www.418878.com-高频彩票直播频道| www.25fv.com-全天重庆彩火山计划| www.eg5.cc-快三彩票是坑人的吗| www.320130.com-福彩今天的开奖号码| 博通彩票www.694050.com| www.030767.com-大大中彩票在哪下| www.201326.com-七星彩技巧口诀| www.300061.cc-彩票分分快三app| www.366178.com-五彩斑斓的黑原版| www.448673.com-大乐透一等奖彩票图| www.561424.com-今天彩票3d推荐号| www.639766.com-东方秒秒彩平台| www.754529.com-想买彩票买什么号码| www.003697.com-722彩票网-| www.079046.com-官方大玩家彩票| www.266885.com-众彩之家下载| www.619107.com-今晚彩票开奖结杲| www.912985.com-网易彩票大乐透预测| www.ag70.com-6698彩票网-| www.38gn.com-彩名堂手机赛车计划| www.3186.cn-api彩票源码| www.29323.com-苹果体彩软件| www.a89.com-永利彩票平台怎么样| www.91681.cc-炫彩打字联盟骗局| www.121057.com-大发快三口诀表| www.198409.com-传统彩票网站| www.793396.com-打彩票赊账-| www.561200.com-彩票008资讯版| www.662819.com-国彩在线是骗局吗| www.771576.com-时时彩app平台| www.855989.com-新西兰快三查询| www.912923.com-彩票公司合法的吗| www.969174.com-福彩公益金标志| www.cp1987.com-福彩3d试机号今天| www.te03.com-北京福彩快三怎么玩| www.13dn.com-可以去伯乐彩票玩吗| www.2079.cn-乐视彩票开奖| www.137647.com-彩票驿站-| www.442201.com-腾讯分分彩定胆方法| www.529691.com-彩吧网开机号| www.037605.com-彩神计划软件怎么样| www.121449.com-找彩票导师带赚| www.192391.com-甘肃省体彩11选5| www.129901.com-体彩大乐透购买技巧| www.369640.com-七彩乐单式开奖查询| www.524996.com-乐透型彩票指标算法| www.665973.com-今天开奖彩票是哪种| www.8483.com-云彩厅合法吗| www.71502.com-网上彩票赚钱真假| www.993698.com-希腊十分彩下载安装| www.630700.com-冰蓝薄荷爆珠好彩| www.1119.in-比利时5比2彩票| www.801362.com-好乐多彩票是真是假| www.177064.com-三分快三怎么看规律| www.013931.com-七星彩跨度振幅| www.9068.cm-头彩官网下载| www.678359.com-永辉彩票网站| www.771707.com-美团彩票机合法么| www.900379.com-粤淘彩票app| www.981885.com-贵阳体彩兑奖中心| www.hb90.com-福利彩快8app| www.201490.com-在手机上购七星彩| www.974900.com-公务员买彩票违法不| www.82og.com-足球比分直播足彩网| www.td58.cc-国彩app下载| www.198950.com-福利彩票怎么算中奖| www.514865.com-网上买七星彩怎么买| www.570238.com-下载好彩客-| www.30kl.com-昨天晚上福彩出什么| www.9936.cc-竞彩足球比分直墦| www.53671.com-中国竞彩网点分布| www.923251.com-彩票店如何吞票| 人人彩票www.rrle7.com| www.zm52.com-竞彩二串一稳胆推介| www.2648.org-彩票为何停售一小时| www.9258.site-彩票培训师那里有| www.247546.com-江苏快三投注软件| www.353615.com-彩票现场开奖视频| www.jc53.com-足彩比分直播5oo| www.cn73.com-彩界联盟安全吗| www.825004.com-一直播好彩频道| www.881519.com-电竞博彩下载| www.970934.com-给中国福彩中心留言| 爱彩www.235925.com| www.ff43.com-什么彩票网站最安全| www.709629.com-五亿彩票可靠吗| www.826119.com-体彩2元网走势图| www.920198.com-gg彩票app-| www.979243.com-好彩香烟多少一包| 大赢家彩票平台www.817336.com| www.90mz.com-即时彩票下载| www.007580.com-体体彩-| www.022301.com-彩票网恋骗局| www.61686.com-彩票字谜总汇大全| www.fi46.com-中国体彩网官网| www.307419.com-韩国金山快三计划| www.401896.com-七星彩2019书| www.590904.com-彩客彩票推荐| www.739338.com-大象彩票网-| www.20xv.com-买什么彩票可以赚钱| www.4581.cc-彩票有哪些好| www.377167.com-体彩有关的对联| www.436155.com-中国投彩网-| www.739799.com-今天福彩图纸| www.917207.com-彩88彩票诈骗| www.995554.com-购彩之家为什么关了| www.md89.com-快三算法教程| www.am30.com-怎么看快三走势图| www.8735.xyz-威信彩票官网| www.573885.com-买彩票那个平台好| www.699270.com-比较靠谱的竞彩平台| www.812593.com-福彩3d中奖难啦|