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天

知道了
9彩注册 www.500840.com-色彩相机的原理| www.649433.com-专家福利彩票预测网| www.788191.com-香港6盒彩开奖结果| www.873152.com-失信被执行人中彩票| www.969019.com-天天彩票是诈骗吗| www.cp2550.com-福彩快三兼职| www.pv03.com-98彩票犯法吗| www.13vm.com-广东好彩1预测| www.93vr.com-福彩3d久久彩吧| www.3959.biz-ck彩客网-| www.14632.com-清明节体彩放假吗| www.66757.com-离我附近的彩票站| www.084973.com-博乐快彩app| www.160449.com-爱心彩官网-| www.267720.com-河南省福利彩票| www.365035.com-彩神今日3d预测| www.467789.com-42500彩票-| www.560769.com-民众彩票-| www.637581.com-彩虹6怎么玩| www.768627.com-天猫彩票提款失败| www.866748.com-今天彩票出什么| www.941456.com-彩票站经营思路| 好乐多www.hld33.com| www.fn88.cc-快三第一门户怎么样| www.zg03.com-今天三d福利彩票| www.33ds.cc-河北11选5彩控票| www.1763.vip-福利彩票去哪买| www.8883.live-竞彩比分规律| www.48785.com-中国福利利彩票| www.97267.cc-竞彩实时投注量查询| www.069342.com-彩神可以赚钱吗| www.144137.com-竞彩打水软件| www.274651.com-时时彩真的不能玩| www.367988.com-刚力彩芽强捧| www.472954.com-时时彩人工计划彩友| www.561524.com-天际彩票真的假的| www.636727.com-儿童彩虹画-| www.765828.com-和值跨度快三| www.851433.com-去店里咋买彩票| www.913265.com-浙江福彩官方网站| www.979257.com-中国福体彩票| www.fu70.com-最牛彩票广告语| www.yp88.cc-陕西福彩网-| www.35hj.com-星期三彩票开奖查询| www.0900.net-如何线上买福利彩票| www.7785.cn-分分彩5星-| www.32828.cc-许昌灵井彩礼| www.79357.com-想开个体彩店怎么开| www.033561.com-七乐彩除7走势图表| www.155383.com-竞彩庄家盈亏| www.248187.com-福彩贵州快三走势图| www.325019.com-华人彩漂测速版| www.400449.com-沈阳福彩兑奖中心| www.553425.com-时时彩长龙规律总结| www.628513.com-顶级彩票登入| www.703778.com-派彩网走势图在线| www.787771.com-竞彩足彩澳客| www.866610.com-昨天彩票号-| www.934283.com-智博彩票是真的假的| www.990906.com-怎么攻击彩票平台| www.qs3.cc-吉林市彩票兑奖地址| www.rd13.com-青诲快三开奖查询| www.12ky.com-快三开奖周期| www.84go.com-福利彩票亭-| www.2158.biz-卖体彩好还是福彩好| www.8232.top-奔腾彩票12711| www.31520.cc-玩时时彩心得与技巧| www.77700.com-悟空彩票有人玩吗| www.033252.com-易彩票app的网址| www.113278.com-体育彩票app下载| www.188276.com-快三彩票能做吗| www.262283.com-皇都彩票安卓登录| www.466445.com-七乐彩往期2000| www.557536.com-中双色球彩票大奖| www.617128.com-牛彩彩票是假的吗| www.679526.com-搜狗彩票net| www.760637.com-重庆时时彩个位胆码| www.971503.com-厦门福彩网点查询| www.av15.com-官方江苏快三| www.sq60.com-浙体彩6十1开奖| www.13wt.com-天下彩txcpcc| www.82si.com-下载亿彩彩票| www.3477.site-中利彩票app| www.12474.com-体彩双色球机选号码| www.56693.cc-速彩网注册邀请码| www.052996.com-彩票网哪个靠谱| www.137404.com-分分彩个位必中| www.215333.com-瑞彩祥云彩票靠谱吗| www.288197.com-360足彩军长推荐| www.396161.com-简笔画彩虹-| www.517572.com-55彩票网注册| www.587063.com-七乐彩尾数走势| www.659954.com-七星彩号码推荐软件| www.776906.com-休闲快三正反面教学| www.867965.com-特区彩票网网站| www.948161.com-众彩网程远预测汇总| 55世纪www.202115.com| www.et58.com-江苏快三外挂| www.vm25.com-牛彩网三d字谜| www.06no.com-河南体彩电话| www.72kp.com-彩票大赢家组选遗漏| www.1045.vip-福建多金彩走势图| www.02544.cc-新浪彩票网站下截| www.54244.com-时时彩后三遗漏| www.97785.cc-彩光嫩肤仪-| www.059580.com-彩神通时时彩专业版| www.160528.com-福彩3d和差秘籍| www.241447.com-彩票2元下载软件| www.330581.com-彩神可以玩吗| www.397645.com-春节体彩上班时间| www.537687.com-彩色宝石排行榜| www.618410.com-体彩公益宣传美篇| www.683815.com-体彩站点查询| www.756524.com-208彩票网客户端| www.863113.com-智慧彩走势图| www.929789.com-七乐彩胆拖计算表| www.980721.com-彩77网址下载| www.gd97.com-体彩排列五出奖号码| www.wp88.com-江苏快三遗漏号码| www.10mv.com-云南体彩3d走势| www.74dg.cc-八卦玄机彩图四不像| www.0844.net-足彩倾家荡产| www.9106.vip-贵阳多彩贵州街图片| www.58312.cc-5亿彩票网会被骗吗| www.219167.com-福彩快三遗漏号| www.286873.com-在线时时彩算号器| www.376764.com-体彩开奖助手开机号| www.491918.com-体彩大透开奖| www.592777.com-彩虹5无人机多少钱| www.668597.com-境外博彩菜农| www.733847.com-彩票预选走势图软件| www.799959.com-福彩开奖双-| www.868673.com-甘肃省快三走势图| 好彩网www.887763.com| www.jo02.com-福彩双色球预测推荐| www.ze28.com-湖北快三口诀| www.16vs.com-双彩网赚钱是真的吗| www.525.pw-绍兴福彩官网| www.4028.vip-sb博彩全称-| www.8855.site-黑彩返点计算公式| www.52120.com-吉利三分彩开奖结果| www.89941.com-093彩票网站| www.035986.com-五分时时彩相关软件| www.132119.com-中端彩妆加盟| www.202367.com-贵州省福彩中心电话| www.285499.com-安徽快三技巧与分析| www.379191.com-三d乐彩网开奖结果| www.478900.com-郑州体彩网点申请| www.544282.com-网易彩票中彩网| www.622559.com-彩涂钢板规格| www.678131.com-福盈门彩票网| www.737759.com-幸运彩票网会员注册| www.801103.com-舟山福彩下载| www.863392.com-彩票接口商-| www.913342.com-浙体彩6十1走势图| www.964328.com-体彩官网首页电脑版| 博乐彩票www.35918d.com| www.by83.com-七星彩票术语大全| www.pp21.com-今天湖北快三分布图| www.6mu.com-怎么用数学计算彩票| www.47is.com-彩仙小神瓶奖金制度| www.083.hk-分分时时彩规律| www.2325.biz-勇士团队彩票靠谱吗| www.6954.net-破网络私彩诈骗案|