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天

知道了
百盈PK10 www.866646.com-3d彩票开奖试机号| www.184556.com-湖北快三跨度预测| www.21148.com-时时彩预测平台下载| www.127988.com-彩虹儿歌歌词| www.334925.com-江苏快三走遗漏| www.556136.com-国乐彩网址-| www.714144.com-跨度振幅体彩排列三| www.7080.top-99彩票网必中一肖| www.200057.cc-查一下体彩开奖| www.347822.com-七乐彩票充值正规吗| www.539205.com-时时彩五星单式平刷| www.708271.com-六彩票-| www.878613.com-竞彩冷门大奖| www.89ba.com-开网络私彩-| www.154401.com-足球博彩入门知识| www.343128.com-体育彩票一等奖金额| www.626380.com-彩票白菜网址| www.790532.com-360彩票幸运选号| www.961857.com-彩涂铝卷生产厂家| www.16ko.com-北京竞彩分析师招聘| www.6165.cn-世界彩票大会举办地| www.652595.com-快三选号软件手机版| www.607028.com-江西福彩时时彩开奖| www.268573.com-云南快三查询今天| www.080206.com-满堂彩官方网| www.220837.com-福彩谜一分快三| www.385673.com-合一彩票登录网址| www.555158.cc-环彩彩票官网版| www.8864.com-新疆福利彩票双色球| www.78779.cc-福彩三d贴吧| www.041382.com-uu彩票直播平台| www.125249.com-球探彩票ios| www.243711.com-彩票软件苹果下载| www.0110.site-天天彩票应用软件| www.555916.com-彩票全国代购| www.923078.com-网易天天爱彩票| www.cp880.com-快三代理犯法吗| www.349693.com-乐彩网3d首页一| www.772801.com-彩票预测专家大乐透| www.869793.com-唯彩会苹果下载安装| www.963256.com-彩钢瓦价格-| www.uu3.com-国乐彩合法吗| www.tm39.com-彩报第三版-| www.26tq.com-福彩三地天天彩报纸| www.50va.com-福彩专家双胆预测| www.8159.loan-最容易中奖的快三| www.292336.com-内蒙快三走势一定牛| www.376835.com-福彩36选7玩法| www.477978.com-北单sp彩客-| www.557789.com-单双彩票有哪些种类| www.618958.com-昭通市福彩中心| www.680562.com-中彩啦是真是假| www.757085.com-网络高频彩真的假的| www.820266.cc-彩票投注站如何赚钱| www.889294.com-q彩app正规吗| www.963492.com-星空画彩铅简单教程| 财神网www.29277i.com| www.kp36.com-全国快三平台| www.00ab.cc-用彩虹句子说说心情| www.267.cc-彩钢升级围挡| www.7390.in-中国福彩宣传图片| www.58798.com-福彩3d布衣彩图| www.041855.com-澳洲彩票怎么买| www.177313.com-大发快三规律破解器| www.308761.com-申请体育彩票投注站| www.dh71.com-体育彩票几位数吗| www.7dq.com-体彩中红号四个| www.387221.com-ag彩票下载安装| www.552398.com-爱乐彩云南11选五| www.627352.com-彩票十二生肖玩法| www.693540.com-头奖彩票系统恢复| www.783460.com-广西快三豹子遗漏| www.505198.com-63彩票送彩金| www.4yh.cc-神彩彩票网址| www.82cu.com-七星彩合分怎么打| www.3310.tv-关于彩票的搞笑图| www.bw06.com-爱投彩票是正规的吗| www.j93.net-思乐彩票机-| www.39wl.com-云南结婚彩礼多少钱| www.562237.com-开心七星彩票网| www.655674.com-官方彩票pcc蛋蛋| www.733209.com-江苏体彩大乐透网| www.801296.com-福利彩票店费用| www.879186.com-亿乐彩下载app| www.831095.com-贵州香烟贵烟多彩| www.902505.com-最新彩票报纸| www.966519.com-体彩打票键盘图片| www.69ze.com-彩票自动核对地址| www.1727.win-彩工网快三早知道| www.21354.com-河北快三计划| www.85288.cc-3d彩漫健身房| www.043939.com-彩票扫一扫查询中奖| www.143200.com-彩票开奖幸运选号| www.235246.com-福彩在线购买app| www.5062.pw-竞彩足球开停售时间| www.17292.cc-彩神计划免费版| www.72829.com-彩友多下载安装| www.020433.com-下载极速彩38| www.082886.cc-分分快三在哪个省开| www.155115.com-希腊十分彩下载安装| www.676570.com-国家规定彩礼钱多少| www.770552.com-豫彩通app官网| www.880895.com-77彩票网-| www.940029.com-快三盘是什么样子的| www.997809.com-福彩3d两码和差| www.dt71.com-凤凰彩票导师微信| www.xi07.com-七彩集团连锁企业| www.17bu.cc-彩票技巧书籍大全| 彩票宝www.3cpb.com| www.317052.com-618彩票官方网站| www.390031.com-体彩票开奖今天结果| www.002392.com-快三怎么反倍投| www.074644.com-500万彩票预测| www.144013.com-鼎盛彩票手机登录| www.217022.com-5省快三-| www.297255.com-购彩iv-| www.380164.com-福彩3d四码聪明组| www.506043.com-明天快三有豹子吗| www.589862.com-澳门六会彩生肖表| www.676408.com-江南彩姐彩票专栏| 中彩网www.81233q.com| www.qq88.com-福彩造假案视频| www.30ih.com-中原彩虹网-| www.480.pw-彩票跟投群真的假的| www.495080.com-三的走势图彩吧助手| www.03330.com-福彩开奖链接| www.71106.com-福利彩票汽车游戏| www.045377.com-福利彩票店装修费用| www.0602.top-黑龙江体彩时时彩票| www.501599.com-湖北快三开奖助手| www.574368.com-彩票预算下期| www.643705.com-u9彩票提现不到账| www.705342.com-体育彩票领奖规则| www.791905.com-彩妹排雷唯彩会| www.859630.com-彩79app下载| www.916583.com-黑客能修改私彩余额| www.968437.com-福彩3d开奖结果l| 500万彩票www.566668.com| www.4686.in-福彩导航-| www.885981.com-网购体育彩票app| www.982045.com-福利彩票开奖器| www.jx11.com-彩票计算器-| www.91950.com-福彩三d今日开奖号| www.044379.com-北京福利彩票论坛| www.124959.com-3d福彩口诀-| www.5818.club-彩七七苹果下载| www.096057.com-体育彩票的买法| www.661463.com-日本年末彩票开奖| www.185128.com-567.cc彩票-| www.497982.com-彩票怎么刷佣金| www.583372.com-078彩票软件下载| www.654163.com-红包彩票官网| www.859667.com-14亿彩票app| www.979478.com-彩金项链-| www.pm6.com-贵州快三号码预测| www.b44.net-彩票天下与你同行| www.375223.com-如何七星彩机选一注| www.531969.com-彩虹颜色排列| www.793710.com-彩票网站赌博| 熊猫彩票www.777xm.cc| www.224914.com-五分快三免费下载| www.47376.com-阿里彩票官方网站| www.120766.com-彩票投注站文库| www.280198.com-500彩票官网|