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天

知道了
必赢3D www.868284.com-希腊5分彩正规吗| www.964757.com-一分时时彩开奖号码| www.cai8133.com快三开奖查询江苏| www.qv99.com-彩票外挂是真的吗| www.18jv.com-体彩微信营销方案| www.91gh.com-家彩网胆码独胆| www.336466.com-快钱彩票是正规的吗| www.299.com-足彩分析骗局| www.6987.cn-七星彩重奖规则| www.42659.com-113彩票开挂软件| www.96532.com-下载安装快彩王| www.059881.com-湖北快三未出统计图| www.132636.com-吉利彩票-| www.208692.com-足彩310什么意思| www.282411.com-天吉双彩论坛手机版| www.026039.com-爱彩人彩票网走势图| www.131097.com-开封彩礼多少钱| www.737398.com-福彩三d今晚开奖号| www.863023.com-胜负彩19053| www.939629.com-香港福彩网址是多少| www.48yi.com-四川快三推荐号码| www.2425.me-彩票软件违法| www.cs12.com-河北快三稳赚技巧| www.z51.cc-c8彩票下载-| www.096041.com-正规购彩票平台| www.239944.com-彩神vl下载-| www.336991.com-广东体彩网十一选五| www.417467.com-下载盛大彩票软件| www.534753.com-什么彩票是六个数字| www.rk89.com-七乐彩中奖对照图表| www.29no.com-彩铅动漫男生头像| www.4778.xyz-测试最近折彩票不准| www.13524.cc-足彩复式价格| www.161598.com-体彩领导-| www.309268.com-彩票平台刷流水真假| www.20890.com-改彩票倍率骗| www.88326.com-春天彩票是合法的吗| www.106918.com-瑞彩祥云下载网址| www.210048.com-大发快三代理邀请码| www.5116.net-天津七星彩如何中奖| www.14987.cc-彩报图库试机号| www.62692.com-湖北快三冷号统计| www.949519.com-彩70彩票平台| www.44no.com-江苏快三周易| www.449976.com-我该买什么彩票| www.623027.com-企鹅直播平台竞彩猫| www.765900.com-喜盈盈彩票网| www.909540.com-彩票大小单双| www.th4.cc-贵州快走势图彩经网| www.262561.com-福彩快3遗漏号数据| www.268607.com-c138彩票-| www.537120.com-彩起名字-| www.838405.com-大发快三一天多少期| www.975637.com-哈尔滨福彩兑奖规则| www.72fg.com-彩票独赢什么意思| www.8528.biz-彩票中奖者-| www.71382.com-上海彩票自助| www.306367.com-彩票机选可能中奖嘛| www.376117.com-11选5辽宁体彩网| www.530333.com-星际彩票app| www.063062.com-开个彩票站挣钱吗| www.148040.com-乐优炫彩手机版下载| www.246062.com-精彩十分彩票| www.324737.com-福彩3d谜语天| www.393805.com-福彩每期中奖号码| www.520664.com-江苏体彩位数| www.593916.com-彩大师选号机| www.666177.com-大乐彩怎么回事| www.737485.com-国彩微信骗局揭秘| www.811912.com-天天好彩944cc| www.880219.com-福彩预测分析彩吧论| www.948317.com-粉百合3d彩吧| 盛大彩票www.ch1018.com| www.11268.cc-要中彩上众彩| www.462834.com-环球彩票登录平台| www.547857.com-开心七星彩网图版区| www.871728.com-利彩合法吗-| www.946949.com-官方彩种春节关闭| 500彩票www.52072y.com| www.yb38.com-开门彩官网-| www.62pk.cc-彩票灵异故事| www.6237.net-16亿彩票-| www.23171.cc-彩票双色开奖查询| www.69894.cc-预知百盈快三的软件| www.135247.com-二元彩票网走势图| www.210382.com-福建省福彩网| www.273613.com-时时彩公告-| www.361663.com-网络彩票可以提现| www.447223.com-澳门彩票软件| www.533327.com-彩票周期是什么意思| www.762952.com-傲赢彩票是哪个平台| www.878716.com-福彩3d百度乐彩网| www.949673.com-体彩试机号和金码| 豪彩VIPwww.885pz.com| www.w56.cc-彩票app赢钱彩| www.146289.com-彩票578下载| www.kj21.com-新浪爱彩双色| www.1id.com-乐彩3d字谜-| www.20079.com-四川福利彩票中心| www.088074.com-发财网彩票-| www.238676.com-体育彩票选号| www.398458.com-体彩彩票可以退吗| www.xr04.com-七星彩数据库| www.2398.in-快三长龙分析| www.859215.com-彩票砍龙概率| www.091400.com-连中彩票老版本| www.236061.com-彩票预算软件| www.617991.com-彩票365手机网站| www.770835.com-七彩山鸡养殖视频| www.72700.com-精彩大片播放器下载| www.260158.com-拍彩票查中奖| www.371990.com-体彩出的是什么号| www.543076.cc-体彩周报-| www.639492.com-彩票店摆设-| www.733151.com-快三玩法秘籍大全| www.840184.com-足彩皇冠信用我| www.941333.com-体彩规则介绍| 吉利彩票www.80075n.com| www.392808.com-重庆竞彩彩客网| www.90px.com-微彩站如何使用| www.3225.org-9928彩票网-| www.42014.com-天天中彩吧图库| www.48541.com-下载竞彩app| www.276603.com-自己的彩之源邀请码| www.362396.com-彩票掉了一点角| www.625528.com-怎样开网络彩票| www.766781.com-一一河北福彩飞选五| www.6784.top-幸运彩票是违法的吗| www.045127.com-足球体育彩票开奖| www.293133.com-下载河北快三| www.434385.com-福彩攻略-| www.572609.com-天天时时彩计划网站| www.085759.com-彩神写真机-| www.024676.com-正规的彩票开奖大全| www.318397.com-福彩每天都有开奖吗| www.641547.com-体育彩票图标排版| www.889981.com-篮彩竞彩网-| 网易彩票www.506752.com| www.000641.com-pp彩票app-| www.777515.com-星鱼娱乐时时彩| www.894965.com-星宇购彩重庆彩| www.986593.com-256时时彩下载| www.4469.top-彩票投注站如何盈利| www.9621.biz-超级大乐透彩经网| www.51044.com-投彩彩票下载| www.526250.com-串关足彩计算公式| www.675815.com-彩票店里有什么彩票| www.755399.com-重庆时时彩票群| www.830891.com-义乌市体彩管理中心| www.3782.biz-足球彩票单场胜负平| www.24438.com-体彩天下网址下载| www.755070.com-南昌福彩开奖结果| www.h12.biz-中彩网开奖公告号码| www.527.tv-时时彩直播的软件| www.89485.com-彩票33娱乐平台| www.109722.com-下载六咊彩-| www.256373.com-快三网址计划| www.359777.com-七星彩会员用户登录| www.459855.com-福彩游戏跟单项目| www.553656.com-成都竞彩-| www.704509.com-128福彩下载| www.3121.cn-幸运彩票害死人p| www.9497.loan-彩钢琉璃瓦生产线| www.44658.com-大鹏金服彩票|