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.050983.com-爱购彩票骗局| www.939356.com-乐途彩票网app| www.7398.com-色彩构成喜怒哀乐| www.55481.com-儿童创意水彩画图片| 500彩票www.979738.com| www.9744.top-全民彩彩票是真的吗| www.082034.com-中彩论坛讨论专区| www.183232.com-皇都彩票客服| www.288497.com-彩民研究彩票高手| www.378909.com-潢川福利彩票| www.864662.com-老时彩开奖号码| www.979016.com-贵烟新好彩价格表| www.pi14.com-海南快三开奖信息| www.3621.org-大唐彩票下载安装| www.2033.date-emoji的彩虹| www.639377.com-彩票终端-| www.123052.com-投彩计划群是真的吗| www.227596.com-1分快三官网| www.400369.com-5d漫画站全彩| www.778100.com-cc分分彩计划软件| www.926844.com-达人彩票不靠谱| www.td66.com-网彩是什么-| www.428984.com-彩虹色创意玩法| www.371196.com-网上彩票软件靠谱吗| www.594810.com-唯彩会3d预测专家| www.093754.com-福彩高频彩新政策| www.199760.com-时时中彩票app| www.313358.com-上海体育彩票11| www.203371.com-微信快乐彩可靠吗| www.397316.com-腾龙时时彩计划统计| www.651970.com-重庆时时彩万位计划| www.880256.com-喜乐彩票充值平台| www.975647.com-云彩在线彩票合法性| www.44435.cc-信誉彩app-| www.7698.biz-手机彩票投注下载| www.674579.com-淮安市福彩中心地址| www.515112.com-河南商丘民权彩礼| www.61414.com-彩票买大小-| www.673125.com-体彩排三金码| www.xt23.com-中国红中奖彩票图片| www.46bs.com-彩票店和什么一起卖| www.3677.in-万彩吧彩票下载| www.09240.com-手机短信怎么买彩票| www.79785.com-阜阳福彩自助终端| www.10049.com-网络彩票下载| www.952547.com-好彩先锋最新资料| www.yt3.com-河北快三推号码| www.yc57.com-今晚七星彩号码| www.56ax.com-三彩服饰专卖店孝感| www.591333.com-sb是什么博彩| www.447434.com-体彩30元大吉大利| www.586704.com-吉利快三模拟| www.701867.com-时时彩二星直选技巧| www.803869.com-快三多少期-| www.964098.com-网上彩票买是真假| www.92804.com-广东利彩五金塑料| www.06330.com-牛彩网字谜汇总大全| www.65365.cc-西宁体彩兑奖地址| www.050229.com-黑彩骗局-| www.214528.com-四亿彩票网-| www.19557.cc-江苏时时彩历史开奖| www.04550.com-足彩不能网上买了吗| www.42255.cc-福彩三地图谜| www.042016.com-江南彩姐大乐透预测| www.924228.com-综艺福彩骗局| www.972987.com-彩虹六号注册教程| www.cai2424.com湖北今天快三| www.jp26.com-天天福彩是正规的吗| www.xm57.com-体育彩票投注站| www.11wx.cc-新粤彩每期报纸| www.04203.com-手机上可以买足彩吗| www.cq20.com-吉林快三追号计划| www.190699.com-玩一分快三能赚钱么| www.80844.cc-竞彩客户群-| www.307588.com-韩国快三开奖视频| www.562626.com-三地彩吧论坛| www.75958.com-彩票有折痕能兑奖吗| www.216700.com-中国快三网app| www.604918.com-中澳彩票平台| www.791399.com-福利彩票怎么买机选| www.rb24.com-快三心得-| www.3270.me-喜彩娱乐网-| www.78201.com-五分钟快彩-| www.228238.com-新疆福彩喜乐彩开奖| www.562739.com-高频彩有假吗| www.727150.com-彩96平台黑吗| www.80wu.com-禧彩3d今开什么号| www.gu0.com-安徽快三一定牛走势| www.152751.com-新121彩票走势图| www.901933.com-黑彩先赢后输| www.38384.cc-天天助手彩票计划| www.06.cn-分解断组乐彩排列三| www.559050.com-体彩11选5平台| www.447336.com-众彩网怎么样| www.44676.com-河南人彩礼是多少| www.497600.com-悟空彩票骗局揭秘| www.39.hk-彩票店面装修| www.453451.com-竞彩软件有哪些| www.679898.com-青海快三开奖号今天| www.969679.com-1088彩票网-| www.572609.com-天天时时彩计划网站| www.5473.xyz-彩虹世界下载安卓版| www.129475.com-众彩577-| www.595624.com-246天天彩下载| www.mt20.cc-e球彩助手官方下载| www.118859.com-97彩票app-| www.306759.com-吉祥彩票怎样下载| www.653708.com-01彩票助手-| www.0698.cm-易彩堂登录会员| www.168932.com-快三胆拖投注计算器| www.355529.com-常州福彩点-| www.27855.cc-上彩票2626aa| www.mm24.cc-快三预测号码软件| 亿发彩票www.530833.com| www.171788.com-贵州省福利彩票| www.98bp.com-博瑞彩怎么玩| www.84684.com-时时彩二期计划在线| www.157907.com-竞彩ios下载| www.zp.cc-银川彩票中奖| www.693727.com-合发彩票真的假的| www.lx93.com-福建哪里有彩票站点| www.78fl.cc-南方双彩网预测下载| www.83293.com-安阳彩票中奖大乐透| www.9420.biz-华人彩登录注册| www.028731.com-杏彩平台手机版登录| www.433216.com-湖北体彩中奖| www.673854.com-彩票买两张同样的| www.837181.com-合肥体彩店找哪家好| www.882080.com-网上做兼职玩彩票| www.630556.com-海南七星彩规律论坛| www.63114.com-足彩胜负彩app| www.cp8880.com-红快三-| www.000177.com-天津彩票开奖结果| www.360439.com-新罗区彩票-| www.659854.com-彩票东方六加一开奖| www.956051.com-3d彩票字谜图谜| www.354934.com-黄好彩爆珠多少钱| www.072704.com-cp彩票苹果版下| www.589669.com-七星彩今天图规| www.153277.com-天天福彩选4走势图| www.913697.com-幸运快三能提现吗| www.001281.com-神马彩票app下载| www.151514.com-彩票有多少个数字| www.417815.com-彩票店开到几点| www.641533.com-香港青蛙彩-| www.889034.com-王者彩票218us| www.fq18.com-uu快三总输-| www.2687.com-彩32下载-| www.848565.com-五分快三买大小秘诀| www.48nc.com-重庆私私彩开奖| www.09943.com-保定体育彩票兑奖处| www.464480.com-足彩领奖程序| www.581517.com-福彩快3预测分析| www.696337.com-福彩天地报双色球| www.034975.com-坤彩股份-| www.167768.com-中彩网app靠谱吗| www.247720.com-七天彩主页-| www.566940.com-天下好彩报刊大全| www.660814.com-分分彩全部玩法介绍| www.757067.com-全民彩乐汇-| www.825916.com-今日彩票中奖号预测| www.893773.com-喜盈门彩票登录网址| www.954046.com-中国竞彩联盟| 易彩网www.36166n.com|