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.173888.com-彩神大发app| www.sy87.cc-海南七星彩包码技巧| www.306082.cc-怎么中彩票一等奖| www.419545.com-恒大彩票34349| www.525124.com-香港圣地彩-| www.623426.com-能分析彩票的软件| www.720728.com-新浪体彩下载| www.801592.com-彩票开奖终端机| www.889666.com-七乐彩票真的吗| www.958331.com-鸿运网快三是真的吗| 梦想彩票www.33112q.com| www.fi84.com-优德送38彩金| www.d23.space-竞彩预测网-| www.3062.org-体彩即开型彩票象棋| www.34247.com-彩客网安卓手机版| www.92776.cc-立彩佳与卓高| www.228336.com-河南体彩官网首页| www.629051.com-南方彩吧-| www.789573.com-竞彩英甲比赛规律| www.874376.com-吉林快三怎样算跨度| www.963850.com-足球彩票这么玩| 500万彩票www.98528e.com| www.786538.com-彩票走势图表格家用| www.899853.com-官方网络售彩| www.967019.com-网上买时时彩亏大了| 博友彩www.682224.com| www.lp73.com-彩中彩一旦-| www.m09.net-乐彩网一分快3| www.88ci.com-恒彩webapp-| 吉利彩票www.80075y.com| www.578910.com-体彩店怎样装修| www.dj52.cc-体育彩票规则及玩法| www.31yo.com-博友彩破解器下载| www.688185.com-体彩电子投注单| www.796499.com-重庆时时彩头彩| www.876762.com-3d福彩魔鬼图表| www.964222.com-彩票平刷挂机论坛| www.1684.tv-北京28彩票软件| www.229581.com-彩票返点1980| www.365960.cc-自学彩铅画教材| www.473102.com-代购福彩快三| www.671078.com-幸运彩票开多久了| www.759899.com-彩票对打套利视频| www.884002.com-u9彩票会拉黑人| www.963472.com-彩铅风景画教程图解| 必发彩票www.655096.com| www.1659.top-甘肃快三加奖| www.8318.in-福彩江西中心地址| www.017954.com-网络彩票投注软件| www.181068.com-750彩票-| www.280853.com-福彩3d心得经验| www.222263.com-117彩票-| www.854991.com-皇冠彩票app下载| www.945259.com-手机新浪爱彩网| www.999183.com-鸿运彩票是正规的吗| www.qi74.com-立彩彩票是骗局吗| www.029893.com-福彩3d彩吧图谜一| www.136706.com-彩票源码下载| www.231867.com-玩江苏快三怎么能赢| www.320036.com-三六零彩票开奖| www.910755.com-利民彩票下载| www.01522.cc-彩吧代理申请| www.83411.cc-全网彩票计划| www.51mu.cc-足彩500奖金分析| www.2793.biz-k8彩票平台注册| www.4792.cn-立彩助手准吗| www.209443.com-福彩排列5开奖| www.302833.com-49·cc彩票-| www.002233.com-七乐彩九个号中4个| www.365681.cc-彩铅绘画纸-| www.470033.com-买国外彩票-| www.499958.com-澳洲五分彩稳赢| www.1597.wang-福彩老总是谁| www.105325.com-海南七星彩私彩玩法| www.254588.com-快三跨度计算方法| www.407654.com-霸王港彩网址| www.782244.com-凤凰彩票能不能提现| www.871313.com-福彩快3线上平台| www.948236.com-体彩的利润-| 68彩票www.68689w.com| www.298606.com-今天六开彩开奖结果| www.05556.cc-爱尚彩app-| www.51922.cc-福彩3d72期-| www.367704.com-刚力彩芽唱歌| www.503851.com-通盈彩票平台| www.576222.com-彩票的基础知识| www.3188.top-中彩手彩票官方下载| 多宝彩票www.75538a.com| E彩堂www.43818t.com| www.761782.com-买竞彩-| www.838873.com-七乐彩规律-| www.930774.com-彩8安卓版下载| www.985386.com-新浪足彩竞彩风暴| www.yc2.com-福彩极速快3能玩吗| www.ob86.com-北京福彩快3坑人吗| www.36xu.com-什么软件买彩票可靠| www.go08.com-立彩-| www.f82.club-福利彩票三d藏机图| www.188322.com-彩报-| www.275576.com-168彩票提现失败| www.568829.com-大彩鲸11选五| www.664241.com-海南七星彩包头尾| www.731542.com-大爆奖彩票app| www.802009.com-彩天堂属于什么平台| www.872626.com-哪个彩票好玩中奖高| www.927860.com-海南七星彩规律表| www.974357.com-福彩一周开奖几次| 网易彩票www.520462.com| www.cp015.com-彩票走势图详解| www.734510.com-北京福利快三| www.807079.com-彩票纸有毒吗| www.874783.com-福利彩票数字| www.930988.com-19042七星彩| www.974718.com-中奖彩票双色球图片| 亿万彩票www.907883.com| www.jk47.com-送彩金的彩票| www.o74.xyz-3d彩票怎么看| www.35ua.com-辽宁福彩网35选七| www.tj5.com-广西快三一定牛形态| www.qk29.com-500彩票极速快3| www.252336.com-专家买彩时票| www.322470.com-足彩中几个亿会吗| www.7942.cc-彩宝什么好-| www.27249.com-新宝彩票平台下载| www.78355.cc-查一下彩票信息| www.638244.com-沈阳彩票站出兑网| www.788213.com-中国足彩网l| www.849827.com-竞彩310指数| www.897597.com-中国竞彩计算器| www.961763.com-体彩山东十一选五| 趣彩网www.qucp0.com| www.382201.com-彩仙阁挂机软件怎么| www.7az.com-宁波给员工发彩票| www.681531.com-辽宁省福彩官方网站| www.757477.com-58购彩-| www.895771.com-甘肃快三一码遗漏| www.949540.com-爱盈彩是真的吗| www.984607.com-彩票平台风控审核| www.dc31.cc-31684彩票-| www.xc83.com-体彩排三选胆图表| www.282844.com-7星彩大奖-| www.364461.com-微信能买世界杯体彩| www.966854.com-彩票兑奖规则介绍| 68彩票www.68682h.com| www.551233.com-微信彩站是官网吗| www.613266.com-500购彩票合法吗| www.278782.com-优信购彩大发快三| www.345043.com-体彩网点编号怎么看| www.406510.com-江苏彩礼排行榜| www.488543.com-双色球乐彩彩园下载| www.927.mobi-临沂市体彩中心地址| www.588494.com-空打2961万彩票| www.367378.com-足彩胜负彩姜山| www.447270.com-乐和彩登录-| www.092397.com-体彩混合走势图| www.269308.com-买珠江彩票真的赚吗| www.rk78.com-那个彩票中奖率最高| www.11aw.com-多彩下载-| www.80qp.cc-中国彩网app| www.0840.com-在哪可以网上买足彩| www.276657.com-深圳福彩22选1| www.639754.com-泰国的彩票传销| www.735605.com-百分百彩票可靠吗| www.808373.com-柬埔寨五分彩下载|