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.819529.com-彩票编程分析| www.kr09.com-足彩新浪爱彩| www.0734.mobi-博发彩票可靠吗| www.062806.com-彩拾彩票怎么样| www.220301.com-聚彩彩票app下载| www.373029.com-欢腾彩票下载| www.304732.com-买彩票选号难吗| www.313069.com-体彩7位数开奖结果| www.637788.com-七星彩今天画规律| www.867746.com-七星彩几点开| www.973513.com-儿童彩虹简笔画彩色| www.42rn.com-原彩显示没了| www.09vj.com-爱彩票网址-| www.061653.com-彩客网怎么提现不了| www.221064.com-彩票18075-| www.306344.com-七星彩中奖彩票图片| www.381001.com-什么的彩云填词语| www.578807.com-体彩标准店-| www.622365.cc-香港星彩网网址| www.887313.com-福利彩票是不是骗局| www.if1.cc-褔利彩票开奖号码| www.54879.com-可以玩厘的彩票平台| www.028782.com-中国彩吧布衣图库| www.557791.com-今晚七星彩开奖现场| www.991637.com-旺彩代理-| www.a35.club-体彩中奖者-| www.004655.com-竞彩足球500销售| www.134704.com-好彩双爆铁盒多少钱| www.264520.com-福彩3b开奖-| www.819986.com-蚂蚁会员积分换彩票| www.312162.com-福利彩票三d中将号| www.09ca.com-星辉彩票注册| www.dh21.com-彩票达人是正规的吗| www.xq43.com-七星彩19040期| www.82wc.com-乐彩网幸运飞艇| www.3545.vip-福彩项目-| www.874909.com-优游时时彩登陆| www.462768.com-正规彩票店服务平台| www.562117.com-彩票信誉网站| www.629571.com-手机网易红彩官网| www.696611.com-彩票涂刮能破解吗| www.771464.com-时时彩庄家如何赚钱| www.850995.com-6盒彩开奖网站| www.910614.com-彩坛毒药独胆| www.974957.com-3d彩民之家走势图| www.ak80.com-甘肃快三开奖果| www.144826.com-免费领彩金网址| www.262015.com-河北快三输了几十万| www.370147.com-e77.com乐彩| www.553651.com-福利彩票山东省地址| www.618507.com-精彩助手-| www.702229.com-彩客足球彩票胜平负| www.778077.com-彩生活盈利模式| www.865252.com-大发快三开挂图片| www.a75.cc-体彩排列五笫快讯| www.73qy.com-中五百万彩票图片| www.781821.com-双阳黑彩庄主| www.867695.com-今曰开什么七星彩| www.934459.com-网恋彩票托的套路| www.988896.com-新快3彩票下载安装| www.db41.com-快三分析软件app| www.xj28.com-甘肃快三助下载安装| www.62lj.com-ai彩票-| www.2054.vip-彩神通会员四码微信| www.7997.top-彩民周刊晓沪双色球| www.27737.com-足彩今天对阵表| www.7224.org-彩虹一号-| www.31jm.com-双层彩虹-| www.0353.com-福彩3d跨度定胆表| www.113755.com-极速快三导师| www.195875.com-河北快三走勢| www.924141.com-亿彩平台下载地址| www.999395.com-蓟彩芝演过的警匪片| www.cl04.com-浙江温州快三走势| www.5719.biz-体彩几位数才算中奖| www.130915.com-中华购彩网app| www.335429.com-体彩官网售后有保障| www.458640.com-足彩竞猜301| www.565103.com-500万彩票怎么样| www.642647.com-彩票软件犯罪| www.898943.com-亚太彩票api接口| www.961241.com-广州鸣彩公司靠谱吗| 500彩票www.50026q.com| 众彩www.871660.com| www.704737.com-在998彩票注册| www.864857.com-彩票大江网| www.931398.com-山东扑克牌快三| www.69494.com-山西十分彩开奖结果| www.120034.com-广西快三预测群| www.231976.com-旺彩双色球软件下载| www.7548.vip-竞彩销售管理细则| www.365132.com-彩票冷热号怎么看| www.464629.com-时时彩倍数是多少| www.548122.com-五分彩骗局能举报吗| www.653490.com-辉煌彩票联系方式| www.880150.com-福彩3d杀码图库| www.48ge.com-海南七星彩体育彩票| www.315671.com-时重庆市彩开奖号码| www.o16.xyz-玩网彩输怕了| www.1400.me-皇室彩票是骗人的吗| 如意彩票www.889489.com| www.nz50.com-竞彩足球500| www.74811.com-彩色水气球定做| www.107721.com-黑彩网站改分软件| www.211765.com-快开彩qq群骗局| www.336800.com-广西快三投注平台| www.468109.com-合买彩票不分钱| www.4057.biz-600w万彩票-| www.58043.cc-互联网购彩最新消息| www.069295.com-彩神vl邀请码| www.229239.com-怎么找私彩平台漏洞| www.434260.com-时时采彩赔率表| www.771461.com-吉林快三今天一定牛| www.875041.cc-三地布依彩吧图库| www.ui.com-手机购彩合法吗| www.518600.cc-福彩王素英判多少年| www.384893.com-澳发彩票公司| www.579124.com-福彩电话投注中奖| www.647010.com-足彩老是差一点中奖| www.720331.com-七星彩有没有中奖| www.680886.com-体彩害了多少人| www.787126.com-彩先知开奖-| www.871712.com-苏州福彩官网网址| www.939645.com-彩61彩票-| www.985143.com-竞彩盘口规律| www.aa22.cc-湖北武汉快三| www.8140.biz-彩贝壳app打不开| www.73925.com-重庆时时彩五星三码| www.068344.cc-福彩十二选五| www.194007.com-甘肃快三开奖结杲| www.852.la-电视遥控怎么调彩| www.6128.cm-福利彩票双色球买法| www.32133.cc-贵烟好彩价格| www.56hl.com-星彩娱乐app下载| www.2652.pw-福建快三最大遗漏值| www.110420.com-福彩双色球开什么号| www.395727.com-飞越彩虹歌曲| www.582598.com-下载购彩app下载| www.673577.com-福彩网电脑版| www.788526.com-足彩资讯哪里看| www.872083.com-彩吧祝手-| www.952426.com-口袋彩店-| 云博彩票www.03882.cc| www.79uy.com-江苏体育彩票图片| www.6436.cc-豪彩娱乐注册办新密| www.54700.com-最新送彩金-| www.xr34.com-体彩19035结果| www.38ay.com-彩票摇奖球大小| www.447706.com-天空彩民心水网| www.456049.com-福彩开奖视频作假| www.579474.com-重庆时彩遗漏历史| www.661121.com-福彩15选五走势图| www.721229.com-七星彩破解公式| www.797674.com-购彩99-| www.853873.com-北京时时彩赛车网址| www.900204.com-广东体彩粤11选5| www.092406.com-彩经网走势图电脑版| www.531311.com-彩铅画桃花树| www.792263.com-杭州福彩中心兑奖| www.927205.com-凤凰彩票提款密码| 亿龍彩票www.1368h.cc| www.aw78.com-福彩5d是每天开| www.5266.pw-吉林快三派彩链接| www.891687.com-彩票看走势图|