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.551847.com-开网络彩票台子流程| www.3875.cn-3d彩票和值表| www.06811.com-3dt3d通福彩| www.20204.cc-体彩283玩法说明| www.92592.cc-一定牛体彩篮球| www.154518.com-中彩票比赚500万| www.3934.biz-东北结婚彩礼多少| www.292000.com-搜索快三助手下载| www.215105.com-江苏福彩新快三| www.312568.com-福彩三d的走势图| www.396501.com-金钱豹天空彩票| www.586269.com-彩票二等奖-| www.545598.com-八仙时时彩手机版| www.00842.com-乐彩网论坛三d杀号| www.056783.com-天空彩兔费资科大全| www.502683.com-多彩投是什么| www.257888.com-大胜彩票app下载| 梦想彩票www.33112j.com| www.54pa.com-福彩三地跨度表| www.465741.com-仁信彩票登录| www.079049.com-大玩家彩票不能提现| www.125430.com-彩票投注有啥规律吗| www.89pw.com-胜负彩推荐310| www.784649.com-七星彩五行算法| 彩天下www.196065.com| www.ef1.com-福彩快三平台登录| www.063628.com-彩站怎么挣钱| www.215613.com-七星彩杀号公式汇总| www.8375.wang-深圳皇庭彩园怎么样| www.69135.cc-天天乐购彩票有吗| www.103566.com-福彩直播开奖视频直| www.947977.com-众彩网怎么进不去| www.bf49.com-淘宝彩票网-| www.tl08.com-七位体彩开奖号码| www.68619.cc-环球速八彩票| www.0201.net-彩票哪个品种奖金高| www.63yx.com-彩票查询开奖软件| www.196168.com-爱彩乐安徽快三| www.rp53.com-广西快三一定牛网站| www.07ql.com-休彩上期中奖号码| www.935635.com-时时彩定独胆的方法| 优彩网www.987436.com| www.31ic.com-抖音彩虹符号| www.122031.com-安徽彩票中奖记录| www.234880.com-3d福彩专家号| www.318614.com-福彩3地全图总汇八| www.500945.com-小一寸彩照-| www.422627.com-彩客彩网下载安装| www.788.gg-嘉兴体育彩票竞彩店| www.35535.com-彩票匕星彩开奖号码| www.wk56.com-彩票开奖数据接口| www.820258.com-投资彩票稳赚的方法| www.920116.com-赢彩王破解免费版| www.983914.com-彩99能提现吗| www.bo13.com-福彩网注册邀请码| www.zk44.com-南粤风采好彩3技巧| www.36vo.com-703彩票怎么破解| www.94ru.com-福彩支付宝领奖| www.035438.com-彩票至尊软件| www.wj87.com-如何看彩票走势大小| www.165067.com-全民彩彩票官网| www.32300.com-8k彩票平台官网| www.4034.com-海南博彩牌照怎么批| www.612699.com-陕西宝马彩票案刘亮| www.739812.com-福彩快乐12加奖金| www.919866.com-手动彩票打印机| www.xl.cc-河北快三的遗漏号码| www.0848.xyz-手机能安装彩播吗| www.7206.vip-彩票交税多少| www.22536.cc-河南郑州彩礼| www.87737.cc-关于京东彩票网| www.936908.com-快3彩票计划平台| 金冠彩票www.49956k.com| www.35520.cc-开彩吧开奖结果| www.01jv.com-灯产生彩虹-| www.74gv.com-彩票藏机图天气网| www.0769.link-湖北快三形态走图表| www.0602.vip-我要中彩票下载安装| www.5719.biz-体彩几位数才算中奖| www.22585.cc-体彩泳坛夺金规则| www.7564.cn-重庆时时彩平刷漏洞| www.028600.com-来彩020彩票| www.112967.com-购彩彩票下载安装| www.703234.com-万家彩票注册| www.807732.com-3d彩票多少钱一注| www.ek01.com-彩吧试机号-| www.040268.com-优势的彩票合买系统| www.332689.com-华语京彩挂机平台| www.400946.com-竞彩数据模型预测| www.504508.com-彩排彩的意思| www.566469.com-河南福彩票012期| www.644608.com-2123彩票app| www.cz55.com-幸运快三预测| www.wj09.com-彩神计划软件靠谱吗| www.621880.com-宁波彩票中奖投注站| www.77kj.com-竟彩票极速赛车| www.501139.com-希腊分分彩开奖结果| www.568546.com-微彩论坛排列5| www.625078.com-彩票界神话-| www.679452.com-体彩天下5-| www.751366.com-彩90.cm彩票| www.812948.com-手机钢化彩膜怎么贴| www.878121.com-福彩走势200期| www.941136.com-中国体彩票排列五| www.986457.com-竞彩足球预测分析| www.no48.com-下截福彩青青海快三| www.5ei.com-常州体彩中心招聘| www.67rf.com-百乐门彩票备用网址| www.1113.red-竞彩俱乐部-| www.954576.com-国外彩票平台有哪些| www.555241.com-人人红彩票还能买吗| www.130412.com-快三集体表演套路| www.225992.com-酷彩票计划群| www.wy58.com-彩票开奖双色球预测| www.912925.com-体彩三d排列五| www.ri32.com-七乐彩奖金说明| www.839533.com-胜负彩310走势图| www.97208.com-818导航彩票| www.114549.com-哪个福彩app好用| www.8515.top-怎么投诉黑彩网站| www.775151.com-k彩娱乐app-| www.586532.com-彩票中的偏态| www.686759.com-中彩那天课文朗读| www.760103.com-体彩七位数中奖查询| www.833384.com-乐赢彩票下载安装| www.896792.com-贵州福彩三地推荐号| www.959034.com-快乐十分钟彩票下载| 吉利彩票www.80065b.com| www.407979.com-体彩七星彩奖项| www.575745.com-网上正规彩票app| www.659064.com-像91竞彩的软件| www.0464.cn-彩票建群群规| www.592168.com-七星彩一组头尾| www.201877.com-彩票投注app| www.03bm.com-甘肃省快三形态一| www.021131.com-体育彩票玩儿法| www.130940.com-江西彩礼会返还吗| www.223069.com-中国竞彩500| www.5281.vip-香港赛马赛及派彩| www.2vl.com-怎么戒手机时时彩| www.1368.hk-九万彩票是谁开的| www.560715.com-内蒙古体育彩票网站| www.092191.com-手机新浪爱彩网| www.210213.com-那种人不适合买快三| www.289953.com-cp白菜彩金网站| www.378842.com-马会彩经一码必中| www.490898.com-体育彩票资金的构成| www.551085.com-10分钟彩票-| www.986898.com-掌中彩网址-| www.71nh.com-哪个彩票是大平台| www.006782.com-河北体彩大乐透走势| www.997469.com-app用什么买彩票| www.318256.com-创意水彩画作品欣赏| www.4ww.com-福利彩票怎么看走势| www.86352.cc-福彩新彩网手机版| www.156885.com-重庆时时彩走势图表| www.262299.com-快频彩是正规彩票吗| www.390065.com-什么彩票能中几百万| www.808481.com-全国各地方彩票开奖| www.897257.com-澳洲彩票中奖规则| www.862323.com-福彩那几天开奖| www.232572.com-派彩电子走势图下载| www.318912.com-江西彩票大奖| www.391775.com-星耀国际彩票安全吗|