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.170550.com-快三公式-| www.169078.com-今日河南快三走势图| www.004694.com-彩票历史查询器工具| 吉利彩票www.80065r.com| www.672525.com-彩票投注单打印机| www.847767.com-古建筑彩绘-| 500彩票www.66621j.com| www.0888.me-怎么玩儿快彩王| www.51785.cc-福彩3b乐彩静态板| www.035997.com-恭喜彩票中奖的句子| www.318588.com-特区微彩排列三五| www.422876.com-非凡彩票软件| www.800809.com-3d就业时报彩图版| www.896171.com-玩彩王-| 购彩票www.c5908.com| www.017381.com-快彩乐首页山东| www.9849.xyz-古建筑彩绘颜料| www.89980.com-七彩在线彩票| www.262007.com-天津快三开奖结果| www.559684.com-诺亚五分彩-| www.0100.loan-彩票店微信头像| www.854711.com-竞彩篮球一场比赛| www.955994.com-全部彩票下载安装| 大赢家彩票www.530951.com| www.19ar.com-7乐彩开奖结| www.4855.vip-梦见彩票未中奖| www.34854.com-今天3d彩报图库| www.6147.cc-彩票计划神圣计划| www.53127.cc-七彩连锁酒店官网| www.974219.com-彩铅画百合花一枝花| www.rd68.com-360彩票江苏快三| www.cp0268.com-快三投注平台手机版| www.tn76.com-安徽快三专家推荐| www.25dx.com-7f彩票-| www.58su.com-大发快三投注计划| www.408.tv-彩票号码dna软件| www.5037.cm-彩票可以下几个号码| www.06982.com-下载彩票中奖软件| www.55001.com-安卓微彩-| www.97083.com-大奖网彩票安全吗| www.532196.com-彩虹颜色英语| www.603220.com-玩足彩有赚钱的吗| www.676932.com-多彩办公大师| www.747670.com-西安彩运宝app| www.28is.com-星耀彩票平台合法吗| www.95en.com-有没有职业买彩票的| www.2468.cn-易语言彩票公式源码| www.8430.vip-湖北彩礼多少| www.727001.com-福建福体彩31| www.833423.com-晚晚好彩资料| www.904466.com-大发快三客服| www.974459.com-福彩克星最新字谜一| www.cp2801.com-彩票开奖查询快3| www.788692.com-古建彩绘图片大全集| www.338945.com-星空彩票下载| www.100610.com-彩票七星彩上期开奖| www.196811.cc-手机彩票123下载| www.11985.com-彩代理-| www.71985.com-彩票猫下载-| www.036428.com-今日彩下载-| www.325583.com-狂想彩票字谜| www.409733.com-皇彩票下载安装| www.513523.com-统一开奖的彩种| www.586670.com-存10送88彩金| www.654087.com-金龙彩票官方版下载| www.729232.com-新彩票网121| www.794304.com-微信彩票游戏| www.866829.com-福利彩票什时候开奖| www.924849.com-彩票奖金排行榜| www.977259.com-濮阳清丰彩礼| www.hx33.com-广西一分钟快三| www.281085.com-私彩报警退钱| www.356159.com-数学计算彩票中奖率| www.439779.com-体肓彩票最新开奖| www.521714.com-2017福运来彩票| www.588726.com-二分快三遗漏数据| www.915439.com-开彩票-| www.974634.com-3d众彩网专家推荐| www.cai1686.com中国福彩快3江苏| www.627968.com-福彩计划杀码论坛| www.718379.com-彩虹原唱在线试听| www.792873.com-彩票异地中奖怎么办| www.865576.com-彩票中奖几个亿| www.919761.com-彩票打印机原理| www.970952.com-如何才能成为彩托| 13e彩票www.501237.com| www.fo19.com-浙江体彩网20选5| www.6308.cn-福彩乐透型开奖结果| www.568175.com-环球彩票不给取钱| www.672068.com-老挝彩票类型| www.752665.com-d9彩票网站靠谱吗| www.949053.com-大发快三倍投技巧| 云博彩票www.www.221375.com| www.pr34.com-彩王争霸下载地址| www.239516.com-网上快三算不算赌博| www.7337.online小米彩虹电池好吗| www.21397.cc-体彩大乐透领奖时间| www.013311.com-开开心心彩票网| www.32uy.com-盈众彩票app| www.172747.com-一分快三彩票| www.320838.com-中彩乐app下载| www.398050.com-彩票猜大小单双句| www.550476.com-冠军白菜博彩论坛| www.857669.com-彩之源怎么看邀请码| www.629962.com-福彩3d北海推荐| www.973488.com-彩虹之下赵雷歌词| www.xr7.com-体育彩票有哪些彩种| www.308687.com-北京逸彩快三| www.270111.cc-快三表格图图片| www.47ix.com-彩票兑奖多久到账| www.0316.ren-彩票站能否私下转让| www.11238.com-足球购彩平台| www.83879.cc-农村开彩票店| www.58101.com-体彩手机购买| www.023133.com-天下彩、免费资料| www.091882.com-百万彩票是真的吗吗| www.206303.com-彩票端正规吗| www.26iw.com-足彩完场比分结果| www.397931.com-七星彩局王奖表| www.598818.com-福利彩票19035| www.791547.com-体彩店内部装修图| www.878406.com-江西体彩有哪些玩法| www.978571.com-粤淘彩票怎么注册| www.yq2.cc-福利彩票3d试机号| www.493046.com-遇到彩票平台改号| www.690380.com-足彩比分最牛中奖单| www.770034.com-时时彩停了怎么回事| www.833866.com-福彩软件哪个安全| www.961140.com-云南好彩快三| www.cp1666.com-十分快三精准计划网| www.561757.com-双色球彩票下| www.266365.cc-河北快三规则| www.447968.com-双色球彩币预测免费| www.576112.com-500万彩票靠谱吗| www.712185.com-时时彩挂机方案思路| www.839757.com-今天福利彩票中奖| www.965546.com-彩票店是怎么赚钱的| www.fp87.com-网上快三有赢的吗| www.77ly.com-彩福宝典-| www.827897.com-万能彩票app| www.119403.com-江苏快三兑奖范围| www.282361.com-上海快三免费计划| www.9882.org-永恒国际彩票| www.501951.com-全讯彩金白菜| www.289030.com-人人中彩票网登录| www.636557.com-之和彩65143| www.706599.com-时时彩论坛绝学技巧| www.770020.com-55彩票苹果版| www.840858.com-彩票系统维护要多久| www.913078.com-5a彩票是骗局吗| www.973575.com-彩虹的图片自然风景| www.31mj.com-体育彩票赔率怎么算| www.1329.org-篮球篮彩吧-| www.511710.com-足彩任9-| www.569494.com-千万国际彩票| www.633071.com-网上竞彩店怎么做| www.86083.com-彩涂钢板的主要用途| www.813960.com-快购国际彩票| www.4cn.cc-彩票直播在线观看| www.108190.com-彩票破解官方| www.8333.org-菲律宾时时彩代理| 百姓彩票www.bxcp3.com| www.80328.com-河北体彩社会招聘| www.022649.com-福彩天下我有福彩|