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.396839.com-陇彩宝海报-| www.571730.com-大发快三绝密计划| www.325.mobi-色彩知识基础知识| www.907380.com-vr3分彩开奖历史| www.924916.com-全民快三网址谁知道| www.4634.xyz-体彩买双色球| www.27246.com-体彩门头效果图| www.89475.com-义乌市体彩管理中心| www.085573.com-快三二同号全打| www.041062.com-分分彩稳定长期挂机| www.725607.com-彩票还有真的吗| www.61864.com-金慱彩票-| www.4157.xyz-彩虹剧情分集介绍| www.v33.in-玄武彩票9272| www.90pl.com-网络售彩坐牢吗| www.234955.com-下载福彩软件| www.1972.xyz-58彩票预测-| www.7037.org-竞彩篮球哪个是主队| www.53545.com-彩虹6号视频| www.470312.com-国外买足球彩票网站| www.79874.com-123彩库-| www.093119.com-彩种计划大全| www.309616.com-体彩扑克3跟对子| www.867738.com-七星彩每周几开奖| www.969816.com-福彩买彩票时间| www.in52.com-如何在手机上买彩票| www.661965.com-竞彩足球6串22| www.923214.com-福彩三d今晚开机号| www.987775.com-上海快三精准计划网| www.ck61.com-合肥体彩中心在哪里| www.219452.com-快频的彩票原理| www.5210.biz-彩票113网页| www.04904.com-重庆时彩技巧吧| www.834100.com-焕彩美白精华液| www.947071.com-福彩高频彩有哪些| www.177022.com-三分快三如何回本| www.131256.com-彩礼的起源-| www.828828.cc-98098f彩票网| www.952526.com-时彩是不是合法| www.cp7267.com-微信群里玩快三幕后| www.601211.com-网上买不了彩票| www.774345.com-返利高的彩票| www.940448.com-3d中彩网北斗分析| www.979668.com-12彩票软件下载| www.7049.top-属马人能中彩吗| www.046845.com-爱彩乐专家荐号| www.678255.com-销售体育彩票申请书| www.930250.com-竞彩去哪兑奖| 大赢家彩票平台www.852021.com| www.531813.com-希望买彩票中奖| 中彩网www.61233h.com| www.93ea.com-河内五分彩正不正规| www.4529.top-七星彩19023期| 彩民网www.76520x.com| www.503292.com-鸿彩光束灯-| www.zf00.com-众众彩票入口| www.867353.com-昨晚上体彩开奖结果| www.953225.com-时时彩后二杀号技巧| www.fc28.cc-彩票软件破解下载| www.142174.com-彩票杀龙什么意思| www.838397.com-什么是快3彩| www.66460.com-全民汇彩票官网| www.040097.com-安卓版彩票做号软件| www.5628.xyz-彩虹六号国服要钱吗| www.135090.com-好彩烟价格表和图片| www.284186.com-快乐时时彩正规吗| www.276865.com-三分时时彩正规吗| www.355902.com-手机哪里能买彩票| www.463321.com-118彩图厍-| www.560190.com-kk彩票下载安装| www.pf45.com-快三邀请码-| www.650880.com-天津时彩开奖直播| www.912336.com-大发快三趣客站网址| www.p31.me-三亚彩票私彩| www.cp0318.com-彩票开挂神器| www.220407.com-彩运8怎么看趋势| www.326691.com-昨天彩票出什么号码| www.467862.com-体彩被停机了怎么办| www.107479.com-凤凰彩票辅助器| www.194662.com-快三三不同号多少钱| www.328622.com-免费送彩金游戏网址| www.456744.com-彩奇蛋蛋-| www.790074.com-不中彩票的号码| www.ca38.com-快彩app免费下载| www.95wf.com-中学生玩彩票| www.721137.com-贵州休育彩票网| www.886433.com-90九龙彩票-| www.993068.com-彩票一个数字怎么选| www.ig70.com-互联网彩票倒计时| www.440923.cc-重庆体育彩票兑奖| www.619966.com-碧彩电子秤维修电话| 网易彩票www.093wy.com| www.363051.com-福利彩票多久开奖| www.572676.com-江苏快3彩乐乐直播| www.739549.com-爱乐透彩票网新版| www.368282.com-七彩星百度网盘| www.288985.com-彩神软件在哪儿下载| www.565738.cc-巢湖竞彩网点| www.785065.com-中国福利彩票事件| www.966097.com-发彩网登录-| www.bh71.com-易彩票-| www.3639.biz-苹果版彩票大师必中| www.805817.com-彩票品种-| www.985394.com-彩票竞猜微信公众号| www.91716.cc-好彩3中奖查询| www.717849.com-彩民周刊编辑组专家| www.933356.com-五分快三最最长龙| www.ri37.com-极速快三微信群| www.3809.cc-体育彩票19095| www.nn14.com-老盘任九足彩博客| www.02uv.com-体育彩票竞猜世界杯| www.7487.cm-上海福利彩票店| www.378449.com-幸运彩苹果系统下载| www.853917.com-多彩彩网38116| www.909962.com-一入彩界-| www.968958.com-彩神星光喷绘机| 彩民网www.76520q.com| www.592672.com-彩虹无人机公司待遇| www.668264.com-越南博彩合法吗| www.6836.org-彩乐瀑官网电话| www.108457.com-福彩新彩吧手机版| www.811409.com-福彩双色球直播开奖| www.357432.com-排列三彩民推荐| www.61049.cc-安徽福彩3d-| www.022501.com-彩票大神跟单猫腻| www.jz99.cc-网络彩票破解| www.25408.com-合肥市体彩兑奖地址| www.u56.net-新彩吧3d-| www.877016.com-双色球彩迷网| www.051792.com-万豪彩票官网手机版| www.513907.com-竞彩总进球数技巧| www.591020.com-好彩v2.1.16| www.225009.com-内蒙古快三专家推荐| www.923329.cc-彩票站关门-| www.944481.com-江苏体彩手游彩下载| www.de6.com-湖北快三遗漏| www.59610.com-旧版彩库宝典| www.229120.com-晚晚好彩开奖号码| www.455454.com-福彩3d直选走式图| www.814717.com-福彩2018138| www.995946.com-足彩18086冷热| www.41zm.com-永信彩票下载| www.125607.com-乐透堂今彩讨论区| www.202630.com-贵州最新福彩快3开| www.854816.com-运彩网入口-| www.818621.com-福彩体彩开桨| www.948912.com-3d福利彩票试机号| www.525056.com-聚富彩网站登录| www.52pw.com-鸿彩国际时时彩平台| www.81ba.com-96118彩票-| www.009869.com-分分彩稳定计划| www.ae17.com-今日彩票开奖结果| www.cai5633.com河北福彩三地走势图| www.709618.com-彩票网站诈骗| 彩票5www.550414.com| www.755140.com-乐优炫彩彩票诈骗| www.989407.com-彩票兼职投注给账号| www.57372.com-彩票软件华彩真品牌| www.318727.com-赢发彩票网址| www.hv76.com-乐彩网3d折线| www.xl68.com-彩票123官网| www.06nt.com-兰州体彩11选5| www.757895.com-广东彩票手游彩| www.764258.com-聚彩彩票网平台|