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.642462.com-福彩三地选胆图表| www.871304.com-彩票大家赢走势图| www.eu1.com-快三秒热水器价格| www.08pv.com-尼彩手机是智能机吗| www.4780.cc-甘肃快三的玩法| www.966576.com-足彩指数500| www.01339.com-送58彩金的平台| www.020980.com-福彩票三d-| www.504944.com-福利彩中奖三个号| www.59626.cc-玩彩票幸运28软件| www.039117.com-七彩格子app| www.137347.com-一分快三和值推荐| www.569390.com-体彩三句话第一时间| www.661360.com-中国彩票大学| www.885800.cc-内蒙古福彩软件下载| www.537333.com-彩色怎么造句| www.650792.com-创意水彩建筑| www.5077.biz-彩票历史大奖排行榜| www.708170.com-改彩票倍率骗| www.783175.com-保定市彩票站| www.856185.com-北京体育彩票网官网| www.713357.com-福彩3d是假的| www.798016.com-足彩14场开奖公告| www.872427.com-湖南体彩快报电子版| www.400852.cc-七星彩三四差尾| www.525114.com-重庆彩票投注站| www.6686.cm-新赢彩app下载| www.39233.com-双赢彩票是骗局吗| www.445544.cc-深圳彩票兑奖中心| www.9862.cn-中国古代彩画分为| www.16876.com-大发快3彩票真假| www.802317.com-看福彩开奖结果| www.933390.com-快三56注号码| 500彩票www.26299v.com| www.657549.com-大乐透预测家彩网| www.010725.com-3d彩票开奖试机号| www.257292.com-微彩app骗局揭秘| www.633878.com-彩票助赢计划最准群| www.123684.com-七彩奖下载-| www.464470.com-时时彩倍率计算| www.908124.com-七星彩大奖梦册| www.839717.com-澳客彩票网杀号定胆| www.356895.com-易彩投注技巧| www.6431.me-时时彩为什么总卡奖| www.533503.com-梦秘解图七星彩| www.647786.com-霍金彩票公式解析| www.995466.com-好彩香烟柠檬味| www.ho49.com-网上彩票怎么赚钱| www.9081.org-浦东体育彩票发放点| www.cp8233.com-江苏体彩-| www.363988.com-体彩排列五结果查询| www.549558.com-买足彩中的看什么| www.324133.com-马来西亚网络彩票| www.424216.com-福彩3d有多长时间| www.538674.com-玩网络彩怎么必赢| www.613608.com-qq怎么查彩票| www.686169.com-彩钢瓦机器-| www.755656.com-6s彩膜-| www.830466.com-什么软件可以看彩票| www.900990.cc-东北彩王视频| www.966039.com-今日福彩中奖号码| 大赢家彩票www.327526.com| www.gz49.com-百盈彩票计划| www.yd60.com-韩国彩票有几种玩法| www.17us.com-2019038福彩| www.008274.com-体彩周五开什么彩票| www.100588.com-105彩票网靠谱吗| www.213846.com-数学破解彩票有规律| www.668228.com-彩票买哪一个好| www.752507.com-彩票包赔被骗| www.836276.com-顺丰彩票app苹果| www.926807.com-福彩达人-| www.984935.com-彩运8彩票-| www.ve3.com-七乐彩中奖图表| www.pp55.cc-福彩3d字谜牛摘网| www.29vv.com-福利彩票开什么| www.139334.com-淘彩票tcp邀请码| www.296820.com-福彩3d吧图迷| www.485889.com-体彩篮球竞彩玩法| www.nz55.com-竞彩任9开奖结果| www.589524.com-广州体彩中心网| www.01934.com-问题彩民怎么办| www.065532.com-彩虹世界下载| www.742006.com-好运彩网站-| www.953256.com-体育彩票包含哪些| www.fm5.com-网络彩票获利| www.b02.com-彩票开奖双色球单式| www.97wy.com-红彤彤体彩店下载| www.9077.top-七乐彩开奖今天的| www.80050.com-玩外围博彩违法吗| www.080799.com-手机快三软件| www.271201.com-彩店二维码-| www.603565.com-ag彩票平台官网| www.732145.com-彩礼不得超过8万| www.872942.com-彩票时时彩下载| www.986175.com-中国河南体育彩票| www.ny51.com-网上可以买彩票吗| www.3mt.cc-福利彩票是谁发明的| www.5842.vip-神彩福牛在哪下载| www.083615.com-精彩中国彩票预测网| www.763867.com-福彩3d图片大全| www.990928.com-万彩计划官网| www.709262.com-今天竞彩足球跟单| www.653185.com-高频彩票时间调整| www.915148.com-足球竞彩结果比分| www.25op.com-ig传统彩赛车优惠| www.964099.com-竞彩计算-| www.8417.org-福利彩票中奖神器| www.493462.com-守信彩票骗局兼职| www.644444.com-9h号彩票-| www.906588.com-吉林快三五天走势图| www.46xw.com-中博的彩票平台| www.6173.pw-彩钢板价格-| www.114787.com-彩民村下载-| www.234050.com-我被彩票害死了| www.756.red-福彩专用音乐| www.297979.cc-人人猜球彩票| www.584818.com-台湾十分彩怎么追号| www.47227.cc-足球竞彩半全场规则| www.165369.com-创富彩票是什么| www.524007.com-时时彩开奖结果助手| www.113065.com-彩票游戏-| www.265018.com-江苏一快三开奖遗漏| www.90004.cc-想开彩票站怎么申请| www.186252.com-百盈快三计划| 辉煌彩票www.2875e.com| www.16xe.com-山东体彩排列三论坛| www.45166.com-不买彩票就是中奖| www.77292.cc-新版87彩店ios| www.103198.com-七彩乐开奖号码| www.592736.com-腾讯彩虹六号| www.916.in-彩票培训师是真是假| www.9141.net-七乐彩开奖日期表| www.160140.com-竞彩胜平负不开售| www.33074.com-体彩大7叫什么名字| www.85897.com-天下彩票是真的吗| www.493820.com-营口彩票站出兑信息| www.795802.com-新加坡福佳彩财源报| www.413171.com-足彩研究方法| www.616024.com-体彩乐五怎么玩法| www.624618.com-彩票怎么销售| www.109873.com-天天时时彩助手下载| www.321444.com-6号彩票官网| www.552722.com-彩票一张可以买几注| www.407133.com-线上彩票游戏合法吗| www.902533.com-黑彩排行-| www.874421.com-今晚七里彩开奖结果| www.996316.com-哪里可以买北单足彩| www.52572.cc-10398好彩网| www.104178.com-网上福彩正规网站| www.on11.com-福利彩票分分快三| www.97el.com-注册给彩金网站| www.e28.top-国彩网下载-| www.81gd.com-福盈门彩票网站| www.4457.net-快三怎样玩才能稳赢| www.09oc.com-三色球彩票-| www.3050.biz-亚博彩票加盟条件| www.9515.top-投彩计划下载| www.024531.com-青岛福利彩票地址| www.570388.com-七彩虹显卡好吗| www.372696.com-幸运彩票网址大全| www.122982.com-彩53是什么平台| www.664892.com-生肖彩开奖必中六| www.86oy.com-百胜澳门9b彩票|