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.808211.com-任九足彩奖-| www.874234.com-大厅彩票源码| www.987062.com-云购彩票下载| www.af03.com-全国彩票开奖大厅| www.wi99.cc-重庆时时彩几点截止| www.36cf.com-51彩票官网网址| www.3336.hk-078彩票软件下载| www.07551.com-中彩那天课文图片| www.70701.cc-看3d彩宝贝走势图| www.803651.com-3456彩票-| www.093870.com-中国彩吧软件下载| 500彩票www.303472.com| www.96aw.com-彩票公式软件大全| www.736199.com-彩票计划聊天室源码| www.886988.com-微信骗你买彩票| www.cw70.com-私彩大平台-| www.68183.com-福彩3d折线图谜| www.086873.com-有个叫什么福的彩票| www.769129.com-3d彩票开奖时间表| www.850894.com-时时彩总和大小秘密| www.932746.com-传奇彩票安全吗| www.993775.com-什么是3d彩票| www.583169.com-彩票两元-| www.677111.cc-掌上福彩宝典app| www.775032.com-彩票平台骗局视频| www.886618.com-公彩合买软件| 易彩网www.36166w.com| www.3666.live-新浪竞彩网-| www.903518.com-500购彩下载地址| www.975574.com-体彩七星彩历史数据| www.lf5.com-中原彩票一分快三| www.um19.com-内蒙古快三看和值| www.51qs.cc-彩票预警系统| www.32df.com-云上多彩宝-| www.1009.cn-玖州彩票网骗局| www.8084.com-永利彩票下载| www.33006.cc-西班牙酷玩快三真假| www.81152.cc-ak彩票骗局全过程| www.069246.com-好运福彩网站| www.719859.com-福彩3d必下双胆| www.804441.com-足球彩票六场半全场| www.885456.com-立彩彩票正规合法吗| www.970074.com-七彩乐彩票中奖规则| www.pw5.cc-买快三-| www.887703.com-cc彩票平台网站| 天朝彩票www.00711.cc| www.15an.com-澳彩登入网址| www.8194.net-彩票500首页| www.30891.com-上海体彩11选5开| www.77344.cc-f彩网犯法吗| www.0923.com-彩票合买合法吗| www.8416.vip-乐彩快三是私盘吗| www.a16.top-中华彩票网下载| www.53cl.com-福彩公告结果| www.369822.com-乐彩票-| www.270077.com-749彩票安卓版| www.346654.com-南方双彩网首页走势| www.529744.com-如意彩票专家计划| www.653512.com-北京快三彩票爱彩乐| www.773831.com-时时彩五星通选大底| www.962606.com-彩票网页计划| www.ua7.cc-彩库宝典2019| www.550027.com-谁有能买足彩的网站| www.679188.com-玩快三输了很多| www.853141.com-亚博体育彩票可靠吗| www.aa89.cc-全民快三彩票网| www.eb81.com-内蒙古快三技巧| www.080059.com-49选7彩票规律| www.b71.cn-南昌假彩票站| www.844.me-最新湖南体彩网| www.19067.com-海南私彩玩法说明| www.023983.com-足彩输钱-| www.949.live-七星彩中二个号| www.8897.in-彩票平台怎么赚流水| www.250002.com-505彩票链接| www.994159.com-竞彩限额-| www.ex07.com-快三是坑人的彩票| www.163528.com-易彩娱乐app| www.003147.com-快彩被骗-| www.095810.com-四川体育彩票七星彩| www.974240.com-江西多乐彩组选走超| www.aj61.com-唯彩会下载-| www.43ui.com-精彩的精什么意思| www.3124.xyz-网络彩票监督| www.9115.cc-七乐彩历史比器| www.38156.com-黑龙江体彩十一选5| www.133254.com-彩钢瓦墙板安装方法| www.358854.com-体彩7位数中五个| www.656764.com-时时彩怎样包码赢钱| www.770439.com-网络黑彩赌博刑案例| www.843232.com-澳客足彩超级平台| www.911375.com-三分时时彩官网| www.965002.com-礼拜天体彩开奖吗| 万历彩票www.77114j.com| www.35293.cc-金利网彩票网| www.81xr.com-竞彩奖项有封顶吗| www.5581.cc-彩民高手坛开奖| www.883.win-百度彩票下载安装| www.51483.com-彩塔是干什么的| www.011126.com-昨天彩票多少号| www.144012.com-青海福彩中心电话| www.222282.cc-体育彩票十分钟规则| www.19co.com-彩票微信骗局手段| www.584.pw-玩彩对刷怎么赚钱| www.4006.cc-快5彩票开奖查询| www.05553.cc-搜索中彩网双色球| www.520391.com-彩票大数据精准定位| www.604547.com-彩票总站网址| www.674343.com-头务彩多多-| www.762170.com-时时彩有没有人控制| www.826938.com-胜负彩销量-| www.892321.com-福彩3d预测软件| www.955711.com-彩影免费版-| 华夏彩票www.hx3355.com| www.3467.cn-为什么彩票都会维护| www.662583.com-七星彩星期几开奖| www.730017.com-生彩宝手机版| www.l73.xyz-乐彩网网址-| www.371386.com-河内五分彩漏洞软件| www.503967.com-彩票提现要银行卡| www.003947.com-大乐斗彩票开奖查询| www.120701.com-点击彩-| www.200082.com-七乐彩开奖号码预测| www.548094.com-锋彩直播破解版下载| www.733299.com-上海福彩天天洗四| www.814544.com-彩票游戏开元棋牌| www.874142.com-澳洲三分彩计划网| www.927542.com-属蛇彩票运-| www.971680.com-亿发彩票安全么| 鑫亿彩www.039079.com| www.143017.com-彩虹8平台网址| www.305935.com-彩6官网下载ios| www.1849.cn-大发快三不倒翁投注| www.575894.com-山西福彩双色球开奖| www.308074.com-667彩票-| www.026025.com-黑彩平台信誉排行榜| www.83876.com-文家市镇彩票投注站| www.055269.com-彩36官方彩票网| www.155842.com-辉煌彩票平台| www.219354.com-福建体育彩票官方网| www.279522.com-时时彩龙虎合玩法| www.339180.com-深圳体育彩票申请| www.368831.com-今日福彩开奖是什么| www.447391.com-手机版平安彩票网| www.535164.com-梦见数字买彩票中奖| www.639536.com-体彩传销-| www.0800.mobi-彩播-| www.9226.top-航天十一院彩虹公司| www.qp85.com-pc彩票是是什么| www.42950.com-锋彩直播最新版下载| www.rm87.com-基诺型彩票玩法规则| www.37kx.com-网投彩票大全| www.218415.com-做彩票代理安全吗| www.345940.com-十四场足彩分析| www.604298.com-奥发彩票网-| www.656764.com-时时彩怎样包码赢钱| www.733295.com-双色球彩票被洗了| 易彩堂www.55885m.com| www.590992.com-083彩票下载| www.653645.com-福彩助手怎么用不了| www.709090.com-竞彩足球胜平负数据| www.770172.com-好彩投专业版软件| www.822171.com-老时彩杀号-| www.871875.com-彩票行家全年资料|