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.775677.com-张家口体彩中心位置| www.gd85.cc-彩铅画风景图片| www.800020.cc-福利彩票视频彩票| www.4180.vip-七彩国际何明月| www.543257.com-3d字谜牛彩图迷| www.686133.com-福彩3d宗合走势图| www.783050.com-河北省体育彩票总部| www.874159.com-上海快三推荐和值| www.954784.com-今晚彩票开开奖结果| 大玩家彩票www.84499h.com| www.552447.com-彩票开奖排三试机号| www.gm53.com-福彩开奖双色球历史| www.19662.cc-时时彩原理计算公式| www.69741.com-会员登陆彩票| www.905568.com-快三跟计划买靠谱吗| 中彩网www.71233y.com| www.6456.cm-悠悠小站彩票安卓| www.985861.com-中国竞彩官方| www.1699.net-九龙贵宾中彩6码料| www.12954.com-体育彩票61奖池| www.017668.com-中博彩票开奖网下载| www.132109.com-河南的彩礼钱是多少| www.311411.com-体彩十一选五天津| 中国福利彩票www.33588l.com| www.08bu.com-用彩铅画落日晚霞图| www.683065.com-燕赵福利彩票排列七| www.685309.com-工行彩票定投| www.456880.com-恒大彩票官网首页| www.154406.com-微信彩票赚钱跟计划| www.242007.com-彩票2元网电脑版| www.420404.com-中博技术彩票平台| www.584684.com-中国足彩天天竞猜| www.796866.com-快三中奖号码图表| www.990124.com-老快三加奖-| www.rx48.com-运彩8app下载| www.52qc.com-什么是葡京彩票| www.5206.wang-福彩申请流程| www.835216.com-绿好彩蓝莓爆珠| www.mm77.com-彩票预测专家双色球| www.414.date-分分彩走势app| www.800402.com-网络彩票作弊器| www.835291.com-好彩香烟四种口味| www.154833.com-中国足球彩票第一期| www.319591.com-博友彩票安卓下载| www.14228.com-浙江体彩大乐透预测| www.540759.com-崩坏3全彩福利本子| www.735440.com-乐透彩票官网| www.874657.com-浙江快乐彩开奖结杲| 500彩票网www.65707f.com| www.d85.top-128彩票网app| www.733.gg-重庆彩和值走势图| www.8965.net-旺彩双色球应用| www.892748.com-成化珐琅彩-| www.236349.com-彩乐乐网没了| www.489860.com-2345彩票导师| www.jd7.com-彩票平台刷流水骗局| www.589860.com-竞彩资讯中国足球网| www.254932.com-网络彩票有哪些平台| www.048226.com-福彩3d布衣天下图| www.209528.com-福彩排列五-| www.349234.com-体育彩票收藏| www.543756.com-彩吧彩报第4版| www.738012.com-快三下注技巧| www.874415.com-七t星彩开奖结果| 博友彩www.875957.com| www.22mu.com-网上哪个彩票平台好| www.6863.in-亚太好彩四味爆珠| www.11468.com-17彩票网靠谱么| www.55509.cc-北京微信快三群| www.775230.com-生肖码属于什么彩票| www.pl36.com-今日福彩3d舟全图| www.836797.com-世界杯如何推广竞彩| www.950061.com-禁止出售彩-| www.90qk.com-必威体育博彩| www.080.me-爱心彩官方下载| www.138177.com-北京时时彩计划网页| www.528044.com-网彩外挂-| www.0886.online江苏快三网上卖| www.847654.com-河北体育彩票排列5| www.969638.com-精彩音乐汇-| www.go21.com-分分快三投注技巧| www.872735.com-蒲城彩票店转让| www.940607.com-中国彩票中奖号码| www.984704.com-大发云系列彩票| www.eb59.com-彩票500网-| www.vb43.com-大赢家快三合法吗| www.019841.com-彩之星下载-| www.637.red-黑彩票网站大全| www.5254.vip-优彩彩票官方下载| www.922458.com-北京足彩分析师招聘| 爱心彩www.axc5.com| www.8749.biz-七星彩梦码书| www.52183.cc-高频彩赚钱大低| www.70pf.com-乐博28彩票-| www.32ry.com-2月22号七星彩| www.184.org-中国福彩18年销量| www.2730.net-赢钱彩下载苹果版| www.7829.cn-职业彩民牛人| www.22652.com-七星彩机选五注| www.62282.cc-大赢家彩票开奖| www.005518.com-福彩3d走势图| www.063531.com-辽宁彩票非法兑奖案| www.150667.com-彩票8官方安卓| www.212885.com-431彩票-| www.005464.com-快三开奖福建| www.126315.com-爱玩彩票官方| www.024252.com-南京福彩中心地址| www.6572.top-今晚彩票3d开奖图| www.933068.com-网赌时时彩会作弊么| 大众彩票www.984688.com| www.yb78.com-锋彩直播-| www.82at.com-竞彩足彩盈亏指数| www.7877.in-吉林快三庄家输钱| www.102696.com-时时彩平台信誉| www.183022.com-大发和彩-| www.262539.com-彩九下载安装| www.335129.com-乐彩网骗钱-| www.397018.com-体彩排列三万能四码| www.502680.com-678彩票网最新版| www.559450.com-福彩7位数中奖规则| www.620564.com-靠谱时时彩代理群| www.675897.com-温州595万彩票| www.733793.com-福彩多久开奖一次| www.805316.com-济南彩色护栏管| www.873016.com-快发彩票app| www.936388.com-足彩唯彩会姜山冷门| www.984853.com-博赢彩票骗局| www.cp903.cc-北京快三app| www.jr23.com-新3d彩票合法吗| www.yv67.com-中彩网香港-| www.426141.com-体彩的藏机图| www.qg81.com-好彩蓝莓双爆好抽吗| www.2jl.cc-彩票现在多少钱一注| www.47vl.com-彩票技术书-| www.373893.com-520彩票平台官网| www.525518.com-时时彩后三组六组三| www.636137.com-彩虹六号墨冰的标志| www.874745.com-亚博彩票站-| www.968087.com-6188彩票骗局| www.93979.com-500足彩完场比分| www.057800.com-玩彩人杀码-| www.209192.com-甘肃福彩快三助手| www.271035.com-好彩3怎么才算中奖| www.02227.cc-正规官网彩票网站| www.55998.cc-快三多少个号码| www.98812.cc-竞彩足球赔率计算器| www.127015.com-体彩排列3开奖号码| www.190210.com-彩票口诀大全| www.256827.com-彩票天天中彩软件| www.332894.com-五百万彩票网官网| www.405458.com-彩票合买保底赚钱| www.87yf.com-成都彩涂板| www.10000.cc-国际极速彩票| www.sw27.com-七星彩中奖规定图| www.31sq.com-彩票星期天几点开奖| www.88606.com-新乐彩app下载| www.659647.com-体育彩票准直播| www.079616.com-老彩民彩票-| www.158407.com-竞彩专家分析推荐| www.499.tv-赛车彩票怎么玩| www.017433.com-易旺彩票怎么样| www.007300.cc-福利彩票店转让合肥| www.855050.com-彩宝网首页彩票| www.948045.com-牛彩专家-|