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.607836.com-福利彩票东方七乐彩| www.989471.com-乐彩走势图-| www.761004.com-足彩十四场开奖信息| www.874769.com-彩票数字变化规律| www.974612.com-体彩排列三精选列表| www.ea5.com-青海快三规律破解| www.sr26.com-河北快三里的秘密| www.24jz.com-好彩投28官网| www.520.me-世界杯彩票玩法介绍| www.2112.org-七乐彩42期-| www.17638.cc-足彩竞猜赛果| www.95021.com-福彩内部号的qq号| www.076229.com-易彩网抢红包活动| www.vw70.com-37彩票平台| www.111279.com-福彩3d彩吧图迷| www.229363.com-网赌快三背后控制| www.369744.com-3d彩票几点封盘| www.685120.com-3d福彩官网下载| www.882321.com-345彩票骗局| www.615646.com-玖玖发彩票-| www.606747.com-世界杯足彩彩票| www.728074.com-彩票销售截止时间| www.892667.com-广东彩票app下载| 盈彩www.890702.com| www.550670.com-淮阳县彩票中奖| www.639702.com-移动彩票靠谱吗| www.718091.com-体育彩票快乐扑克4| www.807558.com-福彩3d守号可以吗| www.879466.com-多乐彩玩法-| www.949140.com-传统彩票-| 红鹰彩票www.hy6931.com| www.12mi.com-九州彩票怎么样| www.216851.com-内蒙古快三遗漏号码| www.065846.com-私彩大平台排行榜| www.131126.com-彩礼额度-| www.076694.com-六福彩票app| www.653123.com-动态澳彩足球赔率| www.819363.com-竞彩秘诀-| www.916386.com-卖私彩会被判刑吗| www.984071.com-99彩票官方-| www.5595.pw-彩票到家店主版| www.33415.com-爱彩快三-| www.005055.com-腾讯分分彩最笨买法| www.111684.com-一分快三长龙记录| www.199058.com-天津体彩十一选五| www.285433.com-能跳快三的歌曲| www.nv17.com-买黑彩票属于赌博吗| www.45vz.com-彩漂剂的作用| www.668722.cc-库彩宝典-| www.98762.cc-订婚就给彩礼钱吗| www.442155.com-双彩求开奖-| www.832727.com-七彩图画-| www.38881.com-旺彩娱乐官方注册| www.004923.com-3d绕胆图彩之网| www.259657.com-快三计划免费软件| www.359994.com-购彩顺口溜-| www.6485.me-全民彩票是什么意思| www.111959.com-500go彩票-| www.670046.com-台湾四星彩開獎记录| www.610396.com-新手买彩票那种好| www.831720.com-超级车彩票app| www.963654.com-彩乐乐双色球专家杀| www.59tj.com-竞彩计划真的盈利| www.5668.gg-大丰彩票网9.9| www.13131.com-竞彩足球每天赚| www.99235.cc-连玩彩彩票-| www.691501.com-绝对可靠的彩票开发| www.760563.com-好彩36选3开奖号| www.321730.com-迅盈快三软件下载| www.7255.in-好运五分快三计划| www.134223.com-体彩26期-| www.600800.com-彩票可以买一年的么| www.811683.com-手机太子彩票怎么样| www.974562.com-众彩平台下载专区| www.jn36.com-被网上彩票诈骗| www.88.org-下载彩票彩吧助手| www.935398.com-下载彩票777| www.644812.com-多多中彩票是真的吗| www.305390.com-彩票守号会中吗| www.2qm.com-最便宜的彩票多少钱| www.212070.com-快三提现是真的吗| www.293266.com-易彩一彩民福地测速| www.761639.com-竞彩足球竞彩版官网| www.883527.com-乐佳商城彩票| www.982982.cc-彩玉海棠图片| www.lj44.com-中彩网网址关闭了吗| www.059895.com-天天彩票集团| www.45303.cc-福彩网是什么性质| www.657864.com-彩票电子走势图安装| www.111966.com-京go娱乐是彩票吗| www.188552.com-中国福彩快开彩| www.478511.com-深圳体彩电话| www.018175.com-乐赢彩票是骗局揭秘| www.76530.com-什么人能中彩票| www.819596.com-能直播刮刮彩嘛| www.jh33.com-app发彩网-| www.1zp.com-彩霸王心水论诖| www.68zr.com-青岛福彩中心官网| www.22640.com-彩杏官方网站| www.006778.com-七星彩直播开奖现场| www.532080.com-美术作品图片彩铅画| www.607234.com-时时彩下载安装| www.744062.com-收购中奖彩票| www.cp8183.com-快三倍投方案稳赚| www.64482.com-红彩app可信吗| www.032828.com-福彩三d彩报| www.354422.com-双彩网双胆3胆| www.13228.com-竞彩足球在线买| www.699721.com-中国足彩网资讯| www.020681.com-彩票坊靠谱吗| www.965416.com-中国福利彩票预测| www.373927.com-中国河南省福利彩票| www.657424.com-2元彩票网首页| www.53318.cc-北京五分时时彩| www.319265.com-百度彩票中奖公告| www.939145.com-苹果699彩票网| 8号彩票www.60108q.com| www.444078.com-顺盈彩票苹果版| www.539052.com-微投彩票平台| www.520664.com-江苏体彩位数| www.904631.com-福州体彩中心在哪里| www.c23.net-爱彩乐开奖-| www.67dj.cc-太原体彩转让信息| www.860217.com-奥客彩票wan| www.943455.com-百姓彩票是黑彩| www.988716.com-时时彩可以改号码| www.aa37.com-福建体彩官网走势图| www.4246.org-27日开奖体彩| www.31637.cc-中福在线是什么彩票| www.891933.com-今日彩app坑人吗| www.958964.com-国外彩票中奖号码图| 购彩在线www.66332p.com| www.cw34.com-彩票注册送268| www.qz01.com-打快三有赢钱的吗| www.808801.com-体彩大乐透百度贴吧| www.0314.vip-2019彩票发展| www.19518.cc-福彩三地魔鬼图| www.91622.cc-日本好彩好抽吗| www.05qb.com-福彩今日试机号码| www.0521.vip-天天购彩票pc蛋蛋| www.vd32.com-智慧彩票官网| www.fw07.com-中央对福彩作弊| www.955667.com-四虎彩影-| www.8278.biz-陕福彩快乐十| www.75536.com-西赵口彩吧早报1| www.281451.com-时时彩后三直选和值| www.382335.com-做时时彩挂机软件| www.951835.com-app幸运快三| www.wd67.com-甘肃省福彩-| www.794545.com-手机赌博玩分分时彩| www.69ii.com-聚乐彩jlc-| www.37221.com-重庆中国体育彩票| www.575020.com-彩票计算器复式中奖| www.811019.com-算卦可以算彩票| www.951439.com-今日足彩分析预测| 福运www.fyyy8.com| www.190950.com-彩票快3技巧口诀| www.276615.com-全天重庆彩五星计划| www.357801.com-爱乐透彩票正规的吗| www.418700.com-澳客彩票网是合法| www.17bo.cc-玩彩票700万彩票| www.0063.xyz-竞彩足球网易预测| www.2654.vip-时时彩定位杀号| www.092566.com-河南农村彩礼多少钱|