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.54468.com-最吸引人的彩票群名| www.039932.com-登录福利彩票中彩网| www.206831.com-7乐彩中奖规则| www.291234.com-体彩走势图乐彩| www.373456.com-伯乐彩票平台合法吗| www.562751.com-久彩彩票骗局| www.666978.com-乐彩的骗局-| www.770229.com-七彩捞腌菜游戏下载| www.887236.com-选三型彩票中奖揭秘| www.986984.com-河北省体彩中心地址| www.vu.com-快三是什么赌博游戏| www.og75.com-福利彩票快三改革| www.19bu.com-更多精彩敬请期待| www.0049.org-买哪种彩票奖金高| www.7686.cm-彩汪汪彩票-| www.37896.cc-福彩3d专家点评| www.84299.cc-夫妻幻想彩票分配| www.087315.com-彩票bug-| www.175937.com-快三彩票开挂| www.299090.com-怎样看彩票走势| www.397284.com-昨晚福利彩票号码| www.565865.com-新新彩票下载| www.658979.com-福彩500万交税| www.765929.com-彩之源彩票骗局| www.875069.com-微信足彩群-| www.977011.com-河南出台彩礼| www.cw16.com-手机彩票排名| www.uo15.com-合肥福彩中心| www.27mw.com-怎样手机投注彩票| www.1169.org-体彩术语砍-| www.01859.com-博彩如何对赌套利| www.55656.com-简单水彩画图片| www.98762.cc-订婚就给彩礼钱吗| www.072025.com-乐透彩3d字谜大全| www.144633.com-足彩全买低赔2串1| www.318063.com-会员登录永利彩票| www.393516.com-咸阳体彩店-| www.533812.com-七星彩开奖软件| www.690470.com-50o足彩-| www.772142.com-体彩竞猜网-| www.880729.com-手机淘宝能买彩票吗| www.956207.com-玩彩票能挣钱吗| 世彩堂www.5854j.cc| www.fb92.com-手机黑彩票破解器| www.yf27.com-好彩投可以相信吗| www.28kz.com-全民星彩app| www.2714.wang-彩票秘籍是真的吗| www.8865.date-七星彩好彩哥| www.58860.com-彩票开奖上期结果| www.024755.com-99彩票平台-| www.104061.com-好彩双爆珠香烟味道| www.179366.com-玩快三输钱案例| www.256340.cc-彩乐网下载安装| www.332035.com-快三推荐码-| www.414585.com-彩之云提现提不了| www.773323.com-中国福彩作弊案| www.922786.com-彩色纸箱厂家| www.979283.com-彩烟多少钱-| www.57ww.com-中彩那天课文及生字| www.3066.cm-彩天下登入网站| www.9872.biz-彩票站归哪个部门管| www.71948.com-富民彩票计划网站| www.029890.com-彩经网3d绝杀六尾| www.103007.com-盈利彩票app下载| www.167474.com-快三奖号-| www.268697.com-黑龙江哈尔滨快三| www.352859.com-老汉直击黑彩福彩| www.427928.com-体彩三的走势图| www.520806.com-签到送彩票-| www.586137.com-i8彩票平台代理| www.657775.com-体彩出的什么号码| www.781416.com-哪个彩票网站最正规| www.853742.com-山东专业玩彩| www.913373.com-天天彩票兔兔向前冲| www.42523.com-七星彩彩宝贝走势图| www.379975.com-新浪彩票大厅| www.999197.com-红8彩票网址| www.ga7.com-澳门六星彩开奖官网| www.15579.com-彩铅零基础多练练| www.56905.com-分分彩五星独胆公式| www.019105.com-竞技彩票频道| www.082305.com-四季彩官方下载| www.139430.com-体彩乐透5-| www.209737.com-彩票代理怎么拉人| www.275488.com-苹果系统168彩票| www.391808.com-2019彩市休假| www.498500.com-彩票代打赚佣金| www.563107.com-万彩彩票下载| www.624922.com-51彩票可信么| www.686936.com-中彩那天的词语| www.757654.com-淘彩app网站下载| www.885103.com-家彩网3d排三胆码| www.973859.com-海南七星彩规规律| www.cp1170.com-内蒙快三推荐号码| www.kq40.com-福利彩票中奖概率| www.a24.cc-福彩图片大全| www.21pq.com-彩票属于什么性质| www.526.mobi-中国移动手机彩票网| www.3876.cm-香港星彩网-| www.8747.vip-小炮福彩开奖直播| www.79470.com-微信上玩彩票的女孩| www.025232.com-江西快三江西快三| www.089500.com-快三私人接单有没有| www.146248.com-易网彩票网下载| www.255430.com-个人做时时彩犯法吗| www.319727.com-彩票合买群-| www.381495.com-今天有什么彩票开奖| www.512011.com-超萌小动物彩铅画| www.574722.com-排零五彩票-| www.635651.com-a7彩票-| www.730325.com-包头彩票中奖| www.794219.com-国家反对赌博开体彩| www.860277.com-五分钟时时彩计划| www.914860.com-淘彩网app-| www.969229.com-中神彩下载-| www.sg0.cc-福利彩票数字3玩法| www.oc38.com-玩时时彩稳赚的方法| www.v79.net-沧州体彩中心| www.41il.com-吉利彩票平台网址| www.99hy.com-8828yy彩票-| www.2643.pw-大发快三回血贴吧| www.7467.com-七星彩今天开奖直播| www.17068.com-时时彩平刷王手机版| www.53593.com-福利彩票开奖结查询| www.90180.com-7彩注册链接| www.034699.com-50倍率彩票-| www.187921.com-生肖彩票怎么买| www.247368.com-上海福彩中心| www.307130.com-快湖北快三的走势图| www.365508.cc-福彩群英会手机软件| www.440680.com-彩票店潘攀-| www.519499.com-天天福彩是陷阱吗| www.576809.com-好彩下载官方平台| www.635251.com-时彩有规律吗| www.776109.com-速彩网邀请码| www.851163.com-时时彩推广手段| www.903538.com-星光彩票套路| www.959174.com-河北快三购买平台| 乐点彩票www.ldfc8.com| www.wh8.cc-新加坡快三开奖助手| www.nq35.com-彩票选号大师下载| www.1ot.com-福运来彩票源码| www.44bw.com-什么叫出彩了| www.112.online-彩霸王五点综合资料| www.2512.win-完整版足彩比分直播| www.7072.loan-爱彩11选5软件| www.11825.cc-移动积分换彩| www.45333.com-网上微彩是合法的吗| www.82319.com-彩61是不是正规的| www.024577.com-彩神通会员4码网址| www.082279.com-众信彩票app下载| www.132427.com-彩礼规定不能超多少| www.194866.com-最新彩票-| www.252468.com-彩票揭秘-| www.309074.com-江苏快三中奖率高吗| www.365418.cc-起点彩票app| www.431143.com-现在什么彩票开奖快| www.511498.com-时时彩平刷技术| www.567413.com-苏宁彩票店-| www.620726.com-荣兴彩票-| www.676783.com-酷彩吧哪里可以下载| www.736228.com-彩票平台聊天室| www.793099.com-江苏省福彩一等奖| www.859071.com-筒井彩芽-|