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.6550.org-时时彩三胆技巧| www.60882.com-福星中彩天下彩| www.133506.com-七彩石原石-| www.226641.com-旺彩网-| www.317744.com-福彩三d合值走势图| www.403658.com-彩礼用来干嘛的| www.523719.com-77彩票网官方网站| www.668994.com-幸福彩频道双色球| www.763200.com-北京时时彩的骗局| www.876255.com-彩票大神跟单| www.960088.com-彩票站为啥不能贷款| 600万彩票www.187512.com| www.ks10.cc-福彩快3计划群| www.s69.me-柳州市福利彩票中心| www.63yj.com-彩票销售时间| www.1380.cc-购彩平台老品牌| www.11899.cc-乐乐彩票是什么| www.62362.cc-全民福彩网站网址| www.037152.com-彩票缩水软件有用吗| www.133418.com-江苏快三开奖列表| www.219006.com-248彩票app-| www.301267.com-万彩吧c8cn高手| www.381963.com-点击精彩进入| www.549657.com-足彩胜负彩如何购买| www.646739.com-彩民之家036| www.748228.com-中彩平台能出款吗| www.833015.com-彩票摇号机作弊| www.911959.com-彩票刷彩金-| www.974086.com-快三怎样选和值大小| www.00ea.com-描写彩虹品质的诗句| www.81ak.com-体彩福彩全国开奖| www.2762.wang-唐山福彩网-| www.8896.org-大乐逶杀号彩乐乐| www.65594.com-如何选彩票号码| www.035172.com-立彩彩票官方版| www.129760.com-彩票3月24-| www.217776.com-彩票端快三骗局| www.298660.com-qq彩票在哪里| www.380888.com-qq彩票交流群群号| www.546256.com-如何在体彩机上装纸| www.642503.com-重庆福彩抽奖结果| www.739393.cc-福利彩票头条app| www.822779.com-店铺彩友-| www.900389.com-淘彩票软件-| www.973288.com-盛大彩虹岛手游内测| www.ee70.com-彩票刷负盈利技巧| www.xu94.com-陕西快三开奖结果| www.25vw.com-老挝博彩打工可靠吗| www.0064.cc-24小时快三-| www.7109.vip-96购彩-| www.018462.com-众赢彩票的骗局揭秘| www.128062.com-体彩11选5有假吗| www.219922.com-北京快三交流群| www.309952.com-江苏省体彩兑奖地址| www.393028.com-彩铅画竹子画法教程| www.614078.com-吉林快三13和值| www.694990.com-竞彩足球比分直播现| www.779270.com-彩票开户ok168| www.863312.com-十六号体彩中奖号| www.936386.com-麒麟彩票app| www.995110.com-大乐透彩票兑奖规则| www.ae01.com-福利彩票开开奖结果| www.tk02.cc-炫乐彩票是赌博吗| www.11qo.com-彩票自带聊天室红包| www.88av.com-体育彩票税钱| www.2704.org-体育彩票的基本知识| www.8837.vip-福彩快三注册邀请码| www.76625.cc-快三守号怎么赚钱| www.029603.com-内蒙古今天快三结果| www.112907.com-分分彩预测软件下载| www.185779.com-快三能赚钱吗| www.261290.com-宁夏快三今日开奖| www.395628.com-东方彩票客服qq| www.509528.com-彩宝网排五走势图| www.582748.com-体彩屋生成邀请码| www.660401.com-购彩v是骗局吗| www.786058.com-双色球彩票兑奖时间| www.853746.com-玩彩乐网-| www.908944.com-7c彩票-| www.972681.com-彩虹世界新版app| www.jj04.com-福彩3d彩票论坛| www.f88.site-华人彩可以赚钱吗| www.964669.com-竞彩管房网比分直播| www.gr29.com-好彩1预侧-| www.c16.club-彩票专家人工计划| www.25dx.com-7f彩票-| www.3013.vip-彩的谜语-| www.jq52.com-彩神x破解版| www.12tv.cc-南方双彩网走势大全| www.197.live-环彩网网址-| www.4096.me-清乾隆釉彩大瓶| www.9969.tv-百度彩票查询| www.98813.cc-足彩m串n奖金计算| www.069513.com-财神讲彩专栏| www.138742.com-新2彩票下载| www.219946.com-好运快三-| www.291571.com-玩快三赢钱了| www.365162.cc-广西体彩中奖怎么兑| www.455966.com-手机彩票怎样不输钱| www.548421.com-易彩3的规律| www.706080.com-广州发彩公司| www.782068.com-彩票的理论与思维| www.858647.com-福彩3d360-| www.921522.com-彩礼是什么意思| www.983034.com-博彩彩票平台下载| www.3169.win-大通彩票登陆| www.8986.bid-凤凰彩票的老板| www.47587.com-辽宁省福彩3d走势| www.97wo.com-中国第一彩票大案| www.6886.org-博彩软件刷流水| www.31879.com-谁有彩神邀请码| www.76054.com-彩票纸有人收吗| www.027109.com-078彩票合法吗| www.103624.com-用手机买彩票安全吗| www.177497.com-国家福利快三| www.252577.com-中彩网网站-| www.326767.com-彩票几位数如何中奖| www.401168.com-全民彩票官网登陆| www.647349.com-体体彩排列三| www.733962.com-彩迷推荐-| www.806717.com-五分彩票公式规律| www.878572.com-体彩排五中奖规则| www.972804.com-彩铅蝴蝶兰-| 大赢家彩票平台www.973776.com| www.lc21.com-购彩是啥-| www.e80.net-彩票816网站| www.34jq.com-体彩七星几点开奖| www.979293.com-福体彩开奖话题页| www.cp7665.com-彩票破解软件手机版| www.vq20.com-快三黑红码如何判断| www.16rn.com-中彩票是什么感觉| www.549.xyz-怎么登陆优乐彩| www.4057.cm-粤彩实战报纸彩图| www.9184.cc-网上买彩票可以挣钱| www.63683.cc-175500乐彩网| www.021100.com-老谢说彩3d推荐| www.089352.com-6618彩票app| www.152196.com-新②彩票网-| www.257152.com-快三正规吗-| www.326884.com-香港天下彩票资料| www.391673.com-易迅彩票是什么| www.529792.com-东方亮彩出大事| www.607091.com-福彩现场直播教育台| www.671981.com-买彩票概率计算公式| www.743188.com-388345购彩网| www.813577.cc-贵州快三派奖奖金| www.883123.com-多彩投众筹是否合法| www.987188.com-彩迷是什么化妆品| www.cm9.com-北京福彩今日快3| www.ms46.com-中国快三app下载| www.w00.biz-3d彩民乐钱途| www.44jl.com-足彩6场半全场胜负| www.288.cc-七星彩三字定多少钱| www.4202.cn-七彩汇娱乐手游下载| www.9874.pw-足彩销量查看| www.75031.com-竞彩软件哪个好| www.021893.com-福彩快三是否合法| www.085969.com-彩票反水网站| www.138844.com-卖彩票提成是多少| www.205602.com-快三开奖结果网易| www.269670.com-彩票1888安卓版| www.396576.com-星期四开什么彩票| www.506279.com-彩票ddcc-| www.567124.com-中彩网论坛社区|