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天

知道了
彩票123现在叫什么名字 www.509029.com-朱雀彩票app| www.ad04.com-新浪彩票双色球预测| www.043900.com-微信彩票帮手扫一扫| www.200623.com-七星彩和直走势| www.043767.com-福利彩票术语| www.149119.com-极速时时彩计划全天| www.za82.com-福彩传统彩十选五| www.708767.com-体育彩票兑奖的程序| www.81931.com-北京彩票站申请| www.370386.com-用彩铅画动漫人物| www.108197.com-唯彩足球竞彩网首页| www.326665.com-七星彩安然-| www.qj67.com-南粤好彩1走势图| www.372691.com-举报彩票平台| www.667527.com-诺基亚彩球滑梯游戏| www.753210.com-中国彩吧购彩大厅| www.853133.com-166购彩-| www.gx27.com-彩票大全人工计划网| www.7ck.cc-做体彩销售好做吗| www.73ui.com-快三未出号-| www.510215.com-呼市体彩中心电话| www.177311.com-网赌快三的幕后黑手| www.851239.com-福彩3d组选玩法| www.25ev.com-腾讯分分彩胆码公式| www.9839.cn-椽子彩画-| www.499491.com-彩票计划员招聘| www.351.cc-500彩票线路检测| www.308530.com-彩38手机版-| www.a39.net-41彩票网网址| www.59765.com-网络彩票有赢的吗| www.567378.com-7乐彩特别号| www.332885.com-分分彩官网平台| www.457303.com-体彩太湖字迷| www.1632.org-探探加微信让买彩票| www.vj03.com-快三精准计划网| www.11317.com-凤凰竞彩推荐| www.650822.com-重庆十字彩怎么玩| www.212680.com-彩票软件官网| www.153265.com-大发快三如何赢钱| www.227977.com-快三套路-| www.661254.com-即刮型彩票-| www.72317.com-大钱庄彩票下载安装| www.89lp.com-电竞博彩犯法吗| www.776769.com-丹彩微贷-| www.959343.com-下载春天彩票| www.la55.com-江苏快三号码统计| www.84kf.com-篮球彩票大小分结果| www.95178.cc-中国足彩比分直播网| www.069935.com-彩神争霸正规吗| www.636722.com-最漂亮的彩虹怎么画| www.762235.com-彩票万博正规平台么| www.883501.com-金百博网络彩票| www.983154.com-彩35下载手机版| www.md04.com-腾讯彩票官网| www.52up.com-葡京重庆时彩骗局| www.41586.com-福利彩票破解| www.cai3168.com安徽快三投注一定| www.956018.com-乐彩双色球字谜总汇| www.34496.com-幸福彩彩票手机报| www.796464.com-体彩14场胜负规则| www.791025.com-快乐双彩玩法规则| www.896283.com-下载瑞彩网-| 博乐彩票www.188393.com| www.29025.com-体彩排列七-| www.329321.com-梦到彩票中二等奖| www.539618.com-釉下彩餐具制作| www.237849.com-派彩481走势图| www.559682.com-彩票网手机-| www.637234.com-福彩3d彩服-| www.719646.com-今天快乐彩开奖号码| www.371525.com-兰花彩铅画图片大全| www.997867.cc-福彩3d包好价格表| www.yp21.com-大马4d彩票-| www.66ig.com-福利彩票选法| www.2045.shop-彩票网站建设开发| www.291659.com-苹果盛世彩票| www.217686.com-网络福彩骗局| 华彩www.71399y.com| www.6088.cm-竞彩盘口分析技巧| www.289957.com-彩宝网排列三试机号| www.1875.hk-福利彩票2323期| www.85731.cc-百度体育彩票开奖| www.373950.com-福彩大星走势图| www.696006.com-彩票网址哪个好| www.771705.com-美团自助彩票机| www.839745.com-福彩今日新鲜事| www.904150.com-大发快三害死多少人| www.966595.com-河北省福彩中心地址| 500彩票www.338053.com| www.jw39.com-老版彩库2015| www.f29.top-万达彩票靠谱吗| www.528.gg-和彩云网页版| www.707257.com-时时彩后三组三规律| www.g91.org-彩宝cb8-| www.893081.com-在线做号工具时时彩| www.976023.com-重庆彩礼-| www.gx75.com-新彩票走势网| www.358775.com-江苏体彩十一选5| www.1578.cc-河北黄骅福彩冀彩宝| www.984273.com-二分彩技巧-| www.oj30.com-海南体彩飞鱼| www.955.bid-彩票那种简单| www.017967.com-彩专家人工计划下载| www.574434.com-爱音乐彩铃电信在哪| www.725902.com-河北体彩领奖地址| www.858182.com-重庆老时彩-| 彩票大家乐www.21202g.com| www.840807.com-彩票中奖是给支票吗| www.952299.com-马来3分彩开奖网站| www.cai808.com-新快三技巧-| www.572917.com-彩经众乐三分快3| www.1020.link-亿万彩票-| www.662070.com-南通竞彩转让| www.rj22.com-安徽快三到几点| www.499836.com-高频彩必输-| www.48442.com-竞彩足球app优化| www.0085.net-菠萝彩双色球公式| www.09265.com-广东体彩电话业务| www.431234.com-新浪爱彩不能注册| www.8369.biz-七星彩票局王| www.0381.cc-刘老师休闲快三教学| www.657144.com-多彩网手机版| www.839677.com-百彩网免费资料大全| www.972785.com-日彩网app-| www.ak30.com-河北快三下载软件| www.685393.com-双色彩球开奖查询| www.827962.com-lg传统彩-| www.36122.com-南方彩票网首页| www.6cq.com-盛大彩票可靠吗| www.964337.com-幸运福星七星彩版| www.32el.com-今天开的彩票| www.529051.com-易彩网合法吗| www.5051.in-足彩app不能兑现| www.578174.com-乐彩平台注册网址| www.82466.cc-3d彩民之家开机号| www.1003.cm-彩票为什么要抓长龙| www.7250.vip-彩虹糖小豆机分解图| www.wo3.cc-新浪彩票开奖公告| www.44qz.com-竞彩足球输了就倍投| www.113185.com-腾讯快三是什么彩票| www.74355.com-时时彩票开奖号码| www.126622.com-印尼五分彩开奖官网| www.451895.com-9号彩票官网网站| www.zl11.com-三d双彩论坛字谜| www.4695.vip-新版微信怎么买福彩| www.092365.com-足彩半全场玩法介绍| www.204525.com-竞彩最牛技巧| www.316220.com-豪华体彩店-| www.439938.com-视频中彩那天赛讲课| www.582090.com-维彩看球下载| www.700053.cc-魔合时时彩计划网页| www.794794.com-正规彩票官网官网娱| www.889967.com-给力高频彩app| www.979343.com-大发快三亿博计划| www.in35.com-澳客网竞彩足球| www.05fs.com-彩网上哪个可靠| www.479.win-北京28福利彩| www.7711.com-信彩娱乐登录注册| www.2516.vip-福彩店开店必备技巧| www.06663.cc-体彩多邦预测| www.998246.com-网赌248彩票| www.69844.com-广东福利彩票走勢图| www.8208.vip-北京pk彩票客服| www.dq11.com-共赢彩票网-|