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.389630.com-御彩轩安卓-| www.cai6600.com吉林省的彩票快三| www.640173.com-彩票外挂软件app| www.92227.com-好彩一技巧-| www.65408.com-天天中彩吧图谜大全| www.046648.com-安卓天天中彩票下载| www.602108.com-彩票中大奖挥霍| www.9660.tv-彩礼十一万八吉利吗| www.026392.com-私彩其实就是官彩| www.204949.com-福彩快3河南走势图| www.362106.com-台湾乐透彩图库| www.555512.com-神采奕奕和神彩奕奕| www.745887.com-红彩app直播下载| www.rx85.com-下载腾讯分分彩| www.274159.com-汪汪时时彩老版本| www.397554.com-幸运飞艇彩票官网| www.565685.com-怪字二版彩吧| www.643997.com-比特币一分彩走势图| www.533148.com-澳门生肖彩开奖记录| www.781549.com-拉菲彩票平台代理| www.638.net-辽宁11选5爱乐彩| www.055863.com-彩票有11位数字| www.251420.com-彩票12苹果版| www.670177.com-买彩票几位数中奖| www.811110.com-下载福彩选号技巧| www.921728.com-0664彩票网-| www.987396.com-百胜快三软件| www.aw63.com-牛彩字谜总汇| www.07wk.com-大海落日的彩铅画| www.9002.cc-乐彩直播视频| www.31731.cc-激励彩民的话| www.024635.com-福利彩票积分卡| www.180114.com-易彩快3计算| www.339239.com-深圳福彩电话投注| www.495609.com-3d彩票投注-| www.578273.com-幸运彩票可信不| www.665630.com-七乐彩随机选号工具| www.211443.com-天天彩选四历史开奖| www.436686.com-福利彩票7-| www.607313.com-江西福彩网七乐彩| www.813882.com-体彩排列三复式票| www.949297.com-查福彩三地藏机图| www.dl21.com-大发快三能赚钱吗| www.654583.com-排列五属于什么彩票| www.380056.com-足球彩票提成是多少| www.617233.com-易购娱乐时时彩代理| www.751417.com-中彩那天易读错的字| www.863827.com-下载彩票开奖工具| www.507162.com-彩票非凡网-| www.581314.cc-彩票开奖网大全| www.297595.com-快三跨度和值| www.691761.com-三分彩人工免费计划| www.378351.com-k彩真的能挣钱吗| www.738088.com-福彩双色球摇奖机| www.229210.com-36选7好彩1奖金| www.6365.in-竞彩比赛减少| www.026888.com-彩票跑路-| www.271913.com-彩经网双色球走势图| www.gn50.com-江苏快三网购真假| www.330217.com-七天网的彩票靠谱吗| www.48xv.com-彩票站点怎么开| www.560591.com-超级彩票是真的吗| www.620564.com-靠谱时时彩代理群| www.688951.com-俄罗斯彩票平台官网| www.19kk.com-肥城开个彩票店如何| www.013245.com-开心七星论坛彩网| 500彩票www.50024l.com| www.133084.com-彩钢围挡安装视频| www.60ld.com-福彩3d有哪些平台| www.0804.com-足彩网购恢复| www.o03.space-彩票倍投止损方法| www.044030.com-中国福利彩票图案| www.195509.com-重庆时时彩手机下注| www.259340.cc-青海快三彩票| www.322078.com-长春彩票销售| www.381536.com-周五的彩票-| www.490769.com-天猫国际彩票| www.564926.cc-bb彩票-| www.626662.com-彩票中五百万难吗| www.688494.com-彩票39下载-| www.981985.com-浙江时时彩开奖号| www.ey50.com-手机彩票12306| www.23336.com-中华神彩下载| www.89902.com-pc彩票制作-| www.828383.com-易学测彩-| www.6041.org-彩票对冲打水| www.968045.com-福彩官员1360亿| www.605668.com-58彩票幸运28| www.98778.com-今天3d彩民乐钱图| www.557924.com-免费注册凤翔彩票| www.465926.com-那个彩票稳一些| www.786658.com-快三的技巧-| www.926841.com-彩票10选6-| www.107191.com-博彩娱乐导航网址| www.501335.com-中国彩l吧-| www.711671.com-彩票中100万元| www.ft13.com-宝马彩票平台下载| www.972123.com-柬埔寨一分彩走势图| www.mt33.com-掌中彩软件-| www.53rg.com-凯里体彩中心| www.005597.com-竞彩提前多久封盘| www.117947.com-时时彩每天稳赚| www.693706.com-体彩刮刮乐-| www.47069.com-彩票私彩平台哪个好| www.079278.com-全民星彩可靠吗| www.289668.com-彩票中奖兑奖期限| www.024308.com-重庆彩大底计划| www.87bi.com-彩75app怎么样| www.458881.com-中国竞彩篮球cba| www.623363.com-幸运3彩票是假的吗| www.745962.com-湖北福彩app官方| www.981405.com-中国竞彩官方网站| www.pi26.com-彩票走势图怎么制作| www.94fw.com-足球彩票联赛怎么买| www.27717.com-高级彩铅画图片大全| www.133506.com-七彩石原石-| www.785645.com-49选7彩票统计器| www.764898.com-彩票外围平台是什么| www.888028.com-彩彩乐网-| www.262062.com-福彩票开奖结果查询| www.456909.com-彩88彩票官网| www.565760.com-7070彩票可靠吗| www.ki13.com-体彩网大乐透计算器| www.42.biz-彩泥手工制作大全| www.0198.biz-九江福彩网-| www.21367.cc-腾讯分分彩人为改号| www.020978.com-王者彩票北京快3| www.551555.cc-贵州快彩app| www.996826.com-云南快乐十分爱乐彩| www.vz72.com-体彩在线app| www.1394.in-福利彩票真能中奖吗| www.71500.com-香港幸运彩-| www.048523.com-赢钱彩合法吗| www.141267.com-糖果彩球图片| www.251527.com-中彩软件下载| www.362969.com-彩虹像什么比喻句| www.773719.com-聚财彩票app下载| www.9326.online体彩开奖频道| www.799969.com-福彩开奖双色球奖金| www.540449.com-彩乐园ll应用下载| www.761570.com-体育彩票玩法奖金| www.935268.com-快三追号输惨了| www.1992.live-怎样下载金彩网| www.36780.com-体彩电视台开奖时间| www.973874.com-买彩票倍投什么意思| www.0zu.com-彩票走势图大全首页| www.8855.in-黑彩的骗术-| www.631809.com-七彩云南翡翠实体店| www.6490.in-乐彩北京快乐8| www.84588.cc-哪有彩色水泥卖| www.356320.com-体彩的门头要求| www.169116.com-江苏快三开奖结果i| www.613883.com-云上凤凰天冠彩票| www.211359.com-乐彩5分快3的陷阱| www.333002.com-福利彩票曝光| www.472156.com-生产彩板-| www.1779.vip-福彩3d预测群| www.590466.com-七星彩8对数是什么| www.2no.cc-买彩票一直反着买| www.eo09.com-福彩开奖号查询| www.892.hk-唯美彩铅画图片人物| www.01563.cc-大发大掌柜彩票平台| www.63308.com-竞彩篮球专家推荐网| www.367583.com-上期彩票开奖查询|