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天

知道了
亚洲28 www.830789.cc-注册送彩金的| www.952628.com-今日竞彩对阵表| 99彩票www.98255.com| www.152984.com-分分彩后一稳赚技巧| www.131846.com-湖北钟祥彩礼多少钱| www.55jc.com-vr三分彩开奖结果| www.95875.com-福利彩票肺癌| www.131142.com-福彩三哥杀码| www.216970.com-河北快三今日开奖号| www.472655.com-彩票沉迷-| www.625860.com-三分彩吧-| www.919447.com-大乐透凤彩网| www.dy52.com-天天彩票网-| www.59fb.com-彩钢瓦房子如何隔热| www.4018.vip-谁有永利彩票网址| www.14016.com-即乐彩开奖结果| www.53797.cc-东方彩票投入梦想| www.693061.com-口袋彩票安卓| www.823161.com-彩涂铝卷的价格| www.565229.com-49彩票规则-| www.678336.com-福彩3d全部双彩图| www.799959.com-福彩开奖双-| www.910107.com-粤彩联盟报今期| www.8dc.cc-深圳口袋彩店二维码| www.64808.com-牛彩网牛材网开奖| www.599.host-578彩票app-| www.19890.cc-体彩283投资计划| www.732981.com-七星彩开奖全部历史| www.811737.com-体彩竞彩足球开奖| www.877266.com-23彩票下载-| www.939625.com-中国福利彩票一分钟| www.996410.com-黑龙江体彩开奖查询| www.ab77.com-快三开奖时间| www.530810.com-黑客攻击福利彩票| www.662377.com-体彩七星彩时间| www.861858.com-山东体彩领奖地址| www.cp968.com-福建快三专家推荐号| www.56991.cc-彩神11app-| www.095006.com-3d鬼六神算牛彩网| www.288870.cc-彩票回补几率| www.392376.com-体彩大乐透技巧| www.565696.com-彩96.com-| www.666110.com-彩票怎么才能挣钱快| www.776206.com-1.5分彩计划| www.879688.com-赢彩票是真的吗| www.wz94.cc-湖北快三号码分布表| www.64az.com-丹东3d彩图-| www.005090.com-上期彩票中奖号码| www.59.biz-福利彩票双色球倍投| www.250.com-xs原彩显示-| www.887095.com-彩票改vr-| www.972195.com-印尼五分彩开奖号码| www.pl63.com-北京快三一共多少期| www.22zd.com-彩票的搞笑段子| www.756.cc-乐彩网图谜-| www.4847.cn-彩票导报彩票与生活| www.06190.com-福彩3d中奖组选| www.50076.com-彩客苹果app下载| www.92163.cc-福彩三弟太湖谜语| www.059419.com-尼彩手机报价| www.166745.com-快三福彩网站| www.256654.com-彩6app官网-| www.321770.com-彩票复式生成软件| www.392138.com-体彩小程序二维码| www.539309.com-体彩招工-| www.603707.com-梦见去彩票店打彩票| www.188243.com-江苏体彩快三玩法| www.263998.com-福彩贴吧-| www.328559.com-彩票天吉网-| www.395432.com-全天福利彩合法吗| www.610843.com-如何在杭州开彩票店| www.672910.com-彩票开奖号出来| www.ke06.com-苹果手机购彩票软件| www.e20.tv-乐和彩票app下载| www.001.red-非凡彩票合法吗| www.3171.in-新看彩啦3d-| www.04537.com-国家推荐的彩票软件| www.44761.com-美国一分彩-| www.85328.cc-500彩票足球资料| www.039166.com-彩票代投兼职群| www.165111.com-500彩票江苏快3| www.971864.com-福彩杀码预测| www.225012.com-福彩幸运快三邦投| www.300466.com-天天中彩票又能用了| www.0868.bid-彩客股票-| www.106556.com-五分彩历史开奖号码| www.788975.com-竞彩nba投注比例| www.77dw.com-天天时时彩彩票论坛| www.721121.com-谁知道新2彩票网站| www.519365.com-投彩网是真的吗| www.15ky.com-彩礼100万的有吗| www.119597.com-七乐彩图表-| www.227009.com-彩铅画图片-| www.690552.com-足彩波胆是什么意思| www.636271.com-彩虹糖闸机-| www.910422.com-足彩加电脑版| www.716632.com-彩铅画画上色技巧| www.238970.com-网络刷彩是什么| www.449413.com-重庆14彩公司| www.576400.com-淘彩猫app-| www.6965.vip-融彩网怎么样| www.008657.com-8月16日体育彩票| www.138663.com-鸿彩网挣钱了| www.23355.com-彩票签到每日2元| www.487746.com-彩托是怎么回事| www.012068.com-陇彩宝app下载| www.208561.com-销售彩票专业术语| www.201364.com-购买双色球彩票网站| www.094218.com-中国彩吧合法吗| www.983442.com-彩十六官网-| www.902233.com-福彩3d黑彩-| www.dj41.com-狗力七星彩奖表| www.6713.top-发彩网彩票杀号定胆| www.494334.com-足彩一定牛分析推荐| www.127937.com-唯美彩虹壁纸| www.245251.com-易彩快3免费计划| www.336671.com-福彩真假-| www.276957.com-什么彩票5分钟一期| www.006734.com-这期福彩中奖号码| www.38997.cc-彩票不给提现| www.109037.com-9号网上七星彩| www.17uk.com-体彩中心开奖直播| www.20528.com-注册领元彩票彩金| www.206873.com-搜索网易彩票| www.643802.com-印尼分分彩-| www.0080.net-彩票有趣的群名| www.5671.in-网站01彩票是什么| www.518149.com-今彩票指南报| www.39715.com-爱彩彩票输了7万| www.473384.com-极速快三大小技巧| www.537144.com-黑色属于彩色吗| www.78243.com-湖南幸运快三查询| www.165500.com-彩票返利-| www.2559.biz-彩票7选5技巧| www.436685.com-3d彩票app软件| www.03013.cc-全天快三-| www.128800.com-快3网彩票-| www.68919.cc-新盈彩是正规平台吗| www.29wl.com-彩铅人物皮肤上色| www.112376.com-彩票注册送19元| www.03cc.com-云南彩票未领取| www.08869.com-福彩作假主任领奖| www.728218.com-体彩数据-| www.727716.com-福彩3d总汇二| www.856402.com-盖尔霍华德彩票理论| www.393270.com-彩票开妜-| www.87vx.com-彩虹鱼绘本-| www.718639.com-彩虹顏色-| www.280008.com-有五分时时彩吗| www.9187.com-今天开奖彩票是哪种| www.904940.com-竞彩足球彩票开奖| www.68492.com-福彩怎么领奖的| www.238598.com-快三客是什么意思| www.990140.com-发彩票-| www.39597.cc-九歌彩票最新| www.660493.com-海南七星彩特区| www.399255.com-福利彩票门店| www.07hu.com-彩票返奖率什么意思| www.n72.com-送彩票活动-| www.845563.com-竞彩最高投注金额| www.370376.com-租彩票网站-| www.612825.com-全国彩票2开奖公告| www.sb.cc-福利彩票天天快3| www.031745.com-下彩app-|