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.303798.com-鑫亿彩网怎么样| www.433047.com-体彩店每月任务| www.2704.cc-爱彩乐11选5助手| www.ng80.com-极速彩票娱乐平台| www.986402.com-河南金手指彩票报纸| www.190200.com-湖北快三技巧规律| www.te36.com-时时彩奖表-| www.573073.com-东方网彩票平台| www.777.hk-黑客破解黑彩平台| www.7458.me-体育彩票去哪里申请| www.91ds.cc-辉煌娱乐彩票骗局| www.503583.com-时时彩算赌博行为吗| www.009787.com-快乐公益竞猜彩票| www.110549.com-福彩3d万能二码| www.194640.com-快三跨度选号技巧| www.123076.com-各种彩票精准计划| www.5019.vip-家彩网开奖号| www.969835.com-5d体彩开奖号码| www.540210.com-彩票外围是什么意思| www.708237.com-以买彩票为由被骗| www.852655.com-华人官方彩票注册| www.954623.com-豹赢彩票app下载| 博乐彩票www.35918l.com| www.720204.com-七星彩开奖游戏规则| www.933276.com-五省五省快三一定牛| 中彩网www.6611e.cc| www.fa74.com-北京体彩网官方网站| www.d90.club-竞彩足球兑奖时间| www.255543.com-福彩快三网上投注| www.349256.com-体彩排列三双采图迷| www.446944.com-彩吧红五图车| www.4813.vip-彩讯pc28加拿大| www.664235.com-七星彩牛爹统资料| www.771226.com-盐城竞彩店-| www.903803.com-进球彩开奖结果| www.969626.com-什么彩票软件最好用| www.cp3803.com-新快三算号器| www.pd34.com-竞彩网是不是骗局| www.14dy.com-福彩3d算号宝| www.98iy.com-天下彩949cc| www.3318.me-看彩票下载什么软件| www.735200.cc-彩票冷热号-| www.233103.com-新浪足球彩票单关| www.356143.com-分分彩免下载| www.469246.com-玩足球彩票输死了| www.559652.com-陇彩宝官网-| www.631972.com-七彩云南简介| www.505182.com-富游彩票app下载| www.671157.com-p三彩经网走势图| www.762723.com-快三的和值怎么分析| www.846012.com-博纳彩票是骗子吗| www.25836.com-彩图宝典下载安装| www.74323.com-买彩票有限额吗| www.610551.com-必赢版手机彩票网| www.969608.com-足彩足球竞彩比赛| www.dg31.com-深圳福利彩票彩种| www.589628.com-竞彩足球高手专家| www.670912.com-重庆时时彩b盘| www.752379.com-彩02彩票-| www.818450.com-500彩票一分赛车| www.890131.com-nba体彩竞猜| www.890.in-制作彩票软件下载| www.926607.com-瑞彩网可靠吗| 大赢家彩票www.5086e.com| www.90608.com-彩票开奖排列三开奖| www.089004.com-90后中彩票10亿| www.170693.com-今日河北快三| www.53oj.com-美国彩票多少钱一张| www.063678.com-体彩加盟费多少| www.752196.com-三d彩票牛治预测| www.824989.com-好彩频道重播| www.901142.com-关于福利彩票知识| www.980187.com-想买彩票彩票玩儿法| www.jn41.com-腾讯分分彩贴吧| www.316581.com-大乐透最新彩民乐图| www.45012.com-顶尖彩票提现| www.950112.com-一定牛彩票能买了吗| www.cp620.com-彩票争霸ⅱ-| www.w82.org-神彩奕奕的动物| www.7140.cc-时彩怎么样才赚钱| www.216985.com-吉林快三遗漏号| www.296626.com-福利彩票玩法奖励| www.359887.com-体育彩票如何代理| www.441721.com-上市彩票-| www.523568.com-金口诀测彩纳数法| www.627441.com-福利彩票主任| www.739501.com-福利头条彩票app| www.805551.com-易竞彩分析软件| www.876684.com-体彩p3出号走势图| www.947664.com-彩票投注资金策略| 乐盈彩票www.gy11.com| www.731846.com-8k彩票安全吗| www.816327.com-三分彩靠谱吗| www.916205.com-致富彩票主页| www.987627.com-冀彩-| www.kh08.com-福彩中奖号-| www.89727.cc-4月足彩-| www.6301.pw-新型隔热防腐彩铝板| www.585164.com-中彩票算什么财| www.752159.com-彩票犯法吗-| www.908791.com-湖南省福彩领奖地址| www.cp2230.com-大发快三技巧规律| www.h87.club-湖北湖北福彩快三| www.4yq.com-彩乃奈奈百度云在线| www.981.tv-彩票有六位数字的吗| www.14948.com-彩票联盟官网| www.82572.com-足彩19040分析| www.368670.com-彩票开奖查询直播| www.275.bid-加盟什么彩妆| www.536410.com-编程实现彩票走势图| www.316230.com-彩票店效果图| www.476681.com-福星彩票网下载| www.592974.com-彩虹电影台怎样下载| www.cp6977.com-河南快三结果| www.236256.cc-手机投注彩票| www.9933.hk-七彩乐中奖概率| www.uy24.com-彩票选号技巧6减2| www.456166.com-福彩p62中奖方式| www.279906.com-时时彩微信群赌| www.921131.com-正神彩票app下载| www.zm72.com-赢家彩票是什么| www.150442.com-神兽时时彩app| www.295589.com-彩票开奖查1询| www.509583.com-腾讯分分彩号码统计| www.218228.com-快三如何投注| www.119906.com-全球彩是不是赌博| www.237896.com-福彩今天开奖查询| www.338165.com-双色球牛彩网字谜| www.80ft.com-百盛国际彩票被黑| www.1365.com-28彩下载-| www.7673.top-彩世界软件下载| www.938861.com-8亿彩什么情况| www.027974.com-鸿源彩网平台可靠吗| www.312689.com-9购彩票官网| www.19084.com-辽宁福彩双色球今日| www.58635.cc-3d银海彩报a| www.603947.com-u信彩票-| www.479369.com-竞彩足球加奖有吗| www.398776.com-彩票的故事-| www.838701.com-竞彩足球001统计| www.773629.com-滴滴彩票苹果版| www.887530.com-玩彩网彩票可靠吗| www.20473.com-玩时时彩赢钱心态| www.990240.com-湖北快三能玩吗| www.196983.com-马来三分彩开奖历史| www.301838.com-体彩七星彩开奖时间| www.90ey.com-8g彩票网站登录| www.601499.com-亿元彩票网站靠谱吗| www.927161.com-足彩四场进球彩| www.639427.com-竞猜彩票app下载| www.767070.com-重庆时时彩易购网| www.22966.cc-王者彩票可靠吗| www.35rj.com-七星彩七金码论坛| www.265740.com-l浙江福彩-| www.436596.com-体彩游泳投注公式| www.196656.com-体彩开奖结果排列三| www.277867.com-福利彩票几点停售| www.485724.com-返回三分时时彩| www.687554.com-陕西福彩中心下载| www.763817.com-彩神大发预测| www.820723.com-彩钢板执行标准| www.903525.com-星光彩票注册邀请码| www.970610.com-今天福彩3b式机号| www.cp9909.com-易彩快3一分钟一期|