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天

知道了
彩39彩票安卓 www.874419.com-七大乐彩开奖结果| www.5862.xyz-易购娱乐时时彩代理| www.205332.com-内蒙古体彩兑奖中心| www.156621.com-网上彩票代理赚钱么| www.272566.com-809彩票官方网站| www.361515.com-新万达彩票-| www.474591.com-彩名堂快三聊天室| www.567236.com-旺旺彩票网下载| www.654455.com-万博彩票app| www.800847.com-福彩3d今天开机号| www.879880.com-百事彩票app| www.952011.com-k彩联系客服登录| 500彩票www.50052j.com| www.hw95.com-贵州快三查询| www.218266.com-吉林快三儿走势图| www.325730.com-内蒙福彩双色球中奖| www.400381.com-福彩三d字谜专区| www.44fz.com-网友叫我买彩票| www.904038.com-京东彩票app下载| www.967172.com-彩票条形码破损了| www.ck66.cc-中国体彩网开奖查询| www.us75.com-彩投美女骗局| www.00hk.com-中国彩票趋势图| www.319287.com-星彩代刷网-| www.424868.com-体育时时间彩开奖| www.543080.com-买彩票真的能中奖吗| www.622236.com-福彩彩报-| www.692316.com-高频彩接口-| www.768681.com-福彩之家下载| www.844137.com-福利彩票公益事业| www.908291.com-福彩怎样才算中奖| www.968842.com-一彩网app-| www.cp5800.com-福彩3d和值表| www.68152.cc-新彩吧图谜字谜| www.621019.com-掌优彩票计划的软件| www.811919.com-百度一下彩票开奖| www.976470.com-168彩票开奖记录| www.8254.cm-彩票的骗局有哪些| www.76752.com-竞彩中心套利| www.085555.com-网上买彩票能发财吗| www.222473.com-手机购彩哪个安全| www.313105.com-038彩票预测| www.540069.com-适合跳快三的歌曲| www.164059.com-优乐娱乐彩票| www.737779.com-体彩360下载版| www.346150.com-彩神v封号-| www.973242.com-彩虹快刷-| www.hy11.com-福彩3d和尾走势图| www.155741.com-彩票30期号码| www.000449.com-加拿大有几种彩票| www.130095.com-055hcc福彩网| www.285976.com-亚洲彩票安全吗| www.398481.com-兰州彩票店-| www.358741.com-体育彩票6加1规则| www.535444.com-彩票生肖动物| www.415004.com-彩盈线下娱乐| www.558018.com-彩票北京pk10| www.684307.com-彩票代投是骗局揭秘| www.817383.com-七七彩票犯法吗| www.943300.com-易盈彩票的真实性| www.hl4.com-五分快三屠龙是什么| www.888344.com-257彩票-| www.33897.cc-五分快三真正技巧| www.179.website彩c788网站-| www.26950.com-6个数字破解彩票| www.020407.com-c38彩票-| www.587523.com-用奇门测港彩实例| www.903610.com-天福彩票是黑彩吗| 淘彩票www.tcp969.com| www.484411.com-化妆品彩妆套装| www.4049.xyz-彩票77苹果版下载| www.467357.com-七乐彩的中奖| www.87677.com-买彩票害害死我了| www.125812.com-众购彩票网导航| www.258758.com-青海福彩中心| www.a63.top-3号彩票下载安装| www.655993.com-彩票软件是否合法| www.xe04.com-福彩三d谜语| www.388732.com-谷歌分分彩开奖原理| www.559622.com-幻彩曲棍球小游戏| www.695718.com-彩票网站源码下载| www.777451.com-ag彩数据彩票名站| www.5021.org-九鼎彩票网是真的吗| www.63pz.cc-快3彩-| www.j17.net-今天快三一百期| www.155.la-彩虹周杰伦写给谁| www.dj20.com-七星彩千位杀码公式| www.523582.com-微信群赌博时时彩| www.547773.com-最赚钱的时时彩软件| www.329856.com-体育彩票双色球预测| www.b31.vip-01彩票正规吗| www.0509.cn-精彩网站-| www.17930.com-聚星彩票-| www.91088.com-彩票返水最高的平台| www.078365.com-福利彩票那个安全| www.133349.com-彩钢瓦围挡效果图| www.211909.com-彩客站是真假| www.781741.com-彩票怎么交税的| www.860990.com-香港五分彩开奖结果| www.dt82.com-福建福利彩票官网| www.825404.com-陆慧明足彩-| www.58445.cc-8彩票网址-| www.894932.com-时时彩助手-| www.962328.com-湖兆快三预测三同号| 500彩票www.50788b.com| www.mk90.com-时时彩预测专家| www.155445.com-福彩3地丹东图谜| www.49226.com-安然彩票专栏| www.k58.vip-彩神快三技巧| www.349799.com-人们是否应该买彩票| www.450625.com-梦见黄牛彩票| www.548854.com-彩6邀请码-| www.080807.com-老彩票uu直播| www.036919.com-足彩怎么买稳赚不赔| www.54ay.com-贵州买彩票外省兑奖| www.150001.com-幸运中彩票-| www.293128.com-易彩娱乐官网| www.467258.com-足彩开奖公告开| www.628600.com-千福彩票网址| www.773293.com-重庆时时彩庄家控制| www.930899.com-用哪个网买彩票安全| www.304989.com-11选五彩票专业版| www.518047.com-双色球彩指南电子报| www.687091.com-肉蒙快三走势图| www.799251.com-奔驰彩软件-| www.935205.com-彩之网3d相年富| www.sa78.com-彩票投资骗局揭秘| www.577014.com-河南福利彩票幸运一| www.654549.com-彩票轨迹方法| www.722825.com-快三砍龙是什么意思| www.789585.com-竞彩001历史数据| www.849646.com-腾讯分分彩基本规则| www.899395.com-甘肃体彩领奖| www.953502.com-好彩紫色爆珠多少钱| www.995055.com-香港五分彩走势图| www.nd9.com-湖北快三查询| www.ln31.com-网络福彩快3犯法吗| www.k00.org-福彩3d中心彩报| www.635923.com-c35彩票下载| www.696484.com-新浪爱彩彩果| www.757855.com-中彩网怎么挣钱| www.874150.com-中国彩票销售| www.934789.com-e乐彩在线登录| www.980077.cc-体彩店装修风格| www.cai1211.com快3彩票开奖号码| www.95774.cc-体彩什么时候发行的| www.365308.cc-有彩金送的彩票网站| www.562003.com-鸿彩平台彩票| www.318144.com-北京快福彩快三| www.397200.com-福利彩票投注计算| www.39446.com-盛兴彩票e乐彩| www.71jb.com-福彩20选5山东| www.89894.com-彩吧助手3地走势图| www.106550.com-足彩有哪些玩法| www.348533.com-7f000盈彩网址| www.999.club-6位数买什么彩票| www.214199.com-国家足彩培训师考试| www.287683.com-彩票合买的优势| www.462289.com-万吧彩-| www.188698.com-快三龙的规律| www.553376.com-快三如何躲避长龙| www.765307.com-七星彩小精英| www.911237.com-线路测试k彩| www.iy32.com-最新福彩开奖号码|