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.158435.com-北京单场体彩店| www.537.pw-彩票网名字大全搞笑| www.6134.me-福利彩票彩金| www.38255.cc-燕赵福彩网排列五| www.87228.com-快三35期-| www.906009.com-搭建时时彩网| www.576079.com-百度乐彩走势图表| www.783776.com-金源彩票投注平台| www.95793.cc-慈善福彩-| www.116688.com-福彩3d中奖票面| www.205565.com-私彩网站-| www.309269.com-排列三选号彩报| www.381481.com-廖彩杏书单-| www.489458.com-福利彩票蓝号有哪些| www.028208.com-彩票软件怎么做| www.16tq.com-福彩3d连线报| www.330424.com-快三数据分析统计服| www.04916.com-快开彩票新政| www.683499.com-中彩平台下载| www.796091.com-福彩神器-| www.874583.com-南国体育彩票规律图| www.972832.com-日彩网是真的吗| www.er23.com-体彩独胆涛哥| www.01iw.com-雨后的彩虹好像什么| www.223807.com-幸运快三网评论| www.321526.com-福利彩票开奖大厅| www.404490.com-彩铅画水滴详细教程| www.74996.cc-福利彩票都包括什么| www.972271.com-彩票资讯api| www.il3.cc-大赢家彩票平台骗局| www.qh88.cc-好彩2开奖结果查询| www.07fm.com-六开彩票结果| www.39946.com-足球彩票任九| www.069335.com-北京福彩网快三| www.156019.com-体育彩票刮刮乐试刮| www.74988.cc-河内时时彩官网地址| www.397279.com-大乐透中奖彩票票面| www.751217.com-彩票巴士在线| www.871291.com-开奖快的彩票软件| www.961318.com-网上大众彩票| www.cai225.com-彩神8快3-| www.1zj.com-鸿运1688彩票网| www.015080.com-巨丰彩票心水资料| www.cai992.com-快三口诀表-| www.xv19.com-千万彩票软件| www.77467.com-彩票号码查询大师| www.749.bid-时时彩三星怎么做号| www.304373.com-江苏快三技巧在哪里| www.5303.me-18080期七星彩| www.17746.com-中国足球彩票开奖| www.60422.com-沈兴辉彩票什么梗| www.528250.com-有没有预测彩票网站| www.778175.com-高频彩是什么东西| www.01qk.com-杏彩168下载安装| www.425292.com-本周六足彩对阵| www.543996.com-足球胜负平竞彩| www.613815.com-网上怎么兑换彩票| www.568071.com-体彩加盟费与利润| www.669277.com-彩票有哪几种软件| www.745468.com-一分快三外挂下载| www.838384.com-重庆时时彩傻瓜打法| www.925611.com-吉首文艺路快三秒| www.999310.com-概率学与彩票快三| www.ij89.com-500彩票计划网| www.606589.com-互联网停售彩票| www.703232.com-彩票虚拟号-| www.791678.com-下载福彩3d预测| www.877789.com-体彩开奖走势图| www.94hp.com-中国彩l吧-| www.266200.com-三分快三骗人| www.253295.com-czj彩之家官网| www.92292.cc-七乐彩缩水七保六| www.091927.com-百万彩票合法吗| www.171959.com-5d彩票规则-| www.255198.com-网络福彩快三合法吗| www.321740.com-体彩开奖直播小炮| www.383725.com-怎样制作彩票走势图| www.801027.com-海南东方快三| www.965572.com-体彩排列七开奖结果| www.bx2.com-v2彩票app-| www.tn88.com-快三全天实时计划网| www.20uz.com-自制选号彩票app| www.659761.com-重庆时时彩又卡奖了| www.758953.com-腾讯微彩-| www.793108.com-彩票福彩快三新快3| www.896563.com-博彩套利稳赚| www.961074.com-最新版彩神下载| 6号彩票www.5484e.com| www.210679.com-破解快三软件| www.324965.com-海南私彩论坛| www.412811.com-足彩特约分析师| www.522271.com-彩富网手机最快报码| www.582720.com-58福彩聊天室| www.633.la-香港大公报一码彩经| www.445419.com-上海天天彩开出号| www.553659.com-成都竞彩高手| www.779623.com-彩票中奖开奖结果| www.3350.cm-彩神国际平台官网| www.71em.com-广东福彩3d开奖| www.67726.cc-国民彩票是赌博吗| www.65037.com-710竞彩平台骗局| www.024034.com-六台彩迷宫猪年有景| www.118452.com-传统彩的骗局揭秘| www.370032.com-排列三彩票下载安装| www.2029.org-福彩3d中彩网顶测| www.067510.com-自己怎么搭彩票网站| www.336035.com-谁能入侵黑彩服务器| www.481476.com-彩95真实吗-| www.563102.com-八八彩票骗局| www.743988.com-87彩票网站-| www.281995.com-秒速时时彩正规吗| www.361375.com-博大彩票怎么样| www.224.date-排三彩宝网工具下载| www.319000.com-外围彩票合法网站| www.879975.com-呼市福彩中心地址| www.710111.cc-女孩喜欢买彩| www.793088.com-盐城市福彩中心地址| www.221797.com-彩票挂机靠谱吗| www.300072.cc-网易彩票网彩神通| www.388757.com-买彩票图-| www.494745.com-亿发博彩app| www.076269.com-江苏体彩彩民论坛| www.185678.com-福彩造假案-| www.246871.com-快三怎么充值平台| www.301708.com-彩票字谜-| www.375204.com-体彩杀号定胆是| www.123191.com-买彩票追号容易中吗| www.85uk.com-代打福利彩票游戏| www.038622.com-彩票黑台子软件| www.986345.com-竞彩足球分析网站| www.290009.com-福利彩票双中奖规则| www.37xv.com-旺地老彩票站出兑| www.570158.com-五洲彩票线路检测| www.8305.org-福彩晚上几点停售| www.202513.com-贵州体彩下载安装| www.689483.com-保定市彩票站分布图| www.444362.com-台湾福彩星-| www.9840.cc-古建彩绘沥粉工具| www.508991.com-试玩彩票平台| www.750014.com-彩票代理app下载| www.280918.com-福彩3d出号规律表| www.369099.com-老杜说彩票今日推荐| www.479776.com-乐优彩票最新版下载| www.893716.com-彩99安卓-| www.177267.com-体彩排列三-| www.504784.com-彩排现场描写| www.553728.com-竞彩足比分-| www.627678.com-分分彩五码-| www.956602.com-苏宁彩票手机软件| www.26qt.com-福彩3d大神群| www.0136.org-中彩网3d字谜专区| www.050059.com-举报黑彩庄家| www.125003.com-梦境与彩票数字对应| www.1964.vip-怪字二版彩吧| www.3819.bid-怎样买竞彩足球稳赚| www.904923.com-彩票站几点开门| www.620508.com-世界最容易彩票| www.543222.com-彩票趋势图表| www.603523.com-三晋福彩网www| www.661571.com-足彩半全场漏洞| www.474433.com-三d牛彩网字谜九| www.548978.com-网上代购足彩| www.233224.com-海南有快三吗| www.300278.com-天天中彩票与腾讯|