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.245975.com-易彩快三能赢到钱吗| www.11fx.com-中彩股份app| www.232968.com-五百万彩票网资讯| www.622250.com-九彩-| www.085908.com-五星中彩票-| www.u96.cc-石家庄体彩转让大包| www.7572.win-香港开彩现场直播| www.22936.cc-福彩三地三天必下| www.590155.com-好客彩网站-| www.879740.com-精准团队彩票计划| www.81851.com-中发彩票怎么赚钱| www.910.me-没有彩排作文| www.260319.com-彩票也是赌博| www.686926.com-中彩那天作者简介| www.795595.com-天天彩平台-| www.886614.com-民彩网下载-| www.979853.com-恒大彩票下载安装| www.el3.com-北京快三开奖详情| www.rf90.com-彩种多的彩票平台| www.93176.cc-玩快三怎么赚钱| www.088669.com-黑龙江福利彩票网| www.581208.com-购彩票软件哪个好| www.607967.com-云南福彩双色球开奖| www.97575.cc-陕西宝鸡彩礼钱排行| www.247756.com-数字型彩票黄金定律| www.731983.com-河南省渑池县彩礼| www.846155.com-彩票神人王成周采访| www.958124.com-福彩3d未出号码| 网易彩票www.560629.com| www.899598.com-快三二同怎么看| www.120232.com-澳门五分彩平台| www.079582.com-广州佛山快三查询| www.815605.com-福彩排列五的玩法| www.897029.com-八八彩票捷豹| www.973004.com-手机彩库宝典| www.fj2.cc-时时彩正规平台注册| www.yn83.com-大奖快三开奖结果| www.1735.org-鸿彩公-| www.8725.wang-彩票双色球推荐号码| www.51391.com-体彩幸运赛车走势图| www.534355.com-一分彩走势图怎么看| www.38139.cc-彩4343us-| www.663865.com-北京7星彩-| www.742205.com-湖南体育彩票电话| www.811977.com-香港天天彩票246| www.879526.com-高频彩票赚钱方法| www.953188.com-新加坡乐和彩网站| YY彩票www.yy63.com| www.5682.cn-福彩3d杀两码组合| www.234162.com-网络彩票害惨的案例| www.397016.com-用手机买张彩票| www.261319.com-彩八彩票下载| www.210363.com-福彩61走势图| www.687237.com-竞彩即时比分直播| www.811401.com-体彩选号技巧| www.893200.com-时时彩在线过滤缩水| www.967451.com-彩票群聊名字| www.eg04.com-百姓彩票是不是假的| www.p59.net-香港快三下什么软件| www.54kk.cc-98彩票登录路线| www.99711.com-北京市福利彩票官网| www.365758.cc-彩铅自学哪本书好看| www.609502.com-龙岗区体彩店转让| www.763466.com-买排球竞彩-| www.904067.com-江苏省福彩网| www.989019.com-微彩站官网下载安装| www.43vh.com-我挂彩了什么意思| 五星彩票www.5xcj.com| www.km96.com-广州快三查询| www.81180.cc-昨体彩中奖号码| www.105342.com-福建快三今日走势图| www.188259.com-江苏快三奖金规则| www.259519.com-时时彩手机开奖软件| www.331260.com-贵州快三计划网页| 天天彩票www.106576.com| www.991030.com-126网络彩票| www.ge11.com-彩迷网下载-| www.yz38.com-快彩彩票平台| www.32qn.com-彩票2019个税| www.0499.cm-怎么申请福彩投注点| www.5797.pw-博信彩票-| www.3vl.com-顶呱刮彩票售卖机| www.685707.com-730彩票-| www.008856.com-彩票走势图接口| 500彩票www.613591.com| www.579044.com-金祥彩票官网网址| www.140080.com-基诺型彩票破解| www.8392.xyz-m8cp彩票-| www.421255.com-竞彩代理-| www.006985.com-彩票开奖助手下载| www.526812.com-时时彩任选二怎么玩| www.49du.com-七彩开头的词语接龙| www.3640.vip-福利彩有多少个号| www.01491.com-意彩国际官方信誉盘| www.114247.com-大发彩票手机版本| www.737468.com-快三送彩金的| www.868644.com-易彩集团可以赚钱吗| www.931666.com-众盈网彩票安全吗| www.980457.com-广西手机福彩门户| www.cp531.com-彩客站合法吗| www.22118.cc-足彩分析师app| www.621922.com-福彩3d开奖号| www.700210.com-玩彩高手3d预测| www.795970.com-全彩网八仙过海| www.896049.com-安卓版彩票做号软件| www.yh78.com-淘宝可以买彩票吗| www.559709.com-七星彩从一到几| www.988.red-六位数字是什么彩票| www.301946.com-七星彩今期的神算子| www.426075.com-玩时时彩返点设置| www.521410.com-今日买彩票什么数字| www.543558.com-理性购彩-| www.647777.com-体彩七彩星中奖结果| www.901408.com-福彩勇士争先玩法| www.962167.com-彩涂铝卷价格| 500彩票www.535350.com| www.hx33.com-广西一分钟快三| www.192112.com-彩票河南快3| www.293608.com-河南体彩841| www.358867.com-中彩网微博-| www.933149.com-众信彩票信誉怎样| www.987117.com-立彩助手苹果版下载| www.bu98.com-经彩网老版走势图| www.pw02.com-太阳彩票骗局| www.0xd.com-众乐快三-| www.49zv.com-福彩彩吧图-| www.391698.com-大乐透体彩算法| www.26738.com-巨彩汇有诈骗行为吗| www.307198.com-彩票中奖兑换时间| www.792303.com-彩票店领奖额度| www.xr96.com-重庆中彩票大奖案例| 500彩票www.50026p.com| www.83817.cc-七星彩百万位杀号| www.681777.com-909彩票下载安装| 亿彩堂www.87668n.com| www.dx06.com-90彩票-| VIP彩票www.393937.com| www.78378.cc-福彩3d万能5码| www.92113.cc-顺丰彩票安卓版| www.462818.com-排列三天吉彩票| www.20lb.com-体彩排列玩法| www.47094.com-订婚钱和彩礼钱区别| www.88631.com-苹果版ee彩票| www.032921.com-七星彩今晚开奖号码| www.523687.com-重庆时时彩杀号神器| www.162161.com-彩乐汇是黑平台吗| www.548917.com-澳门快三彩票| www.651470.com-万家彩票官网| www.746668.com-台湾五分彩走势图| www.858509.com-福彩快三跨度走势图| www.987310.com-手机购彩安装| www.as57.com-上海快三预测与推荐| www.536756.com-福彩幸运宝石| www.273002.com-中国福利彩票票种| www.356464.com-竞彩输钱能赢回来吗| www.89us.com-如何打好竞彩| www.4873.biz-布衣银海彩报| www.882435.com-易彩票安全吗| www.cp9737.com-快三计划追号盈利表| www.876607.com-体彩五d几点开奖| www.970214.com-全民中彩票吧| www.cp0570.com-一分快三计划网| www.6089.me-彩票人工计划原理| www.152930.com-11选5私彩平台|