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.587028.com-全民彩票网-| www.982640.com-共享彩票代理| www.607833.com-韩国彩票奖金四等奖| www.900176.com-3号彩票下载| 好彩网www.992599.com| www.959055.com-3d新彩网藏机图| www.731432.com-快三算赌博-| www.6638.com-福利彩票主任| www.105761.com-香港皇家彩宝典网址| www.9559.com-风彩彩票下载安装| www.ry63.com-河北快三百位走势图| www.4321.vip-五分彩好买吗| www.179820.com-福利彩票3d-| www.297963.com-昨天足球彩票胜负| www.410338.com-体彩开奖查看软件| www.539034.com-众乐彩票坑不坑| www.714331.com-彩票端口-| www.01mt.com-彩虹是什么生肖| www.233433.cc-吉林快三最新版本| www.356485.com-点外卖送彩票违法吗| www.088529.com-彩票盈利的方法| www.187819.com-彩票的玩法规则| www.277882.com-山东体彩彩民论坛| www.925167.com-一分分彩-| www.058212.com-彩票网cpw-| www.834586.com-日景彩烟在哪里买| www.911971.com-私彩软件违法吗| 中国福利彩票www.08588b.com| www.422240.com-彩票机器人插件| www.719234.com-关于彩虹的一段话| www.298712.com-福彩怎么中奖| www.502122.com-济南彩票砍人| www.684626.com-福彩3d中奖组选| www.984974.com-褔彩3d丹东全图| www.93lf.com-下载f彩网-| www.21191.com-8体彩屋-| www.361144.cc-福彩3d试机号下载| www.548198.com-梦兆册七星彩查码| www.814972.com-福彩p3开奖-| www.959947.com-官方彩票计划网页| 幸运彩票www.768299.com| www.62by.com-彩票100期-| 500彩票www.52072s.com| www.vv18.com-时时彩口诀大全图| www.520189.com-网络彩票代理骗局| www.600002.com-彩票亏多少-| www.40my.com-福彩3d开奖专业版| www.222023.com-彩票注册送23| 彩虹8www.ch8911.com| www.776647.com-如何判断时时彩| www.888967.com-彩站宝安全吗| www.961524.com-94彩票-| E彩堂www.43818k.com| www.666673.com-乐乐团队乐彩违法吗| www.cq9.cc-江苏快3彩票| www.73vy.com-用彩铅画荷花教程| 金彩www.983jc.com| www.385094.com-168开彩网采集| www.427300.com-淘宝彩票不能买了| www.537954.com-彩色资料图库| www.632416.com-中奖彩票视频| www.726927.com-福星彩票app下载| www.798658.com-88时时彩-| www.864662.com-老时彩开奖号码| www.920635.com-众彩千里马预测| www.972714.com-彩铅初学-| www.gf42.com-鸿运5分彩走势图| www.zw84.com-怎么拉竞彩客户| www.029853.com-神州时时彩-| www.981563.com-印尼5分彩开奖结果| www.gk77.com-众彩下载专区| www.985816.com-白菜网送彩金| www.pk93.com-福彩3d牛票票| www.584474.com-竞彩和足彩的区别| www.534506.com-七星彩奖虫-| www.672906.com-三地南方双彩开机号| www.788631.com-河南彩礼为何这么高| www.947097.com-时彩开奖-| 凤凰彩票www.88266f.com| www.71ox.com-恒彩1950注册| www.2267.vip-体彩高频开奖调整| www.83173.com-盈宝彩票正规吗| www.921078.com-足球胜负彩开奖查询| www.lz03.com-各种釉彩大瓶价格| www.uf59.com-3d字谜牛彩网彩| www.41ga.com-体彩排例五历史开奖| www.434342.com-南昌体彩11选5| www.145.org-彩虹谷-| www.4931.top-机打彩票中奖率高吗| 亿彩彩票www.588yc.com| www.74gt.com-福彩3d预测天吉网| www.3796.biz-体彩排三杀跨| www.249622.com-下载冀彩宝-| www.795120.com-体彩线上购买| www.925772.com-彩票达人彩票牛人| www.531660.com-新生彩票平台登录| www.727719.com-福彩中奖号查询| www.965540.com-新北京快三-| www.ry96.com-鸿彩快三是真的假的| www.446658.com-excel彩票-| www.260260.com-兑奖彩票-| www.022486.com-彩票走向如何看| www.789726.com-买竞彩最长黑几期| www.866549.com-天津时彩官网| www.929922.com-福牛牛彩票网官网| www.990067.com-福彩乐彩网-| www.vl2.com-澳洲5分彩开奖| www.ns41.com-福彩数字3开奖号码| www.98ev.com-彩票有漏洞吗| www.y68.org-福利彩世界是真的吗| www.0826.net-开足彩店赚钱吗| www.12349.com-体彩大乐透领奖地点| www.59lu.com-竞彩足球赔率| www.117267.com-全国福彩体彩开奖| www.421219.com-彩票账对不上怎么办| www.624028.com-春秋彩票app界面| www.823012.com-日本彩票兑奖流程| www.947048.com-福彩高频彩是什么| www.85bd.com-今日竞彩单关场次| www.197066.com-华人彩票合法吗| www.71.cx-滴滴彩票坑人吗| www.733498.com-福彩快三和值计划| www.843885.com-彩票中奖金额上税| www.008019.com-重庆时时彩购彩大厅| www.656454.com-k彩线路测试| www.868513.com-七星彩1500-| www.477237.com-湖北体彩乐选四| www.xq53.com-买彩票选号难吗| www.cp99.com-彩票彩客电脑版| www.983335.com-彩票赌博可以报警| www.773231.com-陌陌彩票-| www.893692.com-安徽快三和值详细| 盛大彩票www.c6121.com| www.478117.com-竞彩双平是什么意思| www.581653.com-中国体彩网123| www.665454.com-新加坡彩票规则| www.198333.com-蚂蚁彩票中了一等奖| www.692773.com-快三之家下载| www.757649.com-二分彩是正规的吗| www.656776.com-彩票平台破解源代码| www.752950.com-彩影安卓手机版下载| www.813656.com-体彩刮刮乐送金条| www.176353.com-江苏快三福彩开奖| www.345266.com-彩神称霸lll下载| www.396965.com-快三下局蓷选| www.476369.com-下彩铃电话号码多少| www.13fn.com-苏州e球彩开奖结果| www.36371.cc-高频时时彩下载| www.84688.cc-时时彩大牛在线计划| www.17480.com-福利彩票官方网址| www.gz18.com-盈彩在线合法吗| www.22523.cc-彩票行业前景| www.006310.com-快三每期开奖时间| www.1on.com-五行预测彩票秘法| www.657436.com-时时彩代理会判刑么| www.818703.com-世界杯体彩软件| www.882447.com-高频彩官网平台下载| www.383.cc-乐米彩票停售原因| www.4719.cm-临泽彩票中奖者| www.021207.com-山西福彩官网| www.550027.com-谁有能买足彩的网站| www.808614.com-彩票工资车论坛| www.864323.com-三地字谜总汇新彩网| www.906632.com-浙浙江体彩6十1|