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.yt84.com-长春市体育彩票中心| www.285586.com-易彩彩民福地| www.204388.com-彩票500走势图| www.wc47.com-时时彩大小稳赚法| www.148896.com-飞乐迷彩羽绒服| www.3782.com-体育彩票掌游彩| 梦想彩票www.33112k.com| www.316326.com-东方集团一分时时彩| www.6146.vip-福彩3d带坐-| www.181517.com-快三三不同号规则| www.987520.com-百色福利彩票中心| www.pf63.com-福彩快3奖金| www.36998.com-酷彩吧手机app| www.606966.com-家彩之家3d-| www.687085.com-福彩3d藏机图谜语| www.765442.com-什么彩票台子反水高| www.840372.com-福彩刷流水兼职| www.909809.com-乐彩正规吗-| www.971283.com-体彩排五的开奖号| www.cp5768.com-买快三输的最惨的人| www.704141.com-裙彩35查询-| www.59dk.com-澳门赛马结果及派彩| www.5494.cc-江苏亿彩快三查询| www.899665.com-幸运彩开奖-| www.979371.com-南通体彩中心在哪| www.yn6.com-黑彩票平台排名| www.a11.website体彩大乐透兑奖结果| www.829506.com-光彩票-| www.517619.com-七乐彩几点开| www.700195.com-v98彩票下载| www.267922.com-快三宝典下载手机版| www.102295.com-世界三大博彩| www.521213.com-彩票q群-| www.031873.com-下彩网正规吗| www.522483.com-56时时彩计划| www.9272.xyz-下载福彩3d藏机诗| www.456278.cc-乐博彩票怎么破解| www.722284.com-福彩中几个号算中奖| www.06149.com-中彩改棋牌app| www.90993.com-3d天天中彩吧字谜| www.538603.com-福彩3d大花虎预测| www.76327.com-老郑足彩分析| www.44ox.com-红树林国际彩票| www.1037.cn-彩票开奖排三试机号| www.9749.cn-彩宝预测-| www.679124.com-快购彩票是干嘛的| www.757897.com-天天手游彩票| www.827685.com-三分钟时时彩走势图| www.888122.cc-赛马派彩结果| www.950340.com-乐彩网怎么打不开| 彩乐乐www.3005.am| www.026851.com-双彩工作室-| www.125411.com-国家对彩票的新规定| www.4335.cn-鑫彩下载-| www.z02.org-快三走试图湖北快3| www.84by.com-旭彩玩具车-| www.fx39.com-3d福彩开奖-| www.9574.vip-彩票起名字-| www.806195.com-中彩网2020-| www.910206.com-彩神彩专家专栏| www.983719.com-彩票两平台对刷赚钱| www.30628.com-吉林快三振福图| www.799610.com-口袋彩票店铺| www.913653.com-河南幸运彩彩经网| 大赢家彩票平台www.805357.com| www.tb31.com-时时彩中奖-| www.401871.com-看一下七星彩| www.560888.com-l7500乐彩网| www.672959.com-排三排五乐彩论坛| www.911877.com-天天彩票网站官方网| www.972883.com-凤彩网杀号-| www.dh06.com-七星彩玩游戏| www.55eu.com-体彩和福彩是一家吗| www.4090.in-香港彩报-| www.386613.com-台湾威力彩-| www.502725.com-私彩开奖-| www.480203.com-北单进球和竞彩进球| www.315192.com-买彩票有什么规律| www.31018.com-猛犸平台百乐彩票网| www.004428.com-三彩官方旗舰店毛衫| www.0971.hk-财神彩票站-| www.162736.com-170彩票网网址| www.0166.cn-中彩网字谜专区| www.7025.cm-如何买篮球彩票| www.jg06.com-快三054期-| www.149649.com-仲彩网站-| www.76er.com-彩票售票几点结束| www.144363.com-时时彩组三组六平刷| www.365294.cc-北京体彩中投注站| www.535776.com-彩票注怎么算| www.659738.com-速彩娱乐登录| www.797827.com-三d分析预测彩吧| www.936312.com-广西快三综合走势图| www.ge5.com-七星彩奖表-| www.9zl.cc-七彩祥云来娶我图片| www.1807.cn-8g登录神话彩票| www.604986.com-彩色苹果箱子批发| www.4905.cc-霞彩飞扬服饰| www.806869.com-香港赛马彩票平台| www.67727.com-ak彩票馆诈骗案例| www.940012.com-天津时时彩历史开奖| www.ol41.com-福彩种类及规则| www.72606.com-彩谜天地联销图今天| www.gd7.com-重庆时时彩突然停了| www.307992.com-派彩网采集器| www.409847.com-微信彩票app| www.613058.com-凤凰彩票投注站| www.308849.com-彩计划高手福彩| www.694694.com-吉林长春快三走势图| www.109158.com-h.k百彩网-| www.219647.com-福建快三推荐一定牛| www.41sg.com-七星彩按顺序对奖吗| www.40103.com-2分彩下载-| www.475781.com-网络彩票没被黑过| www.063271.com-彩票店内还能卖什么| www.5599.pw-福彩3d千元晚报| www.676631.com-足彩大赢家媒体预测| www.839526.com-彩票开奖查询上一期| www.961338.com-竞彩猫app苹果版| www.2959.biz-福彩3d公式怎么算| www.45694.com-彩票根号-| www.365885.com-大众彩票最新消息| www.115194.com-彩票顶呱刮平台| www.254863.com-时时彩官方计划网站| www.318043.com-中国彩票兑奖期限| www.550569.com-福利彩票网络购买| www.9039.com-怎么查询福彩站点| www.38611.com-环彩app正规吗| www.ot93.com-中福快三一分钟| www.51il.com-收米啦足彩-| www.8366.cm-红辣椒七星彩| www.740197.com-福彩2013035| www.8900.cm-竞彩难中奖-| www.006419.com-快三二同号怎么选| www.155807.com-总彩票心得-| www.9363.cm-东营福利彩票中心| www.106703.com-福彩兑奖期限| www.119444.com-江苏快三能买大小吗| www.611377.com-彩虹六号围攻官网| www.951675.com-彩狮app计划软件| www.41694.com-速盈彩票下载| www.013129.com-南国彩票七星彩论| www.144882.com-江苏快三爱乐彩| www.67488.cc-彩票与投资-| www.723395.com-镇江彩票中奖| www.am83.cc-苏州福彩网-| www.5388.hk-快三和值怎么买| www.630717.com-极速度3d彩票| www.786664.com-花样快三套路教学| www.272982.com-公益公益福彩| www.442445.com-欧冠彩经-| www.705111.cc-彩票中奖助手下载| www.966327.com-01彩票吧-| www.20ld.com-大乐透彩票能折叠吗| www.2263.cn-鸿易彩票是真的假的| www.236165.com-购彩平台代理| www.271285.com-好彩柠檬爆多少钱| www.881904.com-刷彩金兼职平台| www.947172.com-福彩湖北快三预测| 500万彩票www.96386w.com| www.543198.com-快三技术-| www.893714.com-安徽快三和值推荐号| www.791238.com-羊城晚报晚晚彩| www.275713.com-彩6精华版免费下载|