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.595178.com-排列三双彩图| www.708672.com-河北彩票吧百度贴吧| www.s90.org-永利网彩票合买| www.362063.com-描写家乡彩虹的作文| www.332795.com-京彩彩票网安全吗| www.502669.com-多彩云众筹和多彩投| www.589175.com-春彩娱乐骗局| www.5961.biz-彩民随机彩票| www.185995.com-广西福彩快3| www.259473.com-福利彩票幸运选号| www.48571.com-彩票零相关分析法| www.1897.cn-2020彩票网登陆| www.65mn.com-凤凰网彩票开奖公告| www.1204.name-直播92彩-| www.376379.com-哪个平台玩彩稳定| www.767656.com-体彩票福利彩票开奖| www.798633.com-极速时时彩基本走势| www.147455.com-彩吧vip下载| www.541782.com-竟彩网站-| www.qn83.com-本期七星彩开奖号码| www.33lf.com-体彩几点停售时间| www.06292.com-福彩3d试和值号码| www.60259.cc-58彩票换网址了么| www.445233.com-精彩篮球计算器| www.372725.com-谁玩过现金彩票| www.024391.com-彩票71湖北和江苏| www.409889.com-3d彩票开机号| www.746868.com-彩票网站优惠| www.855200.com-快三中123多少钱| www.957860.com-一分钟彩票-| www.df62.com-旭彩网靠谱吗| www.b89.club-宁夏快三手机版下载| www.46uo.com-彩票店官方旗舰店| www.ua22.com-熊猫娱乐时时彩| www.27jj.com-熊猫彩票真的赚钱吗| www.458633.com-快三五分-| www.555379.com-块3单式彩票| www.622068.com-云彩店官方-| www.689609.com-t乐彩开奖公告| www.773632.com-滴滴彩票送28平台| www.858267.com-彩票爆仓-| www.923580.com-cp官方彩票-| www.984620.com-奖多多酷彩吧| www.yp4.cc-彩票店的快三怎么玩| www.qt74.com-福彩快12玩法介绍| www.59jw.com-竞彩网线路检测| www.486903.com-足彩相关术语| www.588745.com-彩票大-| www.675276.com-中央彩票发行新规| www.756177.com-58彩票维护-| www.834352.com-福彩3d全图总汇八| www.907003.com-来一组彩票号码| www.973236.com-彩虹哥qq-| www.cai456.cc-中国快三大全网| www.kj00.com-京东彩票-| www.i39.club-爱投彩票官网下载| www.621973.com-极速快三规则| www.47eb.com-招聘彩票销售员| www.5188.mobi-云南彩票巨奖| www.44252.com-创富彩票正规吗| www.w14.biz-3d彩神通软件下载| www.061026.com-ku游足彩骗局揭秘| www.28ph.com-wap手机彩票| www.743.mobi-帮我下载彩库宝典| www.024766.com-彩票王官方下载| www.754355.com-彩宝贝网下载| 彩吧www.856458.com| www.746397.com-555彩票官方网站| www.50166.com-彩票检举-| www.177200.com-网上江苏快三能玩吗| www.817912.com-9福彩票是合法的吗| www.115302.com-彩铅画动漫人物| www.876626.cc-环球彩票是正规的嘛| www.865726.com-彩票分析预测下期| www.405.cc-竞彩足球点球算不算| www.961927.com-什么彩票app好用| 天际彩票www.tj92.com| www.cp430.com-江西快三出奖结果| www.335553.com-精彩十分5d直选| www.932667.com-手机买快三-| www.529181.com-体彩大乐透新浪网| www.08786.com-4188彩票-| www.320036.com-三六零彩票开奖| www.460437.com-体彩打票员教程视频| www.733250.com-上海彩票大奖| www.878444.cc-福彩3d杀垃圾复试| www.gg40.com-彩票一分快三| www.9771.xyz-时时采彩软件计划| www.130372.com-大彩网官方首页| www.796172.com-众博彩票下载安装| www.946527.com-重庆时彩心得技巧| www.cai5508.com甘肃快三遗漏| www.tp08.com-安徽快三示意图| www.77ol.com-玩足球彩票输死了| www.3196.cm-最新体彩福彩开奖| www.19741.com-嘉兴福彩网首页| www.4934.cc-彩票大奖都是机选| www.67np.com-皇冠竞彩下载| www.73675.com-福彩3d字迷画谜| www.66cj.cc-海南七星彩群| www.cp3802.com-快三计算方法如下| www.751706.com-彩票怎样买中奖率大| www.844246.com-中福彩机构组成| www.914769.com-黑彩可以报案吗| www.976983.com-固始县彩礼标准| www.cp0026.com-网上彩票-| www.io26.com-微彩娱乐app下载| www.05er.com-彩铅画和线描区别| www.078924.com-首页牛牛蛙彩票网| www.8jw.cc-七星彩破解规律| www.388523.com-彩友会公平公正公| www.635493.com-新火大时代彩票平台| www.660875.com-分分彩大小八期计划| www.bp86.com-七彩网彩票app| www.688358.com-福彩计划3d群| www.778680.com-彩票软件都没了呢| www.852800.com-常常中体彩店app| www.912897.com-足彩19053-| www.974621.com-手机众彩网客户端| www.cai130.com-湖北福彩快三查询| www.646398.com-足彩爆冷规律| www.576.red-18161胜负彩| www.299306.com-彩票怎么看走势入门| www.144386.com-体育彩票微信公众号| www.742928.com-799彩票平台| www.32109.cc-体彩佣金怎么算| www.004584.com-福彩彩迷天地| www.t58.tv-118彩票登陆| www.786282.com-大赢家时时彩平台| www.908305.com-福彩七乐彩规则| www.966972.com-网上彩票投注提现| 博乐彩票www.35918p.com| www.033625.com-马来西亚乐和彩资料| www.670.live-玩时时彩的正确心态| www.06031.com-好彩票app是骗人| www.42jz.com-七星彩中6个数字钱| www.333343.com-员工年会领彩票| www.509019.com-千旺彩票代理| www.70yp.com-时时彩牛牛两面| www.3237.com-阳光彩票注册登录| www.06412.com-3d福利彩票52期| www.034339.com-旭辉研彩软件官网| www.56123.com-买彩票亏大了| www.x18.pw-大连体彩兑奖中心| www.66fn.com-星游时时彩官网| www.111601.com-彩票兼职赚佣金| www.320042.com-福彩图迷字谜总汇| www.791439.com-彩票赊账怎么解决| www.089178.com-吉林快三彩票| www.023994.com-六台彩迷宫4836| www.878478.com-福利彩票自助机加盟| www.972473.com-彩票双色球开奖号| 金掌柜www.83993j.com| www.0288.top-体彩彩票店业主投诉| www.853099.com-台湾威力彩开奖规则| www.640519.com-彩民乐精华版| www.565273.com-宝马集团彩票真的吗| www.691783.com-19030胜负彩票| www.773958.com-天天彩票qq交流群| www.887613.com-体育彩票网上投注| www.969364.com-酷彩吧是什么平台| www.nm51.com-虚拟彩票快三投注| www.391679.com-美狮彩票官网| www.699751.com-nba体育彩票分析|