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.545865.com-福彩有没有分分彩| www.97qw.com-体彩飞鱼开奖结果| www.280145.com-福彩12选5玩法| www.ww33.cc-免费送38彩金| www.85ph.com-中彩国际登录| www.32251.com-进口彩妆加盟| www.055863.com-彩票有11位数字| www.198639.com-福利彩票快三单式| www.359013.com-彩票都是骗穷人的| www.967674.com-彩友计划网页版| www.84892.com-今日的福彩3d图纸| www.129960.com-福彩一周开几次奖| www.310969.com-甘肃福彩中心电话| www.718278.com-彩虹表示什么| www.868633.com-快彩乐手机-| www.104071.com-马来西亚江山彩票| www.211705.com-最正规的彩票平台| www.304732.com-买彩票选号难吗| www.49251.com-傲赢彩票百度百科| www.ca08.com-贵州体彩开奖情况| www.m34.xyz-快三注册代码| www.70fn.com-买七乐彩官网| www.1803.org-福彩骰子开奖| www.8318.cc-彩票中大奖江西| www.397407.com-捷豹彩票平台| www.503673.com-竞彩足球总交易| www.666454.com-重庆彩个位盈利计划| www.812189.com-福彩的要领-| www.971491.com-彩88app-| www.i36.cn-福彩都是坑人的| www.958.la-七星彩复试计算器| www.07769.com-中彩那天生字词| www.66757.cc-附近的彩票站| www.012468.com-体彩停售时间| www.099657.com-7乐彩走势图带连线| www.586526.com-竞彩去哪里买得到| www.707958.com-彩票38元免费彩金| www.827038.com-最新彩票骗局| www.937820.com-彩票投注网站怎么样| www.cai3658.com安微快三基本走势图| www.777361.com-易盈彩票简介| www.965121.com-5oo彩轻聊版| www.hh96.com-十分彩骗局-| www.10iz.com-彩色混凝土压模地坪| www.11183.com-足彩四场进球开奖| www.91817.cc-好彩1出号的规律| www.121620.com-马云的网上彩票| www.127697.com-798彩票下载安装| www.285886.com-江苏体彩玩法介绍| www.9029.cn-下载体育彩票网站| www.71592.com-不懂彩票怎么买| www.256955.com-快三外挂手机版| www.570.com-时时彩万位规则| www.25995.cc-佛教解释彩虹| www.76ld.com-修改福利彩票兑奖| www.6776.org-下载aqq购彩| www.43353.com-彩友会官网-| www.038898.com-中国福利彩票公开奖| www.907268.com-四个数字的彩票推荐| www.6663.in-来彩彩票app| www.55639.cc-七星彩中奖列表| www.325022.com-彩票怎么买号| www.492258.com-麒麟团队彩票怎么样| www.675692.com-彩乐会娱乐-| www.558343.com-天天爱彩票交流群| www.687500.com-靠谱的彩票销售系统| www.770382.com-彩乐汇彩票官方网站| www.36246.com-彩帝网页-| www.028208.com-彩票软件怎么做| www.701686.com-老郑足彩官网| www.cai466.com-快三中奖助手官方| www.567910.com-福彩3d最准杀码| www.598175.com-七星彩19028期| www.728984.com-福彩3d天天吉论坛| www.861259.com-福彩三d字谜图谜| www.072176.com-彩票实体店-| www.355143.com-彩票怎么看中奖金额| www.516983.com-色彩视频-| www.639317.com-体彩小终端深圳| www.769098.com-好彩网0567-| www.939231.com-现在手机无法买彩票| www.135571.com-体彩店面装修图| www.875456.com-体肓彩票大乐透规则| 13e彩票www.810852.com| www.em14.com-福彩3d彩吧图| www.2939.me-体彩福彩门头招牌| www.25872.com-彩虹的句子短唯美| www.897055.com-彩票挂机骗局大全| www.254093.com-中彩网快三图怎么看| www.66950.com-体彩中心周末上班吗| www.113766.com-凤凰彩票正规吗| www.285339.com-彩票中的数学问题| www.351627.com-鸿彩是福利彩票吗| www.434254.com-香港开彩通-| www.525598.com-时时彩五星计划网址| www.600784.com-吉林快三开奖号| www.694911.com-体彩六加一专家预测| www.827695.com-网上去哪里买彩票| www.935612.com-时时彩跨度怎么算| 幸运彩票网www.33598h.com| www.5820.biz-体彩排列三的玩法| www.11230.com-购买足彩的正规网站| www.50053.com-易中快三安卓版| www.835306.com-墨西哥好彩香烟| www.897658.com-多彩贵州集团简介| www.958276.com-66彩票的网址| 澳客彩票www.107ak.com| www.ks17.com-福利3d开门彩票| www.ee44.cc-彩票刷量赚返水| www.2pm.com-期期中彩票资讯网| www.15666.com-少儿彩铅画图片灵狼| www.031746.com-信彩的骗局-| www.141598.com-天天好彩二四六| www.271321.com-好彩香烟怎么订购| www.907012.com-福彩开奖几位数有奖| www.996094.com-体彩店可以买北单吗| www.dm76.com-澳门六星彩资料| www.0yf.com-常笑体彩-| www.35ig.com-彩票分析软件源码| www.1247.cn-吉林快三害人吗| www.422861.com-天际彩票注册| www.557770.com-66彩票-| www.618770.com-铂金彩彩票-| www.695623.com-大奖彩票过万必黑| www.769340.com-10398好彩网| www.879855.com-大发彩票是不是黑网| www.959632.com-顶尖彩票平台是正规| 500彩票www.50788n.com| www.gu77.com-开福利彩票店| www.552302.com-彩票出票协议| www.697004.com-彩票大小规律性| www.761285.com-体育彩票排三开机号| www.871134.com-体彩超级大乐透| www.924598.com-送彩金彩票大全| www.978734.com-微信买彩票安全吗| www.990872.com-4s彩票中奖-| www.203530.com-彩票开奖分析| www.860693.com-福建体彩开奖| www.661593.com-足彩8串一奖金最高| www.801788.com-彩运网cy123| www.928158.com-彩票赌注那个违法吗| 500彩票网www.65707x.com| www.114350.com-贵州福利彩票3d| www.yl49.cc-彩经彩票-| www.54rp.com-第九彩票是什么意思| www.512915.com-淘彩票qq-| www.5355.top-为什么网上不卖彩票| www.75538.com-彩98下载-| www.526269.com-vr时时彩计划| 600万彩票www.187396.com| www.73im.com-天下好彩手机版| www.188564.com-爱彩乐彩票网| www.355672.com-竞彩中奖缴税| www.526881.com-今晚cba赛程竞彩| www.657224.com-龙鱼七彩-| www.761834.com-彩票之家天下彩| www.98337.com-腾讯分分彩天天计划| www.525565.com-博乐彩票平台正规吗| www.636170.com-彩虹6号第四年机票| www.08068.com-中奖彩票丢了| www.29157.cc-体彩排七走势图| www.113138.com-七乐彩兑奖计算器| www.252468.com-彩票揭秘-| www.379338.com-山东体彩排列三论坛|