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.690352.com-码彩走势-| www.810961.com-福彩米子汇-| www.cp512.com-内蒙快三专家预测网| www.00dm.com-描述彩虹的优美句子| www.2266.live-彩票跳槽彩金| www.077569.com-百宝彩走势图下载| www.76889.com-优彩网时时彩票| www.116588.com-网上彩票买是真假| www.54325.com-8g神话彩票-| www.365790.cc-人人中彩栗-| www.772699.com-重庆时时彩破解法| www.977254.com-彩礼制度-| www.zb10.com-彩票0165-| www.6613.wang-青蛙彩票开奖| www.85813.com-99彩票软件-| www.058935.com-关注彩票3d-| www.143689.com-福彩3地图迷新彩吧| www.20ij.com-新浪胜足彩-| www.086861.com-篮球彩票怎么玩法| www.269192.com-手机网上赚钱送彩金| www.844410.com-竞彩双选盈利| www.24052.cc-36o全国彩票开奖| www.33283.com-私人彩-| www.005189.com-七星彩明月珰番外二| www.113641.com-福彩3d和值8| www.086982.com-福运彩骗局-| www.152505.com-491.cc彩票网| www.352499.com-彩票时时乐-| www.982706.com-体彩微信公众号| www.in31.com-105彩票软件| www.318873.com-人人购福彩-| www.406863.com-福彩天宇字谜| www.904196.com-鸿运来彩票网| www.906067.com-国彩454cc-| www.245249.com-广西官方网快三| www.59398.com-彩铅古风人物画| www.s22.xyz-湖北快三分布| www.87gt.com-金口诀测彩详解| www.3857.in-宝马彩票下载| www.144358.com-安微省福彩快三| www.630528.com-大乐斗彩票怎么玩法| www.991973.com-湖此快三走势图| www.61rj.com-福彩3d钱王预测| www.093933.com-网友带我玩高频彩| www.822042.com-彩票福利彩票| www.965150.com-大发快三单期计划| www.mt00.com-汇彩网登录-| www.128444.com-一分快三ios下载| www.080999.com-网彩大吉娱乐| www.174649.com-贵州福彩中心地址| www.913810.com-台湾大福彩开奖号码| 梦想彩票站www.43131v.com| www.iz75.com-体彩竞彩网比分网| www.687768.cc-福彩往期开奖号码| www.794691.cc-体育彩票竞彩店转让| www.775835.com-河北省彩票中心电话| www.949176.com-快三遗漏数据江苏| www.cai9300.com昨天福彩开奖结果| www.d55.com-彩票11码聪明组合| www.94vg.com-玩彩票钱全部输光了| www.658238.com-湖北广电彩票怎么样| www.123493.cc-双彩网网址导航| www.223322.cc-足球竞彩500| www.163434.com-体彩大乐透资讯| www.389787.com-东莞大朗彩票站转让| www.637303.com-小米彩虹5-| www.008326.com-19041胜负彩| www.183184.com-分分快三是真是假| www.257350.com-江苏福彩快三玩法| www.325077.com-华人官方彩票登录| www.04zc.com-买彩票中奖最高的人| www.85870.com-我附近体育彩票站| www.110498.com-发大财彩app| www.25723.cc-菜鸟彩票注册| www.712948.com-江苏快三出号走势图| www.851738.com-时时彩计算胆码软件| www.977899.cc-纸箱数码彩色印刷机| www.ja13.com-彩票官方版app| www.150339.com-中国体彩中心| www.265376.com-快三多久开一次奖| www.64qy.com-腾讯分分彩输了3万| www.53156.cc-老时时彩彩票走势图| www.110945.com-彩吧图库3d连线| www.93172.com-彩钢瓦屋顶防水隔热| www.323369.com-大富翁彩票官网站| www.582675.com-宝盈彩票是骗人的吗| www.799957.com-郑州快三-| www.894008.com-爱彩乐电脑版下载| www.438107.com-彩民彩票客服电话| www.8559.in-彩票双色球专家杀号| www.76220.com-文成县福利彩票| www.503732.com-中超足彩怎么买| www.18tt.com-七乐彩周末开奖吗| www.94761.com-彩票销售额-| www.424324.com-七彩语文杯作文大赛| www.510618.com-如何回复彩虹屁的梗| www.566775.com-甘肃快三k3??| www.621382.com-今天乐彩网摘| www.676660.com-8万彩礼多吗| www.015853.com-七星彩画板-| www.062750.com-今日竞彩专家预测| www.313686.com-今日竞彩专家推荐| www.44oc.com-博友彩一分快三首页| www.ix63.com-2019年彩票休市| www.16ss.cc-竞彩论坛-| www.265676.com-广西快三内部| www.387033.com-彩贴纸-| www.061135.com-欢乐彩直播-| www.310158.com-亿网彩票怎么样| www.1973.cc-巨龙彩票app下载| www.8039.org-天津时彩开奖直播| www.783821.com-新加坡福利彩票网站| www.969118.com-天天中彩票3588| 彩61www.611874.com| www.284911.com-竞彩足球混合| www.472487.com-福彩晚秋和值字谜| www.586904.com-足球彩票大约多少钱| www.366265.com-荷花彩色铅笔| www.365611.com-高中绘画作品彩铅| www.444171.com-彩31贴吧-| www.4909.top-500c0m彩票网| www.17586.cc-探探加到彩票托| www.58717.com-彩吧图中国彩吧图迷| www.99510.com-时时彩个位计算方法| www.066371.com-黑彩5分钟一期| www.126400.com-印尼五分彩开奖结果| www.197455.com-发达娱乐彩票| www.932585.com-网赌时时彩有作假吗| www.977433.com-河南叶县结婚彩礼| www.hs57.cc-体彩北单实体店| www.wo63.com-七天彩网站-| www.174618.com-谁有稳定的快三平台| www.237228.com-合肥快三公交| www.39458.com-彩票客服电话| www.46811.com-青娃彩票生肖对照表| www.752776.com-彩票天天存天天送| www.838326.com-彩钢瓦屋顶防水隔热| www.140482.com-99彩店-| www.220793.com-大奖彩票下载| www.308677.com-大乐透开机号彩票| www.365335.com-网络快三赌大小技巧| www.374144.com-体彩快报开奖号码| www.085957.com-重庆五星彩走势图| www.7110.vip-彩盈娱乐手机版| www.786602.com-中国贵宾室彩票| www.61977.com-购彩娱乐-| www.043247.com-现在哪里可以买足彩| www.156399.com-400好彩堂一肖| E彩堂www.43818b.com| www.313100.com-彩客网比分直播| www.54jv.com-沈阳福彩发行中心| www.606715.com-世界杯买不了足彩| www.731272.com-易彩堂注册-| www.qg94.com-好彩双爆多少钱一包| www.1094.vip-竞彩模型怎么做| www.829217.cc-地方彩开奖信息| www.130.tv-彩票在线计划稳赢| www.581370.com-彩票走势看号技巧| www.956586.com-55彩票-| www.984850.com-福彩迷平台是骗局吗| www.ez28.com-博牛彩票app| www.568142.com-幸运彩票如何提现| www.647102.com-体彩胜负彩领奖| www.731984.com-中国最大的彩票论坛|