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天

知道了
亚洲28 www.479409.com-竞彩加奖20%| www.748078.com-奔腾彩票app下载| www.705009.com-福利彩双色球安装| www.ui33.com-福彩3d字谜解答| www.762198.com-奇门测港彩特尾数| www.293920.com-福彩八码最大遗漏| www.679091.com-彩虹六号刘醒的毒| www.7748.wang-腾讯分分彩独胆| www.ht4.com-屠龙快三团队| www.930858.com-破解彩票平台软件| www.366762.com-海口体彩中心| www.542765.com-彩拾彩票正不正规| www.309628.com-体彩七位数怎么选号| www.dh1.cc-时时彩怎么玩法介绍| www.537159.com-带七彩的网名| www.759716.com-亿米彩是正规公司吗| www.35166.com-分分快三输了| www.048647.com-福彩3d小军第三版| www.603825.com-娱乐竞猜彩票| www.61152.cc-038彩时时彩| www.854879.com-极速类彩票平台| www.43tf.com-七彩建设股票| www.309535.com-澳门有福彩快三么| www.613723.com-快购彩三-| www.998737.com-大小单双彩票网| www.ol41.com-福彩种类及规则| www.23tt.com-3d家彩论坛杀号| www.0513.in-3d福彩开奖| www.ks77.com-七乐彩中奖概率| www.872353.com-安顺体彩中心| www.bv53.com-中国福利彩票查询| www.6360.vip-财神8彩票网正规吗| www.05140.com-11选5购彩网| www.340769.com-牛彩网一网站| www.431946.com-下载同城彩票店| 星际www.m.55xj.vip| www.12ay.com-七彩虹颜色排序| www.896787.com-五分彩官方走势图| 博亿彩票www.662by.com| www.vi04.com-快三彩票怎么玩的| www.15ep.com-易彩乐是正规软件吗| www.565789.com-58彩票预测-| www.692312.com-什么彩票公正公平| www.791866.com-幸运博彩app下载| www.81128.com-双色球搜狐彩票网| www.eu16.com-彩神网下载-| www.j41.com-深圳体彩中心| www.58aa.cc-福彩中心在哪里镇江| www.355864.com-河北省快三开奖走势| www.18wy.com-7乐彩今天开奖直播| www.203152.com-安微快三开奖| www.701670.com-网上有没有彩票官方| www.211765.com-快开彩qq群骗局| www.711149.com-烟台福彩管理中心| www.940206.com-黑彩怎么赢钱| www.bj73.com-分分彩平台-| www.x50.org-加入彩票信息交流群| www.747176.com-可以转让的彩票软件| www.le93.com-全球彩票安卓版下载| www.0316.tv-接手体彩-| www.8149.biz-重庆20分彩-| www.29228.cc-能在手机里买彩票吗| www.267708.com-中国竞彩官网网址| www.619370.com-足球彩票360| www.693029.com-山东彩票模拟投注器| www.222565.com-云顶娱乐彩票注册| www.028362.com-百度彩票开奖查询| www.106063.com-快三预警软件| www.94zy.com-足彩无风险套利| www.718902.com-彩虹羽泉百度云| www.7332.pw-小米彩虹7号电池| www.56785.cc-利博彩票软件| www.956711.com-七星彩那天来| www.223826.com-e球彩进球数规律| www.337249.com-香港电脑彩正版资料| www.678680.com-最新送白菜彩金网站| www.3093.net-重庆时时彩2点结束| www.8880.online竞彩书籍排行榜| www.51655.cc-最新版全民福彩| www.029232.com-七彩网骗局-| www.137878.com-南充体彩兑奖处| www.218289.com-神彩争霸11-| www.289928.com-彩库宝典app下载| www.365460.cc-简单校园风景彩铅画| www.479077.com-竞彩往期冷门| www.108510.com-传影和彩影-| www.8729.wang-竞彩足球胜负预测| www.595200.com-双彩论坛的双彩图| www.689978.com-5○0万彩票-| www.796651.com-众博彩票软件| www.890811.com-青岛福彩快三查询| www.981728.com-双色球彩票作假事件| www.hd98.com-天天彩票app网址| www.702122.com-竞彩app源码| www.777569.com-欢乐彩开奖-| www.900037.cc-51彩票是正规的| 126彩票网www.704126.com| www.114240.com-彩神vii注册| www.10ox.com-什么是新彩-| www.3018.org-易购彩票是真是假| www.77928.cc-彩笔生花-| www.ws51.com-彩票易网手机版下载| www.3696.in-竞彩258足球推荐| www.309298.com-七乐彩走势图综合| www.154633.com-足球彩票有几种玩法| www.254075.com-安徽快三开奖模拟器| www.336772.com-福彩3d字迷图| www.440974.com-彩钢瓦压板机多少钱| www.541342.com-彩票网怎么下载| www.619172.com-淄博福彩管理中心| www.693301.com-96彩票下载-| www.774345.com-返利高的彩票| www.877407.com-猜动物彩票-| www.942417.com-可以买竞彩的app| www.988090.com-彩民乐图库-| www.vt3.com-海南私彩玩法| www.582762.com-揭秘彩神岛赢钱战术| www.672985.com-七星彩中奖7注| www.755466.com-双色球旺彩网| www.115266.com-彩色混凝土地面价格| www.199884.com-123彩票手机版| www.54zs.com-彩经网前三走势| www.365548.com-荷塘月色彩铅简笔画| www.937234.com-福中彩票app| www.905192.com-百福彩票app下载| 吉利彩票www.66376p.com| www.235763.com-足彩分析预测| www.494078.com-属鼠买彩票幸运数字| www.6684.cc-华彩赢家是做什么的| www.13968.cc-一分快三破解术| www.52480.cc-好彩网是谁打造的| www.90432.com-彩吧图库今天的| www.035778.com-有完没完没看懂彩票| www.106053.com-博牛彩票怎么提现| www.163671.com-时时彩如何容错最稳| www.085601.com-大发彩票导航| www.03qe.com-天空彩票开奖日期| www.818996.com-e球彩3场全包| www.568117.com-大发彩票提现3天| www.312448.com-e球彩中奖金额| www.923001.com-惠民彩票计划| www.07vb.com-好看的彩铅配色| www.gy04.com-广州鸣彩艺术诈骗| www.99481.com-河南商丘柘城彩礼| www.111693.com-赠彩金的app| www.188103.com-北哀快三-| www.264338.com-财新彩app-| www.345094.com-彩票网站被黑| www.20aq.com-中国体育彩票16期| www.137419.com-五分彩是不是骗局| www.234602.com-新彩吧3b字谜| www.500538.com-高频彩游戏棋牌平台| www.098776.com-高频彩直播网| www.987701.com-福彩29选七-| www.942.bid-七星彩怎样中奖| www.219968.com-大发快三大小单双| www.082337.com-官方手机购彩客户端| www.333310.cc-安徽快三在线| www.1fx.cc-老彩票平台代理| www.54gx.com-乡下开彩票店吗| www.8190.vip-幻彩彩票下载手机版| www.83838.com-彩票哪里买哪里兑奖| www.65125.com-竞彩篮球投注哪里好| www.3350.cm-彩神国际平台官网|