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天

知道了
500彩票竞猜 www.sn99.com-排列五星彩开奖| www.905323.com-足彩竞彩投注| www.986954.com-彩先知彩票机| www.cc19.cc-吉林快三盘在哪买| www.141421.com-彩民彩票怎么打不开| www.615.cc-北京时时彩是软件| www.7996.pw-虚拟体育博彩| www.813904.com-福彩快三复式计算器| www.924949.com-全民中彩上海快3| www.984515.com-彩八彩票网址| www.qa5.com-网上买彩票的网站| www.xq24.com-机选一注大乐透彩票| www.42yo.com-玩彩票怎么做好计划| www.925.live-澳门生肖彩-| www.5679.pw-收快三开奖结果| www.24212.com-亚洲彩票是什么转件| www.72399.cc-天津快三每天多少期| www.854406.com-幸运快三作弊器| www.948366.com-福彩公益金资助项目| 彩客博www.8667o.com| www.d69.com-中国手机彩票123| www.177477.com-福彩3d预测分析| www.500790.com-中国第一张彩色相片| www.578397.com-幸福彩票是什么意思| www.650901.com-水彩初学者临摹图片| www.718300.com-彩虹羽凡-| www.790080.com-西宁体彩兑奖地址| www.863119.com-智慧彩软件破解| www.976676.com-焦作结婚彩礼| www.wd08.com-辽宁快三群-| www.21519.com-湖北福彩短信投注集| www.977923.com-快三能赚钱-| www.fv.cc-河北快三遗漏值| www.pf12.com-一分钟快三哪里开奖| www.2290.net-今下午体彩三句话| www.795290.com-博彩乐时时彩平台| www.720570.com-2元彩票app大全| www.866920.com-昨天彩票3d开什么| www.954535.com-彩77安卓官方下载| 500彩票网www.97655s.com| www.610796.com-安装彩钢活动房报价| www.954913.com-澳洲3分彩-| www.13479.com-足彩在线投注app| www.020861.com-网络销售彩票| www.111819.com-彩票网投免费送彩金| www.230745.com-今日福彩3d字谜| www.326795.com-快彩网网址-| www.427288.com-足彩加最新版本| www.520938.com-七乐彩姓名幸运选号| www.592380.com-我想看七星彩规律表| www.672353.com-手机彩宝网走势图| www.751694.com-中彩彩票qq群| www.834808.com-双色球好彩玩法| www.919397.com-宏图娱乐彩票骗局| www.985529.com-足彩14场胜平负| www.086606.com-福彩自助彩票机申请| www.221082.com-中国人人快三网官网| www.308268.com-购买快三-| www.792762.com-河南安阳彩票站中心| www.6vs.cc-买水果送彩票| www.54870.com-晶彩靓颜祛斑霜| www.022561.com-福利彩世界-| www.106411.com-彩票黑客团队| www.19155.cc-福彩天气网保真| www.066776.com-百盛博彩软件有用吗| www.141619.com-福建快三号码统计器| www.218191.com-广西时时彩开奖网站| www.289078.com-人人红彩票下载安装| www.362103.com-易赢福彩-| www.2817.top-彩票几点更新| www.05001.com-彩票o2o系统| www.58162.cc-福利彩票七乐彩规则| www.448351.com-9号彩票网址| www.576900.com-新浪爱彩网可信吗| www.682355.com-今日福彩3d藏机图| www.799767.com-赠送彩金-| 中国福利彩票www.33588n.com| www.026548.com-英国皇家5分彩结果| www.009502.com-彩票指南报纸凤彩网| www.079045.com-大玩家彩票主页| www.139447.com-百福彩票平台信誉| www.211517.com-老彩票平台-| www.615097.com-三彩玉是真玉吗| www.689977.com-500万足彩-| www.49589.cc-人人彩票是官网吗| www.856796.com-福彩3d藏宝图全图| www.960563.com-彩票云顶网址| www.885471.com-网上利彩平台靠谱吗| www.961243.com-买彩票中奖的人| www.cp978.com-彩票投注实战技巧| www.jn79.com-腾讯快三是什么| www.681114.com-福彩开奖录像| www.764177.com-金鹿彩票网址| www.836650.com-vv500彩票快3| www.893435.com-l乐彩娱乐计划助手| www.952090.com-台湾乐透彩今晚| www.994053.com-福彩三地图迷总汇九| www.bo40.com-搜索网易彩票| www.pu23.com-933彩票娱乐官网| www.840328.com-南国彩票现场直播| www.936176.com-幸运五星彩票在哪买| www.951937.com-关于彩神vi-| E彩堂www.43818y.com| www.et29.com-上海体育彩票| www.376550.com-体彩7星彩结果查询| www.13rv.com-c8万彩吧cn6| www.528943.com-附近哪有体育彩票站| www.651972.com-幸运彩票赚钱| www.750317.com-豪彩投五分快三| www.821888.com-福彩群英会任三遗漏| www.882278.com-彩34彩票-| www.978390.com-易彩网怎么赚钱| www.cp9892.com-湖福彩快三走势图| www.812508.com-福彩中奖秘诀| www.883506.com-博友彩官方下载| www.11433.cc-财神76c彩票| www.fk84.com-贵州双色球彩票中心| www.l89.com-彩经网3d开机号| www.81hm.com-福彩快乐十分新规则| www.140.cn-彩虹谷在哪-| www.3318.cc-福彩二元网-| www.586720.com-竞彩足球哪里可买| www.666126.com-河北体彩能买彩票吗| www.772214.com-时时彩混选36注| www.844298.com-省彩票发行中心待遇| www.911012.com-快三群里的图怎么发| www.968142.com-陕西快乐十分彩票网| 500彩票网www.895020.com| www.633603.com-虹彩检测被收购| www.699058.com-华夏时时彩-| www.762226.com-3d福彩字谜今日| www.816351.com-时时彩追热号与冷号| www.875140.com-998彩票-| www.937921.com-亿彩彩票安卓| www.980140.com-福彩生意冷淡| 亿彩堂www.951816.com| www.36fj.com-七星彩18139| www.826336.com-澳门三乐彩-| www.916507.com-致富彩-| www.985826.com-注册送彩金18| www.zc91.com-体彩p3开机号| www.53bu.com-亚盘和竞彩是啥意思| www.0573.pro-福彩布衣老汉图| www.oh48.com-猫彩-| www.781840.com-长春黑彩大庄李要力| www.874288.com-彩票平台刷流水任务| www.955947.com-新彩彩票下载安装| www.996466.com-足彩佬牛新浪慱客| www.hn16.com-足彩十四场对阵表| www.8044.com-超级简单水彩风景| www.4620.cm-彩票中一万以上| www.175913.com-安徽省快三跨度| www.609227.com-彩票平台出租试用| www.678713.com-注册app领彩金| www.770587.com-天津时时彩怎么停了| 大赢家彩票www.799497.com| www.869752.com-体育彩票种类| 福彩天下www.fcff5.com| www.ed95.com-彩神邀请码最新| www.029977.com-彩铅画图片大全简单| www.200116.com-智慧彩-| www.4093.org-鸿博彩票海南公司| www.9053.biz-优彩网官网登录苹果| www.42300.com-搜狗彩票怎么玩|