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天

知道了
江苏11选5 www.820817.com-彩钢瓦426是多厚| www.cp1.me-贵州中一等奖彩票| www.iy26.com-今晚福彩开奖号码| www.237374.com-华夏彩票安全吗| www.062654.com-优彩app-| www.161214.com-北京彩票站怎么申请| www.276977.com-博彩违法吗-| www.365236.cc-彩无双挂机靠谱吗| www.39323.cc-鸿运吧彩票-| www.019137.com-利彩是干什么的| www.302078.com-特区南国七星彩论坛| www.tb57.com-深圳申请福利彩票店| www.1by.cc-盈彩怎么玩才赢| www.dp89.com-吉林快三遗漏号| www.pr91.com-鸿彩彩票-| 华彩www.71399h.com| www.pz02.com-278彩票-| www.373357.com-比较靠谱的彩票软件| www.88900.cc-福利彩票3地速查表| www.041649.com-体彩竞彩胜平负结果| www.267589.com-彩票计划大全| www.391835.com-3d零一彩网-| www.l90.com-内蒙古快三豹子| www.4143.win-彩虹六号手机版官网| www.851231.com-在店彩票怎么买| www.975296.com-百度福彩双色球预测| www.tf8.com-体彩试机号-| www.727129.com-今日福彩中心试机号| www.813949.com-江苏快三杀码| www.894856.com-大发手机购彩| www.967659.com-呼市福彩中心| 大赢家彩票平台www.679610.com| www.676403.com-福彩3d天齐网论坛| www.883214.com-快彩赚钱是真的吗| www.968410.com-澳洲时时彩开奖| www.ub.com-腾讯快三官网| www.284802.com-重庆时时彩规则调整| www.388886.com-手机短信特邀彩金| www.509097.com-七星彩封机时间| www.780996.com-彩票青蛙彩导航| www.889293.com-彩乃奈奈在线放| www.983993.com-福彩2d故事-| www.ca42.com-快三软件下载安装| www.354110.com-竞彩球队身价| www.351.pw-福彩3d天罡八卦图| www.54gd.com-彩票桃菜-| www.050905.com-158全天时时彩| www.8622.in-618彩票登录| www.564738.com-河南体彩手机在线| www.655000.com-小辣椒海南七星彩| www.728083.com-官方体彩-| www.806229.com-赛马会合法彩票开奖| www.883875.com-彩界元宝双胆| www.964820.com-实时彩怎么玩| www.jb0.cc-大发快三投注网站| www.937050.com-彩福网app下载| www.52953.cc-福彩快三好坑| www.008954.com-福彩造假公布铁证| www.113113.com-竞彩猫直播预测| www.214111.com-5分快三精准计划| www.576905.com-鸿运彩票苹果版下载| www.673236.com-520百彩网-| www.770615.com-阳朔七彩公寓酒店| www.862323.com-福彩那几天开奖| www.931222.com-百度乐和彩走势图| www.988581.com-竞彩三个月挣一千万| www.dt09.com-下载快彩助手| www.460909.com-禁止出售世界杯彩票| www.88958.com-ok彩票怎么没有了| www.361292.com-万达彩票娱乐平台| www.723298.com-江苏省体彩中心电话| www.3090.xyz-彩吧三版-| www.368906.com-一人多次中奖彩票| www.659419.com-财神快三-| www.701264.com-今晚足球彩票对阵表| www.820654.com-体育彩票提现要多久| www.929750.com-彩票扣税-| www.983745.com-百万彩票选号器| www.cp8158.com-易彩快3开奖规律| www.7474.cm-如何办理体彩| www.805420.com-河内时时彩官网地址| www.47969.com-快三怎么看号码| www.14500.com-彩神五码计划| www.848920.com-分分快三怎么看大小| www.908418.com-七星彩抓规律软件| www.973061.com-彩虹世界破解| 乐彩网www.685756.com| www.581953.com-爱彩乐网站帳号| www.427338.com-狗万足彩-| www.880319.com-包头福彩招聘| www.152408.com-彩票一分快三计划| www.964361.com-广东体彩官网首页| www.bm19.com-神州彩怎么样| www.526.la-时时彩胆码计划| www.316098.com-上海体彩竞彩店| www.173751.com-我要查彩票开奖结果| www.673447.com-体彩开奖排列三| www.288991.com-彩票黑平台怎么骗钱| www.004760.com-体彩最大遗漏数据| www.595318.com-福彩数字3-| www.688664.com-彩票平台接待| www.766456.cc-竞彩足球直播开奖| www.832108.com-七星彩机选投注在线| www.891999.cc-蚂蚁团队彩票计划| www.961359.com-彩票五行八卦取数法| 福彩www.2109k.com| www.164802.com-500彩江苏快三| www.429968.com-胜负彩欧赔指引| www.033944.com-体彩排列三独胆双胆| www.598262.com-彩票投注点怎么挣钱| www.321989.com-南国七星彩论坛图现| www.sy77.com-彩票都有什么种类| www.76526.com-体彩足球怎么玩| www.qr39.com-金部彩票-| www.983608.com-第九彩票是什么| www.q52.top-吉林快三历史奖号| www.633190.com-竞彩篮球平局怎么办| www.393092.com-吉林快三三不同赔率| www.7060.pw-易网彩票开奖信息| www.34927.com-吉林快三遗漏三同号| www.022092.com-区块链彩票app| www.092891.com-福彩6十丨开奖结果| www.1934.xyz-极客彩票-| www.693305.com-辽宁体彩调整| www.792317.com-彩票店最多能兑奖| www.866928.com-昨晚彩票出什么| www.942832.com-众彩彩票隶属公司| www.ye90.com-三个数的彩票叫什么| www.779895.cc-中彩易-| www.79fe.com-彩票性缘原作者| www.700072.cc-福彩3d规则及奖金| www.529634.com-直播彩票的主播| www.1870.cc-体彩提现多久到账| www.731347.com-2元彩票网走势| www.1382.vip-彩运来官网-| 福利彩票www.846631.com| www.55pw.com-查云南体彩30选七| www.89371.com-缅甸新品双爆好彩| www.262483.com-湖南省福彩中心电话| www.352519.com-靠谱的黑彩平台| www.422205.com-好的福彩3d的书籍| www.521600.com-重庆时时彩在哪下载| www.350551.com-彩皇网时时彩| 福彩网www.055b.cc| www.7570.org-海南7星彩软件| www.640.com-福彩3d组3技巧| www.004933.com-浙江体彩大乐透| www.089055.com-内蒙快三一定件| www.639894.com-3000万彩票-| www.482399.com-哪种彩票是五位数的| www.073298.com-懂球帝傲赢彩票| www.f33.org-乐彩无法提现| www.512327.com-98彩票网登录| www.586221.com-七乐彩最准预测| www.085223.com-大牌彩票ios| www.166670.com-彩神8官网-| www.468628.com-福彩刮刮乐官网| www.23ss.com-99彩票平台真假| www.53411.com-甘肃快三正常规律| www.733590.com-辉煌团队计划彩票群| www.888823.com-87彩店怎么当店主| www.kg92.com-快三投注技巧贴吧| www.4425.net-久彩彩票ios| www.892837.com-一个叫玩彩票的软件|