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.da11.com-人人彩彩票-| www.0975.vip-甘肃快三分析| www.715578.com-爱购彩票是合法的吗| www.871528.com-香港彩富网正版资料| www.09779.com-上海福彩中心三楼| www.418438.com-上海福利彩票网‘| www.361795.com-买彩票就是看运气| www.426755.com-烟台福彩招聘信息| www.74766.com-彩票这期买什么号码| www.111559.com-佳缘女孩带我玩彩票| www.226176.com-快乐彩22选1| www.683852.com-免费彩票资大全| www.008612.com-体彩的标语-| www.131579.com-彩礼价格表-| www.220047.com-北京快三投注网站| www.33296.com-贵阳竞彩快三查询| www.923532.com-高频彩万能码数据| www.cp9859.com-彩票app送彩金| www.ya96.com-禁彩-| www.144898.com-东莞体育彩票的提成| www.239980.com-彩神网资料大全| www.324010.com-福利彩票app中奖| www.398108.com-怎么做一个彩票网站| www.658980.com-天牛天彩3d图谜| www.787754.com-彩客化学创始人| www.881611.com-辉煌彩票下载| 彩之家www.12czj.com| www.pi28.com-彩票表格-| www.43on.com-脸上挂彩了-| www.0510.tv-彩票查询历史中奖| www.677507.com-快三回血-| www.877486.com-r8国际彩票合法吗| www.954786.com-彩票今晚-| www.156466.com-五百万彩票苹果| www.307858.com-甘肃快三25期| www.065432.com-简单彩铅画教程| www.4691.com-彩票能提前买几期| www.431646.com-二四六天天免费好彩| www.997907.com-3d大中小乐彩网| www.764780.com-福彩双色球查询中奖| www.881928.com-佰万彩票网官方网站| www.993708.com-足彩2串1倍投技巧| www.48ng.com-彩专家人工计划在线| www.542052.com-东森时时彩登录| www.662156.com-好彩票正规官方网站| www.pt90.com-佳缘出现彩票骗局| www.612771.com-uc彩票网址-| www.560.com-我乐时时彩-| www.5862.wang-制作中奖彩票图片| www.936166.com-五星彩票网址是什么| www.cp871.com-吉林快三平台注册| www.nc44.com-网易快三有鬼吗| www.79ld.com-福彩属相开奖| www.1983.date-足彩五串五-| www.019714.com-招商加盟彩票| www.984315.com-外国时时彩彩票网站| www.ci00.com-彩票网站下载| www.c47.cm-福彩三d字迷东方朔| www.023843.com-彩票五行属水| www.107377.com-80彩app下载| www.191751.com-有没有一分快三平台| www.947147.com-彩票辅助分析软件| www.309855.com-微信小程序彩票| www.200281.com-今晚全国彩票开奖| www.267062.com-幸运快三怎么看走势| www.537204.com-沉迷于彩票-| www.726259.com-河北彩票最大奖| www.834402.com-日本软红好彩| www.939085.com-139彩票登录不上| 博乐彩票www.255811.com| www.917.red-七星彩怎样算是中奖| www.540958.com-福彩字谜图迷乐彩网| www.jt88.com-重庆时时彩一定牛| www.5ou.com-足彩奖金扣税| www.208161.com-网上彩票帮投是什么| www.308980.com-彩68彩票官网| www.751314.com-彩票正规官方网站| www.837076.com-一定牛足彩下载| www.913966.com-彩之网相年富图今天| www.ai21.com-昨天体彩开奖结果| www.xa22.cc-福彩网购是真的假的| www.16hj.com-幸运彩改版-| 众乐彩票www.684344.com| www.796949.com-彩票获奖经验| www.875945.com-分分彩单双稳赚| www.948195.com-特彩吧高手论坛网| www.989392.com-智博微彩城下载| www.cs22.com-166彩票-| www.1064.net-中国体育彩票平台| www.201340.com-易彩网app下载| www.327405.com-彩票榜官网地址| www.39712.cc-u9彩票48.8-| www.057957.com-3d银海彩报第一版| www.121075.com-福彩双色球选号| www.05945.com-体育彩票竞彩计算机| www.735359.com-乐城彩票怎么样| www.79zl.com-3d开机号牛彩网| www.536.name-褔体彩开奖公告查询| www.981348.com-看透彩票刮奖的图案| www.uj21.com-贵州快三开奖走试图| www.49pq.com-体育彩票无人售票机| www.681956.com-网上乐盈彩票合法吗| www.821993.com-流产3d彩摘网| www.qm43.com-博牛彩票一首页| www.42ad.com-唯彩足彩进球预测| www.452.mobi-2019网上售彩| www.144433.com-ag快乐彩怎么玩| www.829897.com-网易福彩杀号定胆| www.896996.com-36o彩票购彩大厅| www.958041.com-福彩3d对应码| www.998686.com-西华体育彩票| www.cg42.com-江苏快三登录平台| www.xp19.com-利盈彩票app下载| www.005528.com-福建体彩聊天室| www.55159.cc-澳门时时彩开奖网站| www.569004.com-重庆时彩稳定版| www.753846.com-幸运飞艇双彩网| www.877744.com-彩票历史开奖大全| www.957084.com-双彩论坛首页首页| www.ed51.com-彩票推广话术| www.e01.pw-足彩中几个亿会吗| www.76wk.com-彩票开奘查询| www.772936.com-加微信送体验彩金| www.466022.com-快彩网在哪里下载| www.647722.com-五分彩玩法介绍| www.78pp.cc-利搏彩票解马| www.298551.com-七星彩南国论坛| www.414244.com-彩票财神算号| www.ze54.com-一定牛体彩版本下载| www.35vd.com-全民彩票500网| www.389.biz-炫彩涂鸦ios| www.273100.com-湖北快三有假吗| www.784784.cc-匕星彩走势图500| www.858744.com-福彩七乐彩开奖公里| www.920067.com-下载福利彩票快三| 幸运彩票www.73166g.com| www.388857.com-彩票大管家站长版| www.079579.com-竞彩篮球玩法规则| www.394698.com-手机上玩快三彩票| www.64604.com-好乐多彩票骗局揭秘| www.020537.com-刷福彩流水单可靠吗| www.860983.com-好彩1开奖号| www.922796.com-网上怎么注册彩票店| www.972646.com-水溶性彩铅画风景| www.cp6339.com-体育彩票官网| www.811976.com-乐彩论坛1-| www.931978.com-排3彩宝网试机号| www.2pn.cc-彩吧邀请码-| 9928彩票www.www.9928ff.com| www.ay50.com-江西体彩领奖地址| www.rz73.com-北京褔利彩票论坛| www.vf40.com-彩票投注网站正规吗| www.52622.com-彩票足球竞彩网| www.97926.com-时时彩神兽计划| www.ih38.com-福彩走势图带连线| www.d43.club-福彩3d高手网| 彩天下www.196036.com| www.5595.win-附近彩票店预约平台| www.179827.com-福利彩快3走势图| www.620821.com-彩票计划全天全中| www.rt69.cc-牛蛙彩票资料大全| www.871644.com-足彩过滤-| 网易彩票www.07163s.com| www.904997.com-足球彩票怎么玩法|