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天

知道了
106官网彩票平台 www.52768.com-篮彩神棍-| www.222878.com-qq如何买彩票| www.370549.com-彩票搞笑动态| www.542019.com-臻彩唇膏-| www.680635.com-澳门彩票slot| www.809685.com-e乐彩登录官方| www.905392.com-竞彩在线投注平台| 彩经彩票www.91954.com| www.690053.com-333彩票网登录| www.27zp.com-全彩漫画同人| www.93on.com-彩色单张的图片| www.7427.cm-西安市竞彩足球| www.52678.cc-玩时时彩可以赚钱吗| www.009784.com-华彩在线网址| www.117561.com-福利彩票导师带人| www.217981.com-共赢彩票吧-| www.310206.com-我要看体彩和福彩| www.297585.com-v8彩app平台| www.304999.com-体彩11选5投注| www.426005.com-福彩管理中心网站| www.973380.com-美女套路买彩票| www.003128.com-彩票k3711-| www.948636.com-体彩排列五几天开奖| www.co61.com-k彩线路测速| www.05pw.com-今日福彩几点开奖| www.1588.online七星彩有什么规律吗| www.24299.cc-澳洲时时彩后三计划| www.74es.com-彩宝app客户端| www.17197.cc-买彩票算投资吗| www.181105.com-彩票专家实票| www.2008.la-福彩过滤彩票软件| www.59665.cc-长春彩票销售员招聘| www.072155.com-安吉彩票案件判刑| www.aa02.com-江西彩票中奖事件| www.3732.org-上海快三彩控| www.9859.me-古建彩绘纹样图片| www.57322.cc-台湾福彩经典报| www.015913.com-鸿运彩票网是正规| www.095646.com-代玩幸运5快三| www.177875.com-江苏快三玩法有诀巧| www.7588.net-奖虫七星彩打印机| www.0068.cm-美国彩票在哪买| www.8758.pw-顺盈彩票是真的假的| www.90bz.com-博彩lg平台-| www.5494.xyz-彩神国际破解版| www.13172.com-福彩快3计划| www.61537.com-大大彩票网站下载| www.024752.com-赣州体彩中心地址| www.122093.com-英国五分彩开奖视频| www.211365.cc-乐彩网五分快3| www.311972.com-43彩票下载-| www.128049.com-彩虹画-| www.261039.com-竞彩九场开奖奖金| www.394113.com-彩虹世界新app| www.578208.com-快三群名字大全| www.700280.com-辽宁福彩中奖详情| www.sg2.com-上海市体彩兑奖中心| www.s40.org-福彩3d冷温热表| www.93yg.com-最近福利彩票站西平| www.6659.top-快3开门彩-| www.846481.com-安徽彩民李永志| www.937230.com-十二釉彩大瓶| www.991843.com-7乐彩开奖查询| www.fm07.com-广东快乐十分彩开奖| www.m44.in-鸿运彩票是骗局吗| www.62kz.com-双色球松江彩民中奖| www.2029.cn-彩虹六号rog战队| www.9425.cc-体彩排列三红五图库| www.16iq.com-彩票不倒翁投注方法| www.285717.com-k彩福地线路登录| www.404445.com-重庆彩礼多少| www.512136.com-优秀彩铅教师范画| www.576511.com-快三不出一跨| www.639338.com-体彩店网上经营| www.703440.com-福利彩票自助选号| www.773095.com-彩票投注网站的图片| www.858649.com-福彩3d开奖835| www.923068.com-彩票好运占卜下载| www.975272.com-汇彩网是大平台吗| 91彩票网www.912480.com| www.196943.com-彩票研究高手论坛| www.80858.cc-四川福彩官网| www.080286.com-吉林省福彩快3助手| www.189230.com-百姓彩票网-| www.041054.com-江南彩姐的彩票专栏| www.lv85.com-足彩app-| www.898378.com-彩民乐树-| www.602027.com-彩票走势图中彩图表| www.221657.com-玩彩怎么玩才能赢钱| www.8069.vip-水彩设计创意画图片| www.015891.com-幸运彩票骗局| www.a37.top-福利彩票提前开奖| www.34698.com-人工智能选彩票| www.226211.com-台湾福彩网站| www.205122.com-网彩能挣钱吗| www.cp756.com-快三网投第一门户| www.3cl.com-负债中彩票-| www.107322.com-世界彩票销量| www.7425.vip-国民彩票网-| www.037032.com-大明成化描金珐琅彩| www.616305.com-青海快三遗漏数据| www.89mg.com-京彩安全码是多少| www.000860.com-安徽快三奖励| www.rv8.com-万达大玩家彩票攻略| www.zl03.com-体彩排列5开奖直播| www.542.net-下载广东彩票| www.9963.pw-明天开奖彩票| www.028029.com-彩票软件计划群| www.41hi.com-澳洲三分彩平台| www.9788.tv-多彩贵州评论| www.60051.cc-微彩社交app| www.055359.com-中国合法彩票有哪些| www.170332.com-彩票360官方版| www.036888.cc-福彩3地图迷总汇| www.221025.com-中国休育彩票开奖| www.355047.com-贵州在哪兑福利彩票| www.397960.com-七星彩大奖合0的码| www.864888.com-华彩在线下载| www.960108.com-手机彩票3d图片| www.7656.xyz-各种彩票的标志| www.28652.cc-股市彩票-| www.096276.com-双色球众彩网首页| www.164944.com-安徽体彩领奖中心| www.dj32.cc-七乐彩玩法规则介绍| www.988151.com-彩93app-| www.441151.com-大发云彩神88| www.234357.com-80彩票是骗局| www.318163.com-彩票买什么彩种好| www.3216.cc-盈彩彩票安卓版| www.8533.top-中国竟彩网店内频道| www.33341.cc-福利彩票一注多少钱| www.76056.com-彩票纸收费吗| www.943300.com-易盈彩票的真实性| www.994830.com-惠彩app-| www.fn03.com-竞彩足球赛-| www.vl89.com-彩吧3d寻马图| www.04ga.com-双色预测彩经网| www.72yt.com-中国足球网胜负彩| www.826671.com-今日彩票是真是假| www.4465.net-财神时时彩计划软件| www.10rt.com-彩铅画动物图片| www.021231.com-信彩票平台-| www.386209.com-牛彩网福彩-| www.492242.com-临夏福利彩票转让| www.563435.com-香港中持彩-| www.579063.com-开彩开奖现场直播| www.706316.com-1分时时彩走势图| www.846004.com-中国彩票是否做假| www.99tk.com-彩八彩票是假的吗| www.9363.xyz-怎么分辨彩票黑平台| www.68972.cc-尊彩网能玩吗| www.953421.com-310竞彩足球| www.et2.cc-彩票256手机版| www.al51.com-彩71彩票可信吗| www.366758.com-海口福利彩票营业厅| www.655610.com-七星彩买礼物| www.il49.com-陕西福彩-| www.s41.net-查看福彩中奖号码| www.102934.com-k彩富民福地测登录| www.149004.com-全能彩票-| www.209828.com-鸿运彩票合买平台| www.259252.com-彩票选号器最新版| www.317369.com-七乐彩玩发-| www.374126.com-搜狐彩票资讯网|