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天

知道了
彩39彩票安卓 www.243516.com-手机投注彩票app| www.396467.com-周三周三开什么彩票| www.592153.com-彩票3d怪字神贴| www.688966.com-三分彩在线计划软件| www.789655.com-体彩站竞彩自己打水| www.977620.com-网上买世界杯彩票| www.fl87.com-手机福彩下载| www.b19.me-彩票开奖规则| www.47vl.com-彩票技术书-| www.0757.wang-高频彩开奖平台| www.06115.cc-福彩3d号码直选表| www.77632.cc-全民彩票手机版下载| www.067959.com-辉煌彩票是什么| www.151960.com-福彩双色球智能选号| www.326538.com-彩云追星七星彩| www.433199.com-银彩通官网-| www.534098.com-向洪甲五行预测彩票| www.679735.com-如何陪同戒掉彩票| www.769306.com-竞猜足彩奖金计算器| www.907587.com-吉林省体彩主任| www.992369.com-旺彩大乐透官网| www.qp2.com-分分钟彩票-| www.ty15.com-玩吉林快三的微信群| www.47ik.com-地彩领导带班制度| www.1740.in-谁有鸿彩新地址| www.12325.com-七天彩掌上购彩| www.72527.com-精彩推荐-| www.094618.com-彩票辅助-| www.179235.com-河南快三结果| www.268213.com-随州论坛湖北快三| www.506319.com-东莞体彩网点| www.589279.com-七星彩票长条| www.673239.com-中了七乐彩怎么领奖| www.765124.com-快彩票下载-| www.903757.com-万豪彩票电玩城| www.967461.com-霸气彩票群名| www.ig89.com-快三大小单双买法| www.h52.club-天吉网彩票论坛首页| www.62xs.cc-彩票所有投注平台| www.3163.com-彩中彩最新版本| www.9292.love-福彩3d概率法| www.65686.com-彩票开奖模拟器| www.027590.com-易彩堂可信吗| www.106448.com-江苏快三神器| www.178659.com-中国体彩官方app| www.254785.com-好彩堂幺机王| www.332500.cc-今日彩票平台靠谱吗| www.409779.com-玩赚彩票下载安装| www.519312.com-河北快三怎么看大小| www.591565.com-七星彩质合-| www.666053.com-乐彩站合不合法| www.746454.com-福彩双色球专家推荐| www.822088.com-彩票中奖万能码| www.895971.com-福彩数据统计| www.965009.com-境外彩票网站制作| www.ar5.cc-快三预测号码今天| www.053037.com-福彩百位号-| www.640580.com-1216彩票app| www.868644.com-易彩集团可以赚钱吗| www.4516.biz-中国福彩3d奖号| www.03577.com-七星彩赚钱骗局| www.50723.com-时时彩最赚钱的打法| www.96095.com-美国彩票是国营的吗| www.062197.com-正规福彩pk10| www.181571.com-湖北快三中奖金额| www.256908.com-安徽快三号码分布图| www.331390.com-中彩票动图-| www.401595.com-七星彩一二位差走势| www.557891.com-老时彩开奖结果| www.629620.com-188彩票软件| www.699887.com-彩客站咨询师| www.777367.com-巨人彩票app下载| www.892286.com-3d福彩应用软件| www.954001.com-华人彩登录网站| 鸿运彩票www.hy5455.com| www.cq66.com-彩票5-| www.uo95.com-非凡彩票地方彩| www.07ad.com-彩铅梦幻小样图| www.75wp.com-分分彩漏洞在哪里| www.1351.tv-江苏快三开奖统计表| www.09100.com-k3808鸿彩快三| www.52787.cc-七彩虹显卡怎么样| www.96036.com-福彩变为国企会怎样| www.056324.com-快乐彩开奖公告查询| www.175729.com-福利彩票快乐彩规则| www.262694.com-长春市福彩兑奖地址| www.350712.com-手机彩膜数据怎么做| www.430448.com-足彩31o走势图表| www.523695.com-彩乐网赛马会| www.627760.com-三分时时彩计算方法| www.696378.com-霸主彩票咋样| www.771742.com-盛时时彩-| www.919060.com-如何开私人彩票网站| www.974641.com-七星彩怎么购买的| www.gx65.com-幸运快三彩票官网| www.xq80.com-酷彩吧靠谱吗| www.16ae.com-25日体育彩票开奖| www.213.cm-三毛彩票-| www.3388.cm-中国福利彩票最大| www.8610.wang-中彩乐群英会走势图| www.52157.com-爱乐彩彩票官网| www.93422.com-盘球网竞彩篮球推荐| www.050106.com-网络黑彩怎么代理| www.148131.com-app购彩安全吗| www.232343.com-中彩国际是骗局吗| www.301620.com-今天七星彩现场直播| www.367096.com-福彩一等奖-| www.454594.com-乐8彩快3下邀请码| www.539631.com-彩票中奖奖金怎么算| www.661393.com-彩票97期-| www.742697.com-中奖彩票制作器| www.809062.com-排列三开机号乐彩网| www.877715.com-时时彩私庄可以做吗| www.968543.com-瑞彩网论坛-| 天天乐彩票www.533265.com| www.gm91.com-河南彩礼限制| www.wn29.com-快三012路秘籍| www.08se.com-福利彩票摇奖机原理| www.73ai.com-重庆市彩新浪| www.0735.site-易彩靠谱吗-| www.9652.wang-三彩新品-| www.45459.com-彩薇花厂家-| www.86470.com-竞彩猫公仔-| www.032939.com-机选七星彩号码一注| www.102576.com-七星彩开奖一结果查| www.162470.com-江苏e球彩结果| www.283458.com-体福彩开奖结果查询| www.362763.com-双色球彩票纸变黑| www.441823.com-世界杯竞彩赔率| www.527044.com-时时彩机选方法| www.623982.com-春秋彩票登录| www.686760.com-中彩那天原文| www.756225.com-三分时时彩玩彩票| www.858662.com-彩票开奖双色球日期| www.916068.com-汇中彩票骗局| www.970356.com-优乐彩下载| www.cp6565.com-体彩开奖-| www.kv39.com-快乐彩一定牛走势图| www.a48.club-明版彩票资料全| www.19nt.com-网上购彩的可靠软件| www.595.pw-时时彩加盟官网| www.3753.cc-七星彩头尾怎么看的| www.8550.biz-幸运彩票是什么平台| www.47154.com-体彩竞彩开奖结果| www.85612.com-彩38源码下载| www.027683.com-彩票的流水是什么| www.093376.com-快频彩套利-| www.150191.com-体彩站点怎么申请| www.269362.com-金沙博彩骗局| www.345747.cc-在彩票站适合卖什么| www.408966.com-纪梵希彩妆中国官网| www.503114.com-彩娜-| www.562967.com-34期福利彩票| www.622091.com-青哇彩8时万| www.680762.com-为什么喜欢买彩票| www.748811.com-彩51正规吗-| www.806119.com-甘肃快三走势图昨天| www.870923.com-星彩3d论坛资料| www.tb9.com-快三甘肃-| www.np64.com-彩票模拟选号app| www.u25.club-九五彩票首页| www.38fd.com-快乐彩遗漏-| www.816.date-竞彩跟单平台| www.3848.top-中国福彩最新消息|