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.263871.com-陈赫彩票中奖号码| www.vw87.com-快三辅助软件下载| www.n84.com-彩票怎么查-| www.18028.com-我要发彩网手机版| www.696664.com-买私人彩票违法的吗| www.88592.cc-微彩娱乐app官方| www.067723.com-那个彩票平台信誉好| www.144137.com-竞彩打水软件| www.0120.top-彩色是指什么颜色| www.35159.com-腾讯彩票负责人毛涛| www.930930.cc-大马彩今天开奖成绩| www.597135.com-福彩3d大小是什么| www.663831.com-时时彩程序软件源码| www.869862.com-彩票开奖现场视频| www.965157.com-彩经网北京快3| www.oe8.com-体彩11选5走势图| www.63116.com-体彩任选五玩法| 彩经彩票www.40484.com| www.732526.com-宝赢彩票软件靠谱吗| www.a05.top-大通彩票app下载| www.67th.com-竞彩258足球直播| www.1482.pw-k彩娱乐官网| www.29eg.com-牛蛙彩下载-| www.5116.vip-金龙系统彩票| www.191070.com-内蒙快三分析| www.68su.com-乐彩商城怎么提现| www.056535.com-河北彩票开奖详情| www.645633.com-法贝热彩蛋不见的| www.780488.com-腾讯彩票竞猜| www.876543.cc-彩票玩死三兄弟| www.952779.com-官方九州彩票| www.4736.biz-凤凰彩票怎么回事| www.229727.com-大发快三是国家彩票| www.gt24.com-大中华彩票app| www.19xy.com-博汇彩票是不是假的| www.6196.xyz-湖北快三计划大师| www.815962.com-香港福彩大全百度| www.984190.com-福彩字谜解太湖字谜| www.142146.com-中国福利彩票什么玩| www.76ir.com-宝盈彩票开奖走势| www.17429.com-20选5彩票网| www.163969.com-六给彩票香港马报| www.327312.com-新浪体育彩票电脑版| www.06674.cc-排列五体育彩票| www.391988.com-体育彩票营销计划书| www.259612.com-玩黑彩快三输8万| www.339374.com-彩思乐-| www.149858.com-甘肃快三最新规则| www.796366.com-盈彩彩票怎么进不去| www.111249.com-御彩轩新版手机| www.662032.com-熊猫彩票能赚钱吗| www.952546.com-广东好彩2开奖结果| 500彩票www.911096.com| www.103547.com-广东彩票-| www.293615.com-江苏福彩‖体彩| www.425460.com-七彩冰淇淋做法大全| www.547667.com-彩票对打套利的问题| www.616209.com-体彩服务号-| www.688185.com-体彩电子投注单| www.918871.com-有多少人玩大地彩票| www.cp101.com-幸运快三投注技巧| www.468.cm-大型彩票中心| www.601499.com-亿元彩票网站靠谱吗| www.761630.com-足彩中奖查询| www.969341.com-i8彩票计划稳| 500彩票www.924377.com| www.62jl.com-福彩坊是骗局吗| www.72912.com-北京福彩app| www.815571.com-福彩p3开奖结果| www.885126.com-七彩网骗局-| www.999331.com-170彩票网网址| www.dl75.com-体彩大乐透玩法介绍| www.799773.com-注册送白菜彩票| www.198777.com-彩票玩法介绍大全| www.728580.com-快三彩票老师微信| www.75zu.com-福彩3d天罡八卦| www.3212.biz-879彩票平台| www.289891.com-vr彩票是什么| www.323275.com-篮彩竞猜比分直播| www.80ou.com-哪个彩票网址可靠| www.3739.org-海南七星彩研究论坛| www.259888.com-福利彩票随机选号码| www.374518.com-新浪手机彩票中心| www.556972.com-网购彩票是否合法| www.618234.com-体彩丹东彩吧| www.679079.com-时时彩手机平台网| www.760658.com-南粤风采好彩3查询| www.848859.com-中国彩票真吗| www.910814.com-篮彩让分胜负玩法| www.965405.com-97彩票下载-| 梦想彩票www.33112n.com| www.fa26.com-体彩开奖福彩| www.0945.cc-中国福利体彩大乐透| www.892640.com-体育足彩怎么买| 博乐彩票www.35918r.com| www.vk02.com-彩票三d-| www.58913.com-够力七星彩票奖表| www.770004.com-lbkeno快乐彩| www.68828.com-体彩选号-| www.26776.com-贵卅快三一定牛首页| www.882832.com-七星彩走势讲解| www.972325.com-彩色铅笔风景画教程| www.ji4.com-河北快三术语| www.nu45.com-购买私彩属于赌博吗| www.767272.com-快速彩票倍投资金表| www.861614.com-彩宝贝开奖查询| www.944747.com-附近哪里有体彩店| www.997251.com-鳄鱼彩票福彩3d| www.ad41.com-彩票开奖大厅今天| www.900450.com-彩票在线-| www.967145.com-3d中奖彩票图片| www.cp999.cc-广西好运快三走势图| www.967556.com-澳门彩票足球合法网| www.cai965.com-快三赌博案例| www.ix63.com-2019年彩票休市| www.wz66.com-下载个福利彩票助手| www.57185.com-快八彩票下载| www.019486.com-贵州省彩票兑奖地址| www.349554.com-周一能买什么彩票| www.4672.vip-彩票最多买几期| www.53291.cc-118彩票网投平台| www.198551.com-精彩十分怎么玩法| www.6ip.com-彩票中了一个数| www.873087.com-500万彩票时时彩| www.949999.com-彩票概念新华网| 彩乐乐www.cll168.com| www.ex48.com-uu快三秘籍| www.161390.com-北京福利彩票官方网| www.334243.com-幸运星座彩票玩法| www.5pw.cc-竞彩奖金怎么交税| www.523.cm-老时时彩一星走势图| www.5404.cn-7星彩l-| www.91494.com-美产好彩香烟| www.091204.com-百信赢彩票-| www.81kn.com-3d福彩今天排例五| www.389390.com-体彩店加盟费| www.3984.cn-449cc天下彩| www.44746.com-买彩票群是真的假的| www.0786.vip-95彩网-| www.220232.com-北京快三到几点封盘| www.47179.com-腾讯分分彩规律| www.75791.com-七星彩大赢家走势图| www.041669.com-快三什么是红号| www.233099.com-重庆试试彩app| www.715760.com-官方双色球彩票软件| www.800938.com-体彩注册送彩金| www.862303.com-彩客彩票手机客户端| www.cp7677.com-七星彩玩法开奖结果| www.sh82.com-重庆时时彩已关闭| www.862272.com-彩票书籍推荐| www.373325.com-亿彩彩票注册| www.kh80.com-双色球易彩网| www.95203.com-福彩内部号发说说| www.200451.com-河南快三大小走势图| www.076268.com-彩32彩票-| www.274521.com-分分彩彩-| www.456513.com-福利彩号码怎么选好| www.571672.com-中中彩之家-| www.700274.com-甘肃快三和值号推荐| www.793636.com-计算彩票-| www.948897.com-3d福利彩票开奖号| 博创彩票www.558402.com| www.678540.com-彩票33登录-| www.a14.bid-乐彩网双色球论坛|