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.38586.cc-娱乐城送18彩金| www.978471.com-皇元彩票平台登录| www.hq56.com-微彩网是真的吗| www.18wm.com-亿彩天虹软件下载| www.21661.cc-彩票app是骗局吗| www.98438.com-分分彩计算-| www.141384.com-体育彩票三十六选七| www.583552.com-官方彩app中文版| www.952824.com-福建福彩网开奖| www.716257.com-体彩金码关注码| www.894611.com-福利彩票图片大全| www.52gb.com-彩无敌官网-| www.387548.com-体彩排列3专家预测| www.620219.com-竞彩技巧亚盘分析法| www.369475.com-福利彩票走向| www.136042.com-梦想网彩票-| www.314493.com-老盘足彩胜负分析| www.68584.com-苏州体彩竞彩店转让| www.071993.com-收单彩票-| www.182326.com-老盘足彩-| www.299038.com-七星彩小说免费阅读| www.116025.com-新手买足彩-| www.973428.com-彩虹宝宝第一集| www.5585.pw-套彩什么意思| www.821822.com-福利彩票无票兑奖| www.155651.com-五百万彩票网址| www.304377.com-江苏快三技巧教学| www.204049.com-护理彩票5d-| www.61354.com-什么是网络售彩| www.126194.com-亿发彩票安全么| www.097990.com-2018万彩吧-| www.11631.com-乐乐彩是官方的吗| www.26923.com-新浪乐彩走势图表| www.279889.com-5分时时彩开奖| www.m77.cc-彩客彩票007官网| www.89540.com-快乐彩票被封了| www.36oe.com-百万彩票方言下载| www.2503.org-51彩虹手机版登录| www.17890.com-彩票三位数开奖| www.134798.com-缅甸好彩双爆一包| www.118535.com-礼拜天体彩开奖吗| www.61477.com-乐迷炫彩ios| www.228444.cc-濮阳县彩礼规定| www.121981.com-马云彩票店-| www.522143.com-时时彩龙虎计划大师| www.123631.com-福彩3d不变的秘密| www.276398.com-湖北快三怎么追豹子| www.363664.com-10个数字的彩票| www.336279.com-6开彩开奖结果查询| www.461274.com-体彩种类介绍及图片| www.581358.com-福彩哪个app靠谱| www.669683.com-五位数的彩票是哪种| www.788399.cc-足彩19050吧| www.56706.com-彩票吃票跑路什么罪| www.00hc.com-彩色生肉无遮挡大全| www.661783.com-福彩十二生肖网站| www.787922.cc-体彩十一选五任选一| www.901509.com-网上彩票哪里能投注| www.987133.com-辽宁快三每天多少期| www.c16.com-易彩娱乐测速| www.8ct.com-顶呱刮彩票技巧| www.0334.top-玩彩网是合法网站吗| www.371399.com-彩票站转让合同无效| www.243993.com-广西福彩app下载| www.cn3.com-时时彩怎么玩都是死| www.xj44.com-鑫彩网彩票推荐| www.059848.com-最新福彩3d攻略| www.723.website时时彩任选二怎么玩| www.884737.com-澳客大乐透彩票网| www.666213.com-航天彩虹股票牛叉| www.19vb.com-彩仙阁app-| www.8456.cm-福彩3d和值点| www.68ps.com-世界杯博彩在哪里买| www.4216.cm-七彩海棠是真的吗| www.15705.com-零基础学彩铅方法| www.28db.com-491彩票社区| www.309383.com-开一家彩票店赚钱吗| www.389308.com-堆彩葫芦的工艺流程| www.567524.com-多彩贵州航空怎么样| www.691553.com-500万彩是真是假| www.778243.com-一分钟快三走势图| www.889422.com-我要购买双色球彩票| www.958436.com-广东口袋彩店二维码| 亿发彩票www.802533.com| www.mu74.com-官方彩票平台有哪些| www.618451.com-最近的体彩店在哪里| www.700318.com-优信彩票在线登陆| www.770017.com-55彩票网站平台| www.845613.com-体彩竞彩比赛时间| www.1904.cc-多彩贵州航空招聘网| www.636763.com-带彩虹的儿歌| www.954960.com-排列三破解彩票漏洞| www.ru13.com-彩票3d论坛中彩网| 顶尖彩票www.234279.com| 大赢家彩票网www.544086.com| www.ym33.com-体育彩票查询大乐透| www.5099.cm-霸气的彩票群名| www.947756.com-58福彩是真的假的| www.65bh.com-微彩国际骗局揭秘| www.757725.com-长春彩溢-| www.892922.com-全民彩官网下载苹果| www.965621.com-香港福彩门户资料| www.cai5552.com快三怎样看走势| www.88zy.com-7728彩票平台| www.2976.xyz-特区七星彩彩票论坛| www.727677.com-山东福彩开奖结果| www.516291.com-多彩网彩票注册网址| www.5462.cn-上海福利彩票赚钱吗| www.797655.com-彩民彩票软件正规么| www.379273.com-足彩工作室招聘信息| www.bh2.com-湖北精彩十分3d| www.0754.bid-8k易彩-| www.976443.com-玩彩彩票网-| www.vu4.com-三分快三最新开奖号| www.vw48.com-一分钟快三在哪玩| www.033695.com-正规网上彩票| www.5188.pw-天津体彩即开型彩票| www.9140.pw-新浪体彩网-| www.507791.com-老徐说彩下载| www.596824.com-四亿彩票官方| www.710403.com-彩票台子大全| www.789199.com-澳洲三分彩人工计划| www.675176.com-体彩刮刮乐如何兑奖| www.61616.com-中华彩票网址| www.28ob.com-幸运五星彩开奖官方| www.57304.cc-彩票手机投注app| 红旗彩票www.897743.com| www.j42.xyz-福彩今天开什么号| www.f23.org-支持提现彩票app| www.500611.com-高频彩票网站| www.us30.com-今天内蒙古快三走势| www.019386.com-贵阳彩民中奖| www.13173.com-彩票大奖中奖结果| www.32048.com-易彩堂的邀请码| www.128743.com-河北省福彩20选5| www.188169.com-江苏快三最新遗漏表| www.399055.com-尊彩上做兼职可信么| www.607607.cc-彩票中奖领奖时间| www.709766.com-充钱带玩彩票骗局| www.810985.com-六爻3d测彩票| www.930746.com-中彩网双色球论坛| 盈利彩票www.372839.com| www.252085.com-中彩网恢复买彩票了| www.96500.com-竞彩彩票是正规的吗| www.61877.com-金多彩彩票网| www.wk32.com-天天中彩网-| www.03sj.com-济南体彩-| www.238352.com-彩易福彩3d字迷| www.302911.com-宁夏快三50期| www.981153.com-旺彩双色球科学预测| www.cp6055.com-3d福彩-| www.539023.com-众乐彩票能相信吗| www.0031.live-荣华彩票官方网站| www.13xw.com-小小鱼版一彩吧图谜| www.30dy.cc-彩铅画简单风景画| www.16hj.com-幸运彩改版-| www.714.tv-重庆时时彩稳输规律| www.590877.com-彩礼三金是什么意思| www.669277.com-彩票有哪几种软件| www.733715.com-乐彩双色球字谜| www.216562.com-福彩老师-| www.626643.com-大优彩票app下载| www.971074.com-幸运彩app安卓版| www.279597.com-极速时时彩假|