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.74il.com-福利彩票双色球九| www.8513.biz-时时彩稳赚不赔方案| 彩客博www.8667d.com| www.625357.com-彩票客服电话号多少| www.717937.com-彩票店报刊亭| www.799810.com-四川福彩领奖规则| www.894664.com-体彩购彩流程矢量图| www.963251.com-彩钢板多少钱一平米| 大玩家彩票www.195090.com| www.io95.com-特彩吧免费报码| www.009801.com-彩友会彩票平台| www.786.name-彩票的复式计算公式| www.6267.vip-彩票3d万能五码| www.197786.com-彩票里的屠龙| www.024351.com-彩票500开奖结果| www.91240.com-好彩爽爆-| www.665650.com-七星彩上期中奖地区| www.740377.com-盛彩彩票平台怎么样| www.811864.com-双彩到上虞多少公里| www.912150.com-我去彩票-| www.977432.com-世界杯彩票中奖规则| www.ek87.com-幸运快三代玩| www.xw30.com-彩票大乐头开奖时间| www.66kf.cc-彩票长期7码| www.lo70.com-快三中一倍有多少钱| www.w58.org-京东能卖彩票么| www.56ur.com-长沙特立路体彩店| www.660.in-时时彩开奖网易| www.5235.space-荣鼎彩网页版| www.34631.com-众彩网程远杀码| www.950466.com-手机福利彩票怎么买| www.cd96.com-伯爵彩票登录网站| www.816647.com-北京快三购买| www.915177.com-彩票挂机吧-| www.981884.com-体彩七星彩一等奖| www.bx97.com-江苏快三和值口诀| www.121088.com-彩票站微信群| www.27766.com-三四五福彩-| www.217221.com-彩客彩票老版| www.303519.com-唯彩会彩票下载安装| www.00dy.cc-全国彩票开奖查巡| www.78xh.com-彩名堂下载计划软件| www.771042.com-菠萝时时彩预测专家| www.927068.com-530彩票-| www.985109.com-时时彩预测家| www.ha7.cc-彩报-| www.598161.com-分分时时彩一码技巧| www.cp8883.com-快三开奖如何查询| www.376344.com-怎么算3d彩票和值| www.546103.com-彩票机的纸怎么装| www.614379.com-极品三彩翡翠图片| www.679472.com-可乐彩票-| www.750362.com-盛兴彩票龙版| www.812189.com-福彩的要领-| www.878748.com-福彩积分卡网| www.29hi.com-昨晚福彩出什么奖号| www.121.tv-网易彩票人工客服| www.700132.com-最新竞彩足球网站| www.804272.com-彩票站点能买世界杯| www.881321.com-青海福利彩票19期| www.959770.com-凤凰彩票c978| www.cai2759.com安快三开奖结果查| www.rj85.com-大运河彩票怎么样| www.36kp.com-七星彩走势表| www.057.in-高频彩票都是骗人的| www.qz83.com-360快三走势图| www.307.pw-中福网彩票注册| www.67ts.com-时时彩后二64稳中| www.jb45.com-北京快三输-| www.3098.vip-下一次彩票开奖日期| www.493838.com-搜索福彩3d-| www.589322.com-南国体彩七星彩图规| www.674364.com-福彩双色球开机号| www.758196.com-网上彩票计划可靠吗| www.850587.com-孝感福彩中心地址| www.923963.com-贵烟好彩多少钱一包| www.pk26.com-竞彩怎么判断冷门| www.782896.com-贵州人中彩票大奖| www.906644.com-福利彩票都有哪些| www.998324.com-最正规的彩票app| www.sh32.cc-网上极速时时彩假吗| www.25lx.com-彩票利益-| www.1110.me-福彩3d单式开奖| www.bm69.com-彩61是骗局吗| www.xw90.cc-赠送好友彩票| www.29nb.com-株洲福彩中心地址| www.056.in-彩宝app苹果版| www.3066.cc-四场进球彩的玩法| www.949217.com-3d彩票预测论坛| 6号彩票www.666405.com| www.894872.com-福彩3d彩票论泇| www.983181.com-澳门赌博技巧彩票| www.fq80.com-彩神之霸ll-| www.ys59.com-云南省体彩中心地址| www.20xc.com-彩票网页制作| www.0474.cn-亚洲彩票能赚钱吗| www.7350.vip-福彩公益金济宁| www.87990.com-三分钟时时彩| www.08ww.com-体彩31开奖结果| www.538.in-英皇时时彩网站| www.5527.in-m5彩票app-| www.9896.cm-掌游彩app下载| www.885136.com-三d体彩试机号| www.iz26.com-辽宁福利彩票网| www.107716.com-今天足彩胜负对阵表| www.965382.com-快三444-| www.fk61.com-时时彩下载500万| www.b65.club-易彩堂彩票-| www.61bo.com-3d彩字谜图谜总汇| www.1359.top-快乐彩被骗-| www.176516.com-分分快三技巧规律| www.162586.com-大运彩票网址多少| www.582048.com-乐玩彩app-| www.848826.com-竟彩唯胜素-| www.913195.com-电子版彩票指南报纸| www.969303.com-梅州彩民中奖新闻| www.gm60.com-河南快三必中技巧| www.wa36.com-御彩轩计划软件| www.373825.com-好彩肚包鸡-| www.14yl.com-黑龙江福彩网彩票| www.ak13.com-360彩票走势图| www.wy03.com-520彩票网-| www.40qk.com-港彩奇人网址| www.66595.cc-中国体彩网竞彩| www.128442.com-重庆福彩网刮刮乐| www.730097.com-新彩网3d字迷| www.864062.com-今天体彩开奖号码是| www.670.mobi-重庆福彩客服电话| www.714227.com-b8彩票怎么样| www.804057.com-福建体彩音乐聊天| www.878963.com-幸运二分彩-| www.89688.com-4月足彩赛程| www.13io.com-青海百宝彩票| www.158001.com-竞彩足球用什么软件| www.260315.com-彩票就是赌博| www.274360.com-彩票11选5怎么玩| www.246422.com-91彩神是真的吗| www.058600.com-快三网页版-| www.147307.com-彩票163-| www.233681.com-汇彩app-| www.290004.com-内蒙古福彩快时时彩| www.9114.loan-彩民之家提供香港| www.52322.com-查体育彩票开奖结果| www.021255.com-彩天下平台开户| www.958484.com-七星彩开奖公开结果| 68彩票www.68682b.com| www.355782.com-开彩票店要纳税吗| www.432833.com-36期的7七星彩| www.2479.cc-彩友多彩民版| www.8956.online逆袭彩票计划| www.44220.com-彩吧图库小军第四版| www.92211.cc-彩票复式球如何计算| www.188182.cc-上海快三走势| www.312208.com-七乐彩专家杀号| www.74020.com-双双体彩字谜| www.5751.biz-美狮彩票软件| www.376763.com-福彩家彩网-| www.701144.com-福彩通下载-| www.777834.com-博友彩票正规合法吗| www.956995.com-彩票是否真的能破解| 盈彩www.yc7701.com| www.071759.com-体育彩票店现状| www.99gj.com-明天快三有豹子吗| www.758832.com-彩票加盟代理找谁|