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.381716.com-妙彩彩票-| www.621502.com-竞彩之家比分网页| www.712732.com-彩票店最晚几点关门| www.800133.com-自制彩票走势图| www.882395.com-江苏快三开奖奖金| www.985925.com-福彩3d必出码绝招| www.gg5.com-快乐时时彩b盘| www.ou78.com-华夏彩票骗局揭秘| www.21qt.com-彩金自己怎么刷机| www.636.red-时时彩12生肖| www.5270.pw-七星彩2008-| www.15119.cc-福彩双色球单式玩法| www.65696.cc-快三对子最多开几期| www.069297.com-送彩金50彩票| www.144357.com-竞彩足球对冲保本| www.254836.com-重庆肘时彩开奖结果| www.336839.com-今天甘肃快三走势图| www.430043.com-水彩花卉教程| www.532633.com-博彩王彩票分析软件| www.658955.com-彩票开奖`排三试机| www.756799.com-彩66软件-| www.853784.com-温州体育彩票网点| www.926611.com-瑞彩网的安全性| www.987959.com-快三助手免费下载| www.dx0.cc-北京快三玩法技巧| www.qk00.com-快彩是什么原因| www.12nn.com-胜负彩二等奖中几场| www.89mq.com-有个彩票网站速8| www.3069.pw-进球彩app客服| www.9217.me-彩票彩之家下载安装| www.70600.com-彩吧彩票合法吗| www.036836.com-爱投彩票软件| www.128301.com-买彩票什么是倍投法| www.216950.com-118彩票坑人| www.296060.com-彩票五分快三能玩吗| www.373018.com-欢腾彩票害人| www.487073.com-彩6彩票app娱乐| www.570226.com-勇士团队彩票靠谱吗| www.654075.com-江西快三玩法技巧| www.812122.com-竞彩店怎么样| www.888075.com-喜彩网-| www.984838.com-福彩网提现-| www.dk86.com-体彩七星彩玩法介绍| www.wi44.cc-怎样看彩票走势| www.18uj.com-七乐彩什么时间开奖| www.752.tv-好彩高手资料大全| www.5111.com-福彩怎么对账| www.06874.com-彩计划下载福彩3d| www.53481.com-天天中彩票网址| www.99417.com-足彩任九奖金预测| www.069233.com-亚彩会登陆最新消息| www.137295.com-贵阳省福彩中心| www.218229.com-福建快三开奖记录| www.292868.com-福彩快三平台是什么| www.367163.com-美丽夜空彩铅画| www.463631.com-哪个行买彩票| www.554626.com-赤体彩术语| www.625969.com-足彩19050冷热| www.700065.com-福利彩票领奖规定| www.780724.com-竞彩足球串关详解| www.861283.com-河北快三怎么看号码| www.930670.com-彩票的税收是多少| www.987632.com-汇彩网下载-| www.cp8058.com-街机新快三叫啥| www.np81.com-大发快三计划qq群| www.9ke.cc-七星彩开奖直播网址| www.69hk.cc-第一区块链彩票| www.1248.win-彩票999软件| www.08890.cc-天天中彩票历史版本| www.47699.cc-笑脸常开好彩自然来| www.87393.com-彩票中二等奖穷人| www.045020.com-快彩计划软件| www.248487.com-福彩3d彩吧库| www.321498.com-明发彩票下载| www.391156.com-彩票快乐三分钟| www.586373.com-试玩赢彩金-| www.658716.com-男子代买彩票| www.789621.com-中国竞彩篮球销售额| www.856984.com-彩票店雷人标语录| www.910828.com-探探彩票托的套路| www.974056.com-福彩刮刮乐宣传歌曲| www.ig27.com-五百彩-| www.zc09.com-甘肃福利彩票陇彩宝| www.25um.com-买什么彩票可以中奖| www.771.in-彩之家彩票平台| www.4734.xyz-打彩票不给钱怎么办| www.9968.cm-订婚彩礼返还的案例| www.66195.com-广西双彩基本走势图| www.026172.com-人人乐彩票靠谱吗| www.102335.com-彩票计划大全网站| www.167550.com-下载快三助手下载| www.273779.com-彩票外挂是真的吗| www.359192.com-玩彩票怎么算是赌博| www.447334.com-众彩网是什么网站| www.536895.com-彩票店名称大全| www.638185.com-江苏南通竞彩团队| www.723078.com-彩票大蠃家-| www.796346.com-尊彩是-| www.870368.com-全球彩骗局-| www.962439.com-贵州福利彩票3d| 大赢家彩票网www.83033b.com| www.fq83.com-安徽快三遗漏号查询| www.wz59.cc-七星彩论坛搜索| www.12xz.com-夫下彩免费资料大全| www.79hl.com-成都彩钢板-| www.1847.me-私彩跟官方彩票对冲| www.13537.cc-四亿彩票41com| www.53852.com-大通彩票下载安装| www.95306.com-七乐彩网上怎么买| www.052992.com-竞彩足球彩票开奖| www.163087.com-河北福彩排七开奖| www.243872.com-酷彩正规吗-| www.313479.com-好彩堂开奖网站| www.378216.com-体彩现在哪里能买| www.516068.com-彩票一块钱中多少| www.582075.com-879彩票网-| www.654344.com-彩之源彩首页| www.755849.com-彩票77原版苹果| www.836233.com-顺丰彩票旧版| www.899527.com-申请网上彩票代理| www.962298.com-红神体彩网页| 网易彩票www.084wy.com| www.bq00.com-彩票投注技巧分析| www.215971.com-中国快三网下载| www.862407.com-彩票书籍在线閲读| www.07376.com-玩高频彩心态| www.358818.com-福彩双色球中彩网| www.439992.com-彩8提现不了怎么办| www.525833.com-3d彩票奖金多少| www.637744.com-上海彩票领奖地方| www.774412.com-彩票七星彩开奖| www.848407.com-武汉福彩快3秘密| www.895848.com-快三是福利彩票的吗| www.951638.com-红彩网app邀请码| www.988231.com-国家批准的网上彩票| www.cp7228.com-玩快三输钱案例| www.mf89.com-中彩网网址是什么| www.04lb.com-彩铅绘画人物教程| www.66km.com-3k彩票下载-| www.0088.pro-快三漏号-| www.7467.com-七星彩今天开奖直播| www.18754.com-彩票33是骗人的吗| www.55267.cc-时时彩最快开奖器| www.93821.com-唯彩会老盘推荐足彩| www.041842.com-九彩彩票是正规的吗| www.159311.com-海南海口快三| www.236897.com-体育彩票6?1| www.301038.com-人人中彩票网| www.361852.com-内蒙古福彩中心在哪| www.437249.com-成都三彩服饰专卖店| www.519729.com-重听天天福彩| www.579170.com-福彩三地十期开机号| www.638776.com-安全登录顶级彩票| www.778554.com-创彩-| www.867090.com-58期体育彩票奖号| www.911898.com-乐彩vip众乐| www.959317.com-七星彩168-| www.993941.com-广西快3爱彩乐| www.cai9399.com贵州体育彩票官网| www.ie49.com-揭秘网赌彩票| www.wo11.com-彩票贷款-| www.02gu.com-快三解锁计划软件| www.58rq.com-319彩票-| www.632.pw-彩票平台挣钱办法|