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.653029.com-8炫彩玩法-| www.679301.com-老公总是玩彩票| www.62ga.com-ai彩色半调-| www.9595.live-福彩3d工具哪个好| www.0826.net-开足彩店赚钱吗| www.052955.com-竞彩足球500网| www.187759.com-快三的网址是多少| www.292986.com-福彩专家杀码| www.414006.com-挂彩的征兆-| www.193914.com-中彩堂正版-| www.303993.com-甘肃省福彩天地报纸| www.431643.com-彩票礼拜几号开奖| www.641886.com-福彩柜台-| www.0527.biz-今天福彩图-| www.005347.com-彩票砍龙概率| www.117359.com-竞彩比分直播竞彩| www.633566.com-足彩2元能中多少钱| www.584476.com-中国福利彩票最大| www.555037.com-彩票大神-| www.566645.com-凯发彩票官网| www.343768.com-玩彩票赚钱软件| www.732019.com-胜负彩模拟投注| www.wf96.com-时时彩后三计划| www.40ku.com-看看福彩3d专业版| www.027153.com-英国5分彩开奖结果| www.139894.com-上海体彩兑奖地方| www.199023.com-河南快三遗漏一定牛| www.fz13.com-彩神娱乐平台| www.092891.com-福彩6十丨开奖结果| www.387124.com-七彩球开奖结果| www.772115.com-体彩竟彩查询结果| www.230406.com-快三湖北-| www.415754.com-uc彩票国家在查嘛| www.627812.com-玩彩票平台哪个好| www.718711.com-彩吧是什么意思| www.868279.com-七星彩图纸开奖| www.mj83.com-重庆时时彩下载| www.21js.com-大数据分析彩票| www.0378.cn-96彩票苹果-| www.35107.com-玩彩票亏损群| www.119212.com-凤凰彩票刷钱| www.66236.cc-福彩3d走势彩宝| www.593078.com-航天11院彩虹公司| www.986641.com-竞彩网开奖结果| www.962067.com-黑彩平台怎么盈利的| www.302422.com-幸运彩栗-| www.795285.com-彩开头的四字成语| www.77120.com-足球竞彩结果查询| www.171455.com-七星彩口诀-| www.337716.com-打开福彩天气网| www.110522.com-彩牛彩票app| www.430124.com-利彩提现-| www.686015.com-福利彩票下载下| www.hh61.cc-乐彩彩票app下载| www.6852.me-极速度3d彩票| www.gx6.com-快三中奖助手破解版| www.057863.com-河北快三号码大全| www.389089.com-中囤足球彩票网| www.020830.com-福彩2d多少钱| www.74966.com-9号彩票下载| www.6976.cn-时时彩后二规律技巧| www.012272.com-最新海南七星彩预测| www.33pf.com-福采彩3d基础知识| www.512675.com-包吃招聘彩票销售员| www.r45.top-彩票开奖开源接口| www.1824.vip-6161彩票-| www.056797.com-韩式15分彩计划| www.267608.com-各种彩票玩法与技巧| www.558083.com-江苏福彩抽奖活动| www.768967.com-软件亚博彩票| www.986303.com-玩彩票大平台可靠吗| www.qu74.com-快三多久开一次| www.166082.com-初学快三-| www.66879.cc-彩票扫码查询| www.101491.com-彩票aqq下载大全| www.52268.com-体彩浙江飞鱼彩票| www.269730.com-皇帝彩票app| www.263339.com-极速时时采彩开奖| www.801580.com-鼎盛彩票网9192| www.62vj.com-晋城彩票转-| www.509533.com-淘金彩票安全吗| www.101057.com-8亿彩是骗局吗| www.356842.com-体彩复式怎么玩| www.485456.com-快乐分分彩在线计划| www.gt21.com-河南快三合之| www.97725.cc-彩37-| www.mx72.com-港视网中彩网| www.032795.com-快三团队屠龙| www.288280.com-彩票屠龙计划客户端| www.428425.com-正好彩票网胆码| www.756530.com-超兴彩票-| www.877252.com-七乐彩齐鲁推荐号| 51彩票www.87498.com| www.17se.com-竞彩足球竞彩版| www.8764.xyz-刮刮彩票在哪批发| www.039981.com-福彩快3的玩法介绍| www.202132.com-福彩端下载安装| www.318490.com-福彩排列3奖金| www.571735.com-大发彩票是正规的吗| www.40dt.com-返还彩礼诉状| www.6925.biz-福利彩票投注站注销| www.ri75.com-自己做庄5分快三| www.9912.net-竞彩足球胜负14场| www.963317.com-彩铅彼岸花图片大全| www.cu85.com-彩票站加盟费| www.77lg.com-乐彩网摘图谜总汇| www.76338.cc-彩博士软件下载| www.111603.com-霸王彩票-| www.511828.com-大地彩票软件| www.628247.com-新彩彩票官可靠吗| www.pa28.com-即开彩下载-| www.4243.net-福利彩票乐彩| www.53353.com-安徽快三每天多少期| www.738036.com-下载5百万彩票| www.897257.com-澳洲彩票中奖规则| www.21448.com-时时彩三星做号技巧| www.335725.com-福利彩票复式怎么买| www.39lk.com-人工彩虹的物理原理| www.5nz.com-常州体彩中心李澄宇| www.7749.biz-35彩票网开奖导航| www.158404.com-快乐彩怎么看五行| www.675592.com-彩票开奖查询23期| www.777822.com-南宁福骰快三| www.80454.com-恒大彩票提现| www.93319.cc-今晚七星彩买什么好| www.k40.xyz-吉林快三长春微信群| www.cai2399.com皖快三走势图| www.758078.com-彩票中一等是真的吗| www.979672.com-彩票站赊账合法吗| www.034986.com-坤彩科技千股千评| www.381942.com-彩票能不能折叠| www.925327.com-时时彩代理加盟| www.964343.com-内蒙快三手机软件| www.fb39.com-快彩是骗局揭秘| www.495563.com-七星彩册子论坛| www.0954.date-玩彩需要什么心态| www.082878.com-2468天天开彩| www.94398.com-贵州体彩专家预测| www.539489.com-釉上彩餐具安全吗| www.36588.com-网络博彩推广话术| www.050654.com-济宁体彩中心电话| www.255334.com-快三彩票书籍| www.518510.com-类似全民乐的彩票| www.132046.com-娘家说帮存彩礼钱| www.5448.cm-南方双彩3d试机号| www.700274.com-甘肃快三和值号推荐| www.861050.com-广东好彩1遗漏| www.026774.com-500购彩邀请码| www.977365.cc-福彩3d定位胆技巧| www.1576.top-彩宝彩票吧-| www.8108.loan-体彩中奖后兑奖时间| www.014004.com-江苏十分钟快三| www.296899.com-惠民彩票合法吗| www.378927.com-k彩2·0下载| www.567551.com-天津市福彩中心电话| www.735629.com-彩票分析师证| www.895212.com-优彩网彩票网址| www.h12.in-网易彩票红球杀号| www.688437.com-竞彩推荐群-| www.126250.com-抢红包的彩票| www.356445.com-体彩足彩兑奖规则| www.791342.com-时时彩助手挑码| www.904978.com-明星彩票快三合法吗| www.81tm.com-中福彩积分兑换账号|