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.48332.com-一分彩票计划| www.026249.com-广西省体彩中心地址| www.121990.com-时时彩高手贴吧| www.206990.com-内蒙快三牛-| www.290737.com-新2彩票app下载| www.371848.com-亚洲杯竞彩名词玩法| www.485753.com-篮球彩票大小分盘路| www.572001.com-湖北彩票中奖| www.653655.com-网上兼职帮人买彩票| www.950497.com-彩赢彩票app| www.995470.com-易彩网是不是诈骗| www.ab89.com-河北快三三同号遗漏| www.tb51.cc-彩票有什么类型的| www.19qg.com-点击观看更多精彩| www.367.cm-体彩排列3图报| www.4570.top-中彩网糖果视频分析| www.04505.com-竞彩高手微信群| www.55820.com-彩票双色球机选怎样| www.005104.com-体彩6十l-| www.079846.com-压大小的快三app| www.150923.com-湖北福彩快三新| www.306165.com-河北体彩选五遗漏| www.381495.com-今天有什么彩票开奖| www.520532.com-金沙彩票下载| www.594460.com-七彩云mz网-| www.670046.com-台湾四星彩開獎记录| www.755176.com-高彩中彩-| www.883693.com-彩之王下载安装| www.959736.com-加拿大3分彩走势图| 网易彩票www.36788c.com| www.fo42.com-江苏e球彩开奖情况| www.xz25.com-快三控制住能赢钱吗| www.23he.com-全球彩票中大奖排行| www.0364.cm-快三跨度怎样看| www.7126.loan-新德里彩票必中算法| www.23267.com-b8彩票app-| www.67763.cc-利民彩票正规吗| www.049101.com-福彩3d东北双胆网| www.132440.com-兰考彩礼2018| www.212931.com-博彩app平台| www.286365.cc-天津福彩网-| www.390321.com-英发彩票app下载| www.513948.com-彩票店接受微信投注| www.587073.com-鸿彩彩票代理员| www.662009.com-竞彩64万-| www.770648.com-新浪时时彩冷热分析| www.862666.cc-江苏体彩网_| www.930689.com-彩票1万要交税吗| www.985725.com-彩票平台网站导航| www.cp916.com-最新广西快三走势图| www.lv85.com-足彩app-| www.l05.com-大发快三如何猜下期| www.43rp.com-体彩公益行30万| www.539.cm-福利彩票模拟摇号器| www.4570.vip-福利彩票34期中奖| www.9792.cc-七星彩中奖税怎么算| www.81816.cc-重庆时时彩遗漏查询| www.036009.com-双色球彩票-| www.129962.com-五分彩玩法规则| www.204200.com-彩迷8-| www.274719.com-大发时时彩开奖网| www.427213.com-邢台临城彩票中奖| www.525025.com-5年以上的彩票平台| www.615491.com-失控的黑彩刘雪龙| www.686831.com-中彩那天课文大意| www.762233.com-懂球帝竞彩足球助手| www.859246.com-福彩6加1中奖规则| www.912007.com-天天种彩票可信吗| www.972342.com-排列三走势图彩宝贝| www.hp53.com-上海快三彩票怎么玩| www.yz90.com-快三精准人工计划| www.22hk.cc-海南海口七星彩彩版| www.2486.mobi-福建体彩官网七星彩| www.7888.vip-天天快三彩票| www.24561.com-彩铅画初学-| www.64908.com-竞彩单关套利| www.046575.com-彩51网网站-| www.126145.com-彩8彩票安卓版| www.192822.com-河北快三预测一顶牛| www.261801.com-腾讯快三开奖现场| www.361983.com-雨后彩虹的句子图片| www.444609.com-今天黑苍蝇3d彩报| www.531608.com-简单樱花树彩铅画法| www.629257.com-彩票咨询服务| www.694341.com-金博彩票-| www.765191.com-足彩怎么玩求详解| www.867591.com-新版算局七星彩奖表| www.926436.com-彩票数字达人社区| www.977997.com-彩钢皮墙-| www.pv9.cc-快三彩票是什么啊| www.ou62.com-新昌双彩乡下塘村| www.04jy.com-如何控制大发快三| www.95xs.cc-高频彩投资是什么| www.2600.club-爱音乐彩铃电信触屏| www.7734.live-九彩坪拱北的视频| www.22002.com-中国500万彩票网| www.61364.com-家彩千禧3d试机号| www.057946.com-时时彩正规网站大全| www.131554.com-修武彩票-| www.198968.com-大神怎么玩高频彩| www.263038.com-牛彩总汇3d藏机图| www.360496.com-668彩票网专业| www.436087.com-广东福广东福彩中心| www.520853.com-怎么玩好大发快三| www.581727.com-我我要看安徽快三| www.646751.com-足彩最实用赚钱方法| www.764911.com-送28彩金的彩票| www.844542.com-福彩业务-| www.901955.com-警察怎么抓黑彩| www.962912.com-彩神邀请码-| 七彩www.53900q.com| www.ch74.com-一分快三点数怎么赢| www.rp85.com-快三猜一个号| www.08sb.com-大众彩票网app| www.69bv.com-中乐彩网是否合法| www.0366.cm-777福彩双色社区| www.7465.xyz-余姚体彩销量| www.17575.cc-两姐妹买彩票被骗| www.54034.cc-博彩套利骗局| www.92060.com-彩票大奖排行| www.039914.com-免费彩票合买软件| www.153615.com-时时彩什么叫不定胆| www.230904.com-快三单双计算公式| www.295603.com-时时彩历史开奖号| www.358408.com-生肖彩票官网| www.428382.com-国外竞彩网站| www.512396.com-万紫彩票-| www.570444.com-好彩快三是怎么回事| www.630396.com-羊城晚报晚晩好彩| www.689089.com-彩818彩合-| www.755484.com-旺彩福彩3d下载| www.892118.com-竞彩大奖历史| www.947052.com-高频彩有哪里种| www.988680.com-73期期好彩-| www.cai00.cc-快三怎么玩-| www.gt39.com-彩票站吃票有人管吗| www.wk14.com-六玄开彩网-| www.00fl.com-描写彩虹下雨的诗句| www.58tq.com-分分彩怎样看走势| www.641.me-福彩三d技巧及规律| www.3955.me-体彩小蓝报-| www.8572.biz-像m5彩票的有| www.67112.cc-福彩3d表格-| www.062803.com-足彩竞彩推荐亚青赛| www.131455.com-河南安阳彩礼多少| www.195832.com-福彩开奖直播| www.254444.com-青海快三开预测| www.312976.com-信彩彩票平台怎么样| www.368610.com-爱购彩票靠谱吗| www.442833.com-最优惠的彩票平台| www.522334.com-福彩群英会开奖号| www.578563.com-手机看开彩现场直播| www.636071.com-好运五分快三计划| www.786759.com-极速彩票官-| www.845250.com-足彩复式中奖图片| www.889071.com-彩站宝投注站| www.979849.com-彩票导航免费网址| www.zw2.com-河南快三彩票平台| www.nt84.com-买彩票是赌博| www.p45.live-体彩20选5走势图| www.31jp.com-周六什么彩票| www.256.name-2019彩票新政| www.2627.pw-排零五彩票-| www.6921.org-七彩云南什么意思|