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天

知道了
时时彩一天赚2000技巧 www.69375.com-彩博棋牌送彩金| www.214348.com-人人彩票网提现| www.311268.com-甘11选五爱彩乐| www.397508.com-网彩是不是诈骗电话| www.558922.com-彩虹屁夸男生| www.644812.com-多多中彩票是真的吗| www.813993.com-爱彩人江苏11| www.899823.com-天天彩票注册送88| www.975207.com-彩票店号码-| www.dy33.com-澳客体彩-| www.yl63.cc-中福彩票快三| www.32rk.com-体彩3地出什么| www.1145.cm-湖北快三号码表图片| www.8608.vip-百宝彩规则-| www.48449.com-竞彩优化工具app| www.99616.cc-山东省福利彩票网| www.080206.com-满堂彩官方网| www.157932.com-竞彩足球ios版| www.289980.com-高频彩停止-| www.385201.com-拍拍贷新彩虹计划| www.520672.com-江苏快三杀号推荐| www.600968.com-欢迎来到苏宁彩票| www.683733.com-彩票灵异事件| www.771756.com-澳洲时时彩平台| www.896611.com-足球博彩概率学| www.970669.com-迷彩兔app下载| www.nd9.com-湖北快三查询| www.sd05.com-彩票龙虎规律| www.20qi.com-2月16日体育彩票| www.555.cm-旭彩彩票网站| www.5110.biz-珍爱网彩票托| www.11962.com-福利彩票数字3单式| www.60488.cc-重庆1.5分彩| www.057435.com-大发快三淘彩票| www.146700.com-1号彩票官网下载| www.243327.com-快彩网是合法的吗| www.326553.com-七星彩兑奖期限多长| www.410426.com-福彩三十六选7彩值| www.522677.com-中华彩票网在线阅读| www.603359.com-98年世界杯彩票| www.684853.com-彩票代投赚佣金| www.772445.com-足球博彩看盘| www.928917.com-彩拍ios软件下载| www.994876.com-彩票号码计算| www.yk4.cc-体彩输钱-| www.sy89.com-彩票有什么种类| www.20yq.com-5d体彩开奖结果| www.487.me-福彩大奖-| www.4941.cn-d9彩票现在的网址| www.07062.com-香港澳门彩票平台| www.55690.com-彩票真的没有规律吗| www.005239.com-体彩开机号试机号| www.082116.com-彩妆连锁加盟| www.155227.com-希腊十分彩开奖号码| www.316213.com-体育彩票店室内装修| www.392244.com-大乐透时时彩| www.533303.com-福彩上海-| www.622271.com-吉林快三区走势图| www.699507.com-www.168彩票| www.783830.com-快三实用选号技巧法| www.866142.com-信誉彩票大全| www.937230.com-十二釉彩大瓶| www.984827.com-743好彩官方下载| www.qt80.com-富人怎样买彩票的| www.8io.com-快三包九什么意思| www.69oq.com-网络彩票真假问题| www.1301.vip-黑彩平台排行| www.9616.in-彩色的中国资料| www.53646.com-山东体育彩票扑克3| www.002293.com-福州彩票定位胆| www.074725.com-彩富网19cf-| www.141382.com-湖北体彩开奖公告| www.221603.com-打彩一天赚几万| www.298290.com-购彩吧688345| www.370076.com-vivox23炫彩| www.469942.com-网恋博彩诈骗怎么办| www.557775.com-重庆十字彩怎么压| www.630378.com-足彩任选九倍数| www.708773.com-中国竞彩网宣传平台| www.789675.com-投彩跟计划骗局| www.868313.com-有多少人被亿彩骗了| www.hf32.com-今日福彩3d字谜| www.yv75.com-中国湖南福彩官网| www.25qe.com-十大外围足彩网站| www.870.tv-时时彩五星缩水方法| www.5137.win-福彩走势图不连线的| www.04456.cc-微彩骗局-| www.51593.cc-学生适合买什么彩票| www.89057.com-一彩娱乐-| www.046906.com-彩票网上兼职赚钱| www.200598.com-彩票123没有了| www.274387.com-广东彩票11选5| www.369705.com-彩票中五位数有奖吗| www.463875.com-天狼星七星彩预测| www.551278.com-彩票走势图下载大全| www.656765.com-玩爆福利彩票游戏机| www.746601.com-海南七星彩局王图纸| www.820525.com-天津彩票app下载| www.890156.com-彩名堂免费计划下载| www.958404.com-分分快三算号器| 奔驰彩票www.29178f.com| www.ex51.com-彩票开挂神器免费| www.wg57.com-505彩票下载| www.10wg.com-河内彩票计划| www.81nn.cc-足彩单场固定规则| www.1698.biz-谁在玩名人彩票| www.11277.com-烟台市福利彩票| www.53386.cc-时时彩押越大越不中| www.96357.com-博纳彩票网址| www.058935.com-关注彩票3d-| www.170330.com-快三北京开奖走势图| www.256369.com-广西电脑福利彩票| www.327076.com-澳洲五分彩走势图| www.392527.com-江苏体彩兑奖| www.531380.com-彩铅古风绘画| www.611313.com-如何拉人买彩票| www.679281.com-彩678官网-| www.753520.com-彩12彩票苹果版| www.878058.com-上海福彩网官方| www.956089.com-彩票无规律-| www.996712.com-福利彩票机选和自选| www.fx.cc-上海快三怎么玩| www.mj24.com-时时彩注册送88元| www.x78.shop-599彩票网址| www.49zl.cc-中国福彩彩吧图库| www.547.net-快三必中高手大全| www.3857.biz-2019年彩票中奖| www.8966.bid-网上国彩骗局| www.66313.cc-国家快三平台官网| www.022501.com-彩票大神跟单猫腻| www.091158.com-体彩店试题-| www.151198.com-3d彩票投注技巧| www.255062.com-时时彩官方开奖| www.321116.com-全国开奖安全购彩票| www.385004.com-盈盈彩票官方网址| www.521159.com-北京快三过年停几天| www.584672.com-苏宁彩票平台靠谱吗| www.654424.com-梦想彩票站彩种| www.755721.com-安全购彩网站| www.835338.com-ap彩票-| www.896523.com-派彩手机版吗| www.949315.com-五福彩票下载送15| www.985886.com-福彩3第字图迷会总| www.cp161.cc-福彩快三走势| www.js65.com-体彩屋安徽快三| www.zq24.com-3d彩票开奖号今天| www.20uo.com-七星彩第19029| www.653.cc-分分彩百度贴吧| www.3876.cm-香港星彩网-| www.8706.in-8828彩票诈骗| www.85743.com-彩铝板-| www.030063.com-玩彩网8-| www.098768.com-官网高频彩-| www.157131.com-北京朝阳区彩票中奖| www.268107.com-福彩缩水软件下载| www.348182.com-七乐彩的软件有吗| www.413195.com-足彩计算-| www.510714.com-沂水彩虹谷门票价格| www.574404.com-关于703彩票| www.634896.com-建盏怎样煮出七彩来| www.761852.com-彩色复印机2083| www.826798.com-彩票造假事件刘亮| www.877873.com-重生之中彩票人生| www.949537.com-快彩北京11选5|