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天

知道了
彩01彩票 www.5880.xyz-怀化市体彩中心电话| www.21lo.com-体彩开业条幅| www.2en.cc-快三大小怎么玩| www.8580.org-新利彩票怎么玩| www.9wh.cc-彩票几点就不能买了| www.683509.com-体彩app怎么用| www.796437.com-猜字谜彩票-| www.880178.com-福彩3d杀号彩宝贝| www.727625.com-本子福利吧全彩| www.854079.com-嘉兴福彩官网开| www.981740.com-大中华网络彩票| www.xl91.com-11选五彩票-| www.95pq.com-福利彩票收益干啥用| www.284197.com-乐盈彩官网-| www.945819.com-三门峡彩礼价目表| www.997490.com-宝利彩票app| www.ps56.com-快三三军赔-| www.71.cc-网络彩票可以提现| www.706806.cc-河南幸运彩当天开奖| www.455798.com-福彩三地中奖故事| www.673665.cc-古建筑彩画-| www.822033.com-国产3d彩漫-| www.87648.com-唯彩会软件下载安装| www.849897.com-重庆时时彩分厘平台| www.204515.com-江西快3彩票| www.273827.com-福彩三d一注直选| www.331599.com-乐彩网一分快3| www.8163.biz-快三最新贴吧| www.be16.com-福彩双色球预测号码| www.ui39.com-彩客电脑版-| www.131147.com-2019彩礼政策| www.254374.com-天津福彩十分开奖| www.41vr.com-鸿运来彩票网靠谱吗| www.206122.com-网上五分彩可靠吗| www.6438.vip-双色球彩票中奖号| www.051352.com-彩500彩票大发| www.05or.com-体彩四码星星遗漏| www.888840.cc-体彩四川金7乐开奖| www.974208.com-全民彩票28-| www.cp2222.com-百盈快三怎么买稳赢| www.559112.com-江苏福彩自助终端| www.841928.com-出名竞彩的外围网| www.985774.com-全部彩票网网址| www.696377.com-刮刮彩票怎样破解| www.870562.com-鼎盛彩票黑平台| www.235837.com-足彩直播-| www.797375.com-99购彩票破解版| www.263716.com-香港天天彩票资料| www.776141.com-利盈彩票登录| www.636577.com-彩虹六号加固墙现实| www.759531.com-大中华彩票提现成功| www.869422.com-海南七星彩稳定赚钱| www.01100.com-国彩彩票网页版| www.52736.cc-彩票在线充值| www.31wh.com-周三周三开什么彩票| www.118.biz-彩票平投什么意思| www.4264.xyz-好彩赢天下资料| www.9785.vip-排三体彩试机号今天| www.58287.cc-彩乐网6-| www.003526.com-下载中国福彩票| www.747176.com-可以转让的彩票软件| www.840700.com-广西烟草彩票| www.939175.com-手机足彩比分直播| www.47456.com-体彩中奖去哪里兑奖| www.809509.com-旧好彩客app| www.6666.la-多赢彩票线路| www.010301.com-彩票第19032期| www.559775.com-七星彩名字选号| www.715101.com-中华神彩下载| www.845933.com-私彩破案-| www.279108.com-上海快三复式计算| www.84yh.com-8亿彩苹果下载软件| www.38758.com-必赢彩票网客户端| www.jv66.com-彩神大发网址| www.i06.net-旺彩社区最新探码图| www.965626.com-精准凤凰彩票计划| www.sr0.cc-重庆时彩官网开奖| www.827255.com-微信小站宝彩票| www.2316.live-西藏福利彩票快3| www.383738.com-彩票6旧-| www.526761.com-范哥时彩军团| www.tk20.com-k8彩票-| www.63778.com-竞彩模拟投注的软件| www.022843.com-河南快三直播| www.708.space-福利彩票三d规则| www.8427.shop-神彩福牛是什么网络| www.809728.com-好彩客官网充值| www.598777.com-彩票代理推广的方法| www.953918.com-瑞祥祥云彩票合法么| 博亿彩票www.663by.com| www.807969.com-优彩app官网| www.5921.club-开彩传媒-| www.68289.cc-共享彩票百盈快三| www.226532.com-破解彩票漏洞| www.315826.com-彩虹7什么游戏| www.402699.com-快中国彩票走势图| www.547708.com-下载诸葛智彩软件| www.622958.com-买足彩发财-| www.693707.com-体育彩票专业版下载| www.776854.com-休闲快三视频大全| www.858277.com-体彩足彩竞猜类型| www.934062.com-贵州快三和值| www.987675.com-3d彩报彩乐迷| www.ph91.com-下载海南快三| www.14zi.com-中彩网三d论坛| www.kp6.com-彩票开奖号码| www.mk48.com-重庆分分时时彩| www.555460.cc-哪个彩票app可靠| www.615960.com-彩神通关注号金码| www.679858.com-彩神v8计划-| 818合彩www.07hc.com| 99彩票www.766076.com| www.868111.com-星期三开的彩票| www.6937.xyz-c66彩票下载| www.984803.com-8v彩票app-| www.368586.com-彩铅苹果-| www.096158.com-福彩图谜汇总牛材网| www.669475.com-彩钢琉璃瓦机设备| www.913791.com-万彩网坑人-| www.7643.vip-体彩门面-| www.150211.com-彩票机器全套多少钱| www.69297.com-体育彩票赛事通告| www.022663.com-红牛彩票真假问题| www.411324.com-小学生广播七彩阳光| www.919934.com-彩票模拟摇奖机| www.016542.com-足彩分析师招聘| www.400649.com-七星彩版图-| www.1361.pw-49c永利彩票注册| www.00769.com-体育彩票有什么玩法| www.050278.com-开黑彩判刑多久| www.527763.com-时时彩和值预测计划| www.657272.com-3d福彩原理-| www.739495.com-08彩票下载-| www.817893.com-3d福彩怎么看中奖| www.888373.com-128彩票诈骗| www.963669.com-买足球彩票规则| 500彩票www.701524.com| www.008163.com-昨天的福利彩票中奖| www.q77.gg-山东体彩在线骗人| www.700785.com-幸运快三计划员| www.828725.com-58彩票-| www.914342.com-全球彩霸高手论坛| www.979852.com-驻马店快三开奖结果| www.11sy.com-天下彩票一天下彩网| www.8517.org-游戏机彩票纸能干嘛| www.807081.com-高胜率彩票计划网站| www.lm76.com-今日中彩能中奖吗| www.013813.com-七乐彩杀号天气网| www.098477.com-gc国彩-| www.000262.com-每日头条彩票| www.153215.com-喜乐彩是不是骗人的| www.958455.com-聚富大发快三计划| www.dd52.com-全球盛兴彩票登录网| www.669180.com-如何购买外国彩票| www.739132.com-红彩网官网手机版| www.303234.com-彩虹10-| www.062594.com-中博快三计划软件| www.157172.com-易彩堂诈骗-| www.032856.com-彩票中心邀请码| www.130600.com-甘肃福易快三| www.7066.vip-神彩通会员资料| www.72491.com-优彩网手机版本下载| www.089506.com-台北快三有什么规律| www.5480.xyz-长春竞彩网点查询|