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天

知道了
500彩票竞猜 www.589666.cc-310足彩推介| www.723078.com-彩票大蠃家-| www.869845.com-压大小彩票-| www.939513.com-彩吧彩票注册| www.994929.com-时时彩平台官方网站| www.lj37.com-中彩拉到哪里领奖| www.v47.shop-3d好彩网红姐| www.70cy.com-百彩宝电子走势图| www.217797.com-彩福彩票下载| www.358103.com-体育彩票机专用键盘| www.dc4.com-三分快三在哪里玩| www.i97.com-广州吉利快三| www.68hr.com-网易彩票官方| www.1896.vip-大通彩票网手机版| www.523098.com-火箭彩票下载手机版| www.676426.com-彩票以小博大| www.766118.com-神州乐彩重庆时时彩| www.889967.com-给力高频彩app| www.959273.com-捡彩票-| 9号彩票www.90767.com| www.w97.cn-网上购买福利彩票| www.82ho.com-荆州快三-| www.2953.cn-体彩扑克3-| www.00672.com-彩票装修-| www.52367.cc-倍数最高的彩票网| www.008389.com-泰安市体彩站名单| www.079216.com-江苏彩票手机投注| www.185758.com-老时时彩360| www.283517.com-七星彩公式计算软件| www.365550.cc-风景画简笔画带彩铅| www.67938.com-腾讯1分彩-| www.125210.com-幸运彩票官网下载| www.606817.com-属蛇人买彩票号码| www.6653.cc-快三复试中多少钱| www.42481.com-易彩网是合法的么| www.89261.com-哪个软件能查彩票| www.214742.com-上海快三爱彩乐| www.341551.com-91彩神app下载| www.449251.com-沈阳市福彩中心地址| www.05264.com-红五图库彩吧网| www.89602.com-好彩绿-| www.089923.com-怎么代理福利彩票| www.260598.com-苏州福彩快三走势图| www.470502.com-足彩怎么买比较合理| www.558872.com-彩虹屁文案长篇| www.638300.com-色彩图片风景| www.wq2.cc-百度彩票开奖号码| www.xc14.com-快三奖金怎么算| www.64ks.com-网易彩票网杀号| www.501457.com-彩票顶级包网| www.07go.com-彩铅牡丹配色| www.75jk.com-彩票什么叫注| www.1000.la-老版q彩网-| www.353018.com-正规快三购彩平台| www.428089.com-盛典彩票下载安装| www.520017.com-福建体彩网31| www.582206.com-金鹿彩票真的假的| www.651884.com-葡京彩票如何骗| www.745244.com-c8万彩吧cn买马| www.811169.com-福彩十位振幅走势图| www.879533.com-澳客彩票网智慧赢家| www.941533.com-上海快三彩票系统| www.984290.com-微信加人买高频彩| www.cp7735.com-福彩网是骗局嘛| www.78921.com-3d福彩综合图| www.038132.com-爱投彩票下载| www.14375.com-七星彩多少钱一注| www.711696.com-时时彩后四万能码| www.789633.com-世界杯彩票竞彩| www.876144.com-重庆时彩投注软件| www.949559.com-盈彩彩票是真是假| www.991118.com-tt彩票网站-| www.as70.com-内蒙快3走势彩经| www.ru29.com-679彩票手机版| www.17xi.com-足彩兑奖时间是多长| www.713962.com-下载彩神争霸8| www.796803.com-九场胜负彩预测| www.993944.com-河北快三出球顺序| www.hc72.cc-彩票风控是真是假| www.09ps.com-福建体彩音乐聊天室| www.2038.biz-好彩堂特马论坛| www.9440.in-福彩三地字谜开后门| www.42566.com-南方双彩手机网| www.153346.com-中国福利彩票生肖| www.732898.com-福彩149期-| www.858139.com-足彩竞猜比分| www.917378.com-网站彩票代理提成| www.978949.com-南粤风彩选生肖技巧| www.19276.cc-网上正规彩票| www.335934.com-体育彩票大乐透买法| www.541771.com-体彩网上购买系统| www.00oh.com-彩票也疯狂论文| www.73uo.com-我玩彩票害死了| www.1731.org-彩票306官网下载| www.9012.cn-下载上海体彩网| www.6648.cm-福彩双彩网-| www.719678.com-七星彩辅助-| www.841738.com-鑫彩网手机app| www.935369.com-苹果彩票app载| 818合彩www.www.9889hc.com| www.223445.com-进球彩-| www.331175.com-中彩股份内蒙古快3| www.443818.com-彩63官网-| www.32992.cc-扬州体彩中心地址| www.729817.com-彩票中奖哪里领奖| www.851785.com-今晚七是彩开奖结果| www.964364.com-湖南省体彩中心地址| www.6496.vip-七乐彩测号| www.763509.com-华宇彩票代理奖金| www.915920.com-体彩转让-| www.977340.com-彩礼规定不超过8万| 环球彩票www.868955.com| www.898516.com-时时彩挂机软件教程| www.973281.com-彩虹在线听周杰伦| 幸运彩票www.982799.com| www.230183.com-彩票666下载安装| www.375326.com-手机看中国体育彩票| www.653265.com-幻彩彩票下载手机版| www.765463.com-彩票反水啥意| www.887190.com-淘宝彩票中奖真的吗| www.981443.com-彩票返点是什么意思| www.tk95.com-公益福彩是真实的吗| www.442128.com-730彩票网-| www.74yz.com-中了七星彩去哪领奖| www.6950.cc-666彩票官网| www.41787.com-3d走势彩经网| www.019137.com-利彩是干什么的| www.307982.com-七星彩专家预测杀码| www.aa39.cc-彩票封盘是什么意思| www.03eu.com-广西快三有漏洞吗| www.667.online-彩币新闻-| www.808034.com-优彩彩票下载| www.912059.com-快三预测算法| JJ彩票www.52001.cc| www.356994.com-体彩店网店-| www.566959.com-易彩票骗局揭秘| www.46484.com-老时时彩走势图彩经| www.006857.com-河南福彩网河南体彩| www.095909.com-台湾彩票开奖结果| www.173920.com-哪个正规平台有快三| www.251070.com-彩票注册邀请码| 博友彩www.899621.com| www.qp44.com-网赚彩票12-| www.44nl.com-彩盈线下娱乐| www.561.cm-我乐时时彩计划软件| www.6901.vip-云彩图片-| www.122167.com-福建彩民论坛网| www.219552.com-体彩快乐十分钟软件| www.405628.com-中福在线拉彩规则| www.351590.com-彩票现在多少钱一注| www.817565.com-国家彩票骗局的案例| www.881985.com-01彩票违法| www.33ed.com-春节彩-| www.191.in-彩民村一心水之家| www.2879.pw-时时彩黑平台输钱| www.7782.loan-七乐彩秘籍-| www.19509.cc-福彩走势图新浪爱彩| www.63987.cc-澳洲三分彩稳赢计划| www.604831.com-澳发彩票是骗局吗| www.020857.com-重庆时时彩五星走势| www.747449.com-时彩网站-| www.2097.in-南京彩票店转让信息| www.6122.cc-圆光术预测彩票| www.5188.tv-中国体彩35选7|