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.448101.com-77星彩开奖结果| www.045208.com-河南快三中奖助手| www.122086.com-美国时时彩开奖号码| www.196693.com-彩票开奖七星彩| www.268685.com-3d福彩论坛-| www.91400.com-好彩香烟焦油含量| www.14899.com-浙江体彩下载官网| www.77356.cc-好彩客下载网址| www.035234.com-大发时时彩下载| www.127352.com-竞彩足球胜平负投注| www.2172.cn-从手机怎么买体彩| www.956692.com-体彩有退票功能吗| www.122075.com-英国时时时彩| www.661031.com-亚投彩票用户注册| www.168863.com-快三是一款什么游戏| www.99ts.com-体彩球赛怎么玩| 易彩网www.36166s.com| www.pg23.com-中国竞彩官网网址| www.9976.org-下载彩吧图库第一版| www.949714.com-160彩票网站| www.143555.com-500时时彩登录| www.239516.com-网上快三算不算赌博| www.331006.com-大发彩票app骗局| www.421255.com-竞彩代理-| www.530516.com-时时彩前一选号技巧| www.612956.com-老9乐购彩票平台| www.684705.com-港彩神码三中三| www.770997.com-分分彩计划工具| www.848467.com-亚博彩票登陆网站| www.923504.com-正规彩票店买私彩| www.981487.com-易彩网主页-| www.al31.com-查询彩票开奖查询| www.091400.com-连中彩票老版本| www.219365.com-福建福彩网走势图| www.311634.com-三d彩票图纸今天| 博友彩www.951912.com| www.467638.com-体彩晚上能买吗| www.204926.com-安徽福彩快三遗留| www.301157.com-万彩吧app-| www.454003.com-手机体育彩票怎么买| www.611551.com-家彩网胆码预测独胆| www.739147.com-宝马彩票重庆时时彩| www.136636.com-贵宾室彩票用户注册| www.304237.com-甘肃11选5彩控| www.254416.com-亚博彩票app官方| www.3826.com-七星彩从几个数里选| www.29336.com-好彩票苹果手机咋下| www.271695.com-好彩一八猜什么生肖| www.769936.com-好彩投ios-| www.54nq.com-最专业移动彩票软件| www.751441.com-淘之家彩票-| www.937305.com-湖北彩钢围挡| www.59329.cc-爱乐透彩票预测| www.865641.com-下载易网彩票网| 大赢家彩票www.399150.com| www.247221.com-上海体彩app| www.cp7968.com-快3福彩网app| www.309404.com-澳门快三走势图| www.587079.com-福彩3d表格xls| www.673126.com-彩票兑奖期限多久| www.745355.com-欢喜国际彩票| www.817262.com-杭州快三开奖| www.891948.com-时时彩怎么做计划| www.957324.com-香港老彩民高手| 500彩票www.192762.com| www.36144.cc-福彩双色球基本走势| www.015946.com-唯彩-| www.52669.cc-好运彩票合法吗| www.002929.com-体彩七星彩开奖历史| www.073700.com-福彩彩票开奖视频| www.164031.com-盈彩计划-| www.920519.com-彩票摇号模拟器| www.054518.com-祥云瑞彩图片大全| www.4254.vip-优乐彩不能提现| www.870685.com-刚力彩芽av-| www.315212.com-幸运彩彩票平台| www.39158.com-中发彩票靠谱吗| www.045204.com-网上彩票代理佣金| www.969677.com-中国福利彩票好中吗| www.176266.com-极速快三预测网址| www.704618.com-中彩网彩票官方网| www.17zc.com-七乐彩加长版走势图| www.98ox.com-福彩3d黑彩代购| www.617187.com-怎么举报快三软件| www.545321.com-15选5走势图福彩| www.94cx.com-2017海南马彩| www.266449.com-福彩排3-| www.418578.com-牛彩大师可以用吗| www.588492.com-七星彩神算孑图纸| www.706869.com-好彩票官网下载| www.813551.com-新彩吧图谜第一版| www.952694.com-彩票内部中奖| www.nr1.cc-福彩3d和值表区| www.g11.me-彩票缩水软件苹果版| www.595918.com-邢台福彩网-| www.857776.com-菲律宾博彩分红| www.165432.com-福彩中心的单位轻松| www.654076.com-菲律宾网络彩票事件| www.6087.vip-彩票业是不是邓家的| www.19500.cc-时时彩大小单双预测| www.64128.com-墨肯尼足彩推荐| www.020158.com-四川体彩管理中心| www.xb38.com-海南七星彩特区论坛| www.919.space-网上买彩票有导师带| www.686.in-时时彩开奖应用软件| www.v11.org-买时时彩的app| www.271009.com-彩96下载-| www.380881.com-优优99娱乐送彩金| www.536311.com-竞彩比分怎么预测| www.48344.com-大发时时彩后二计划| www.117195.com-湖南省体彩中心地址| 大赢家彩票www.599091.com| www.22221.com-河南彩民中大乐透| www.77548.com-上海体彩发行中心| www.22651.cc-彩票店几点停售| www.015924.com-体育彩票种类| www.113501.com-四川快三查询结果| www.213254.com-彩神争2手机版| www.275395.com-168手机彩票网| www.328773.com-人人买彩票app| www.251802.cc-下载重庆福彩手机报| www.10hu.com-微微彩-| www.ak3.com-福彩3d开机号| www.349067.com-我中啦彩票网有密| www.435535.com-众彩网专家杀号定胆| www.576534.com-幸运中彩票苹果系统| www.6258.top-彩票最高中奖记录| www.85221.cc-买彩票怎样中五百万| www.271343.com-好彩3复式投注表| www.056.win-千旺彩票网址| www.109700.com-福彩分析预测论坛| www.248532.com-福彩三字图谜总汇| www.358134.com-微彩怎么充值| www.554589.com-福彩跨度组合| www.684748.com-华彩赢家官网| www.63pu.com-足彩买角球-| www.66758.com-重庆彩票领奖中心| www.768808.com-粤淘彩票购票厅| www.906444.com-买哪种彩票容易中奖| www.93379.com-丹麦28彩票技巧| www.96xn.com-易发彩票官网| www.554589.com-福彩跨度组合| www.760221.com-时时彩平台无法提款| www.917111.com-彩虹六号价格| www.986680.com-2元彩票网app| www.jc62.com-足彩比分结果| www.xg24.com-香港马会博彩公司| www.35rw.com-七星彩走势图综合| www.651.cm-乐8彩官网站| www.7sk.com-排列三彩民毒胆王| www.84xh.com-斗鱼竞彩玩法讲解| www.79258.cc-万彩彩票app| www.026037.com-代玩时时彩账号兼职| www.098731.com-pc蛋蛋彩票合法吗| www.256556.com-国外体彩app| www.43yj.com-新浪中国竞彩对阵表| www.326959.com-彩票走势图大全软件| www.883506.com-博友彩官方下载| www.wa79.com-qq彩票竞猜在哪| www.54ia.com-江西福彩助手下载安| www.64xk.com-老谢说彩预测3d| www.709342.com-网络买彩票追单| www.798295.com-海南彩票天涯社区| 网易彩票www.080wy.com|