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.558552.com-精彩中国说总决赛| www.238650.com-1305彩票骗局| www.866613.com-昨晚彩票出什么数| www.dy96.com-吉林快三网站盘| www.75sf.com-开奖直播台湾福星彩| www.503292.com-鸿彩光束灯-| www.678311.com-乐彩论坛彩票论坛| www.107001.com-瑞彩祥云高邀请码| www.291392.cc-内蒙古快三今| www.557575.cc-彩宝贝双色球走势图| www.987241.com-体育彩票网站| www.23ql.com-下彩网怎么进不去皮| www.4363.vip-福豪彩是真的吗| www.57048.com-四川丹彩快三| www.077169.com-青海福彩官网| www.256181.com-166彩票网站| www.575930.com-百事可乐彩票网| www.ae08.com-手机彩票网论坛| www.54pu.com-中国移动彩票投注| www.6615.cm-青蛙彩票手机开奖| www.88566.cc-彩票站兑奖会被骗吗| www.178692.com-体彩大乐透玩法| www.380533.com-西安苏宁体彩智慧| www.598723.com-任晓峰买彩票不中奖| www.ox66.com-福彩3d秘籍-| www.4453.cn-尊彩官网是骗人的吗| www.667988.com-福利彩票哪年开始| www.868244.com-uk彩骗局-| 500彩票www.52072n.com| www.0968.cm-高频彩随机怎么赢| www.66895.com-中奖的彩票怎么兑奖| www.158723.com-体彩图谜总汇| www.587081.com-87彩店最新版本| www.721611.com-快三吧-| www.997495.com-快开彩是福利彩票| www.fa67.com-瑞彩网下载-| www.77yi.com-非法卖足彩-| www.25328.com-彩票搜索引擎| www.033759.com-如意彩app-| www.957138.com-红牛彩票计划| www.mq78.com-江茹福彩快3| www.64nd.com-三地彩经-| www.41282.com-买彩票诈骗-| www.035068.com-富象彩票-| www.810608.com-吉祥彩票网登录| www.970015.com-南方双彩网下载| www.687623.com-荣一彩票首页| www.47709.com-上海快三开什么号码| www.85172.com-如何提高彩票中奖率| www.104101.com-体彩排列3预测汇总| www.610.in-彩88官网下载| www.025905.com-七乐彩开奖今日开奖| www.948819.com-好运快三分析预测| www.954296.com-时时彩助手ios| www.6438.com-彩票公司上班| www.cp5800.com-福彩3d和值表| www.523520.com-国外彩票研究| www.83434.com-买彩票英语作文| www.911078.com-k彩真的能赚钱吗| www.32027.com-苹果手机购彩app| www.690683.com-亚洲杯中奖彩票| www.2587.xyz-23彩票平台-| www.63338.com-19039期胜负彩| 旭彩www.756398.com| www.878995.cc-江西快三奖号走势图| www.64800.com-竞彩总进球对冲滚球| www.309559.com-福利彩票是真的吗| www.075546.com-在瑞彩祥云能赚钱吗| www.825749.com-山西大清快三走势图| 幸运彩票www.557089.com| www.49465.com-01cp彩票-| www.956086.com-玩彩心态-| www.862573.com-彩票挂机软件| www.50ox.com-九龙彩票下载安装| 500彩票www.624377.com| www.351589.com-买彩票中一注多少钱| www.6671.cc-上海时时乐开门彩| www.934705.com-gd平台盈彩网| www.66693.cc-丨中国彩吧-| www.sp92.com-时时彩最快开奖地址| www.0236.wang-快三和值金表| www.025697.com-福彩3d好彩网预测| www.730163.com-快三投注计算表| www.874513.com-大乐透彩票开奖号码| www.17rj.com-新浪彩票大厅| www.583608.com-高频彩开奖怎么查询| www.841115.com-化妆品彩妆店铺名字| www.216753.com-南方双彩网走势图| www.333041.com-买彩票中奖技巧| www.811816.com-北单竞彩图片| www.3018.cc-易购彩票网下载| www.932513.com-彩经网彩票预测| www.744453.com-7星彩图片-| www.3006.pw-六禾彩开奖现场报码| www.43427.com-彩票3d开奖直播| www.hs01.cc-新浪足彩直播| www.035656.com-最经典的彩票宣传语| www.3135.cn-开彩吧天下手机快| www.116789.com-彩乐乐杀和值尾| www.785692.com-华彩彩票官方网站| www.5823.cn-竞彩八串一-| www.447443.com-网易彩票网杀号| www.907037.com-彩票投注平台可靠吗| www.894667.com-彩票图怎么看| www.yf27.com-好彩投可以相信吗| www.074718.com-彩富网网站-| www.0vx.com-快三时间段-| www.239361.com-快三是用什么控制的| www.yw04.com-云南省体彩中心位置| www.689595.com-山东福彩群英会玩法| www.30bi.com-湖南福彩新天地| www.133474.com-彩色沥青设备多少钱| www.892107.com-竞彩2串1大奖| www.910056.com-一点通彩吧图| www.30515.com-京东买彩票-| www.473700.com-怎样下载彩之网软件| www.2918.la-福利彩票店好申请吗| www.864439.com-太湖字谜汇总新彩网| www.59221.cc-福彩三d计算方法| www.509853.com-彩票的钱从哪里来| www.681.red-百事彩票极速快三| www.663727.com-篮球竞彩网新浪| www.45692.com-必发彩票app| www.576171.com-杭州福彩网点查询| www.kj29.cc-彩票开奖大乐透中奖| www.b36.net-富鱼彩票app| www.85639.cc-篮彩加时算-| www.163315.com-佩奇彩票网-| www.303612.com-福彩乐透乐论坛首页| www.551303.com-网易福利彩票| www.055578.com-彩票类型带数字的| www.418896.com-广西十分彩快乐十分| www.883805.com-彩票不中改中软件| www.907203.com-快三大小稳赢倍投法| www.058142.com-乐彩吧下载-| www.921328.com-体育彩票中奖图片| www.6165.la-乐盈彩票快三| www.358101.com-破译彩票编程| www.362020.com-描写彩虹下雨的诗句| www.726816.com-乐彩骗局-| www.036553.com-时彩是什么-| www.578963.com-时彩万能码-| www.006164.com-外围彩票网站排名| www.275286.com-极速时时彩开奖结| www.665486.com-彩虹岛游戏交易平台| 惠民彩票www.hm5222.com| www.08255.com-湖南体彩支票| www.381561.com-肥城开个彩票店如何| www.48199.cc-在线福彩是合法的| www.657163.com-体育彩票游戏机| www.111913.com-淘彩app合法的吗| www.26858.com-彩票2元彩-| www.407558.com-三毛彩报3d-| www.775699.com-82期福彩-| www.904629.com-福州体彩中心地址| www.gi07.com-快三怎么研究大小| www.42fu.com-破重庆时时彩规律| www.277582.com-快三游戏手机版下载| www.260368.com-网上快三是赌博吗| www.590050.com-足彩竞彩比分计算| www.777643.com-网络福彩-| www.45dt.com-福彩中心3d魔图| www.27400.com-最新足彩开奖| www.039953.com-中国足彩世界杯玩法|