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.668873.com-众信彩票-| www.947425.com-彩吧论坛首页天气网| www.095185.com-竞猜彩足球-| www.537788.com-竞彩足球双平买法| www.350156.com-玩彩票老鼠-| www.615991.com-体彩快乐扑克3规则| www.631973.com-至尊彩快三-| www.826739.com-大资本彩票3877| 华夏彩票www.hx5566.com| www.194647.com-大发快三系统破解| www.373206.com-彩16官方登录| www.631537.com-七彩印象-| www.dr2.com-香港行政快三走势图| www.329861.com-彩票ab对打-| www.679118.com-人人竞彩官网| www.582277.com-冠彩app-| www.871335.com-彩票赔付最高的平台| www.me2.com-吉林省体彩中心地址| www.568257.com-八号彩票可以提现吗| www.597287.com-吉林省快三形态走势| www.rs00.com-浙江怎么没有七星彩| www.563641.com-高频彩微信骗局手段| www.588.online-彩票王成周-| www.966731.com-宝马彩票案刘亮现状| www.502.me-彩票分析群-| www.jc67.com-足彩比分竞猜| www.1732.space-快三做号软件| www.952708.com-彩乐网的网址| www.026915.com-代玩彩票刷佣金被骗| www.520724.com-今日三d彩报银海| www.38397.com-505彩票网站多少| www.f36.club-南海七星彩论坛特区| www.46yv.com-足彩店申请-| www.764.cc-时时彩任二怎么玩| www.894433.com-彩63官方-| www.330318.com-彩票智能追号软件| www.83755.cc-合买彩票的好处| www.598216.com-足球彩票停售时间| www.xt41.com-下載即時開彩| GO彩www.gocp3.com| www.353068.com-快彩王是真的假的| www.751208.com-彩90彩票注册| www.149144.com-主流彩票-| www.590068.com-宝马彩票下载| www.874.net-时时彩五星专业计划| www.156797.com-足彩比分新浪爱彩| www.318318.com-腾讯1分彩开奖记录| www.ff59.com-安徽快三下载app| www.7608.vip-体育彩票赔率| www.101546.com-平安彩票线路导航| www.890746.com-体彩4串4-| www.033196.com-福利彩票3d南方网| www.9910.xyz-彩经网双色球推荐号| www.im56.com-广东福彩下载安装| www.970.win-彩票那个平台靠谱| www.721573.com-01彩票破解版| www.43331.cc-福彩三d独胆家彩网| 彩多多www.78949j.com| www.272559.com-pc彩票是啥意思| www.384967.com-福彩3d开奖投注网| www.082528.com-118彩票软件平台| www.94778.com-比较正规的彩票平台| www.910.top-男生彩虹是什么意思| www.778290.com-大乐透彩票号码开奖| www.133237.com-七星彩最近十期号码| www.359660.com-七彩祥云简笔画| www.472266.com-中国第一张彩票| www.350331.com-彩霸王心水论之坛| www.990768.com-如何做手机彩票代理| www.gc22.cc-国彩平台-| www.206692.com-彩票996-| www.989844.com-505彩票平台| www.kb51.com-江苏彩票大奖| www.92434.com-卓高和立彩佳哪个好| www.300297.com-蓝球杀号定胆彩经网| www.020329.com-快三定胆方法| 七星乐www.535666e.com| www.19084.com-辽宁福彩双色球今日| www.090902.com-go彩安卓-| www.183231.com-皇都彩票安卓| www.252038.com-旺彩最新版-| www.325646.com-六和合彩网站王中王| www.57uk.com-好彩票花呗也可充值| www.114523.com-福彩双色球兑奖方法| www.290012.com-内蒙古体育彩票站| www.7311.cm-3d质合走势大彩网| www.92189.com-顺丰彩-| www.138245.com-福利彩票怎么选| www.660301.com-彩票历史数据分析| www.901426.com-排列三预测众彩网| www.70nk.com-乐博彩票可靠吗| www.38131.cc-网彩大数据-| www.907302.com-江西快三营业时间| www.307130.com-快湖北快三的走势图| 环球彩票www.265553.com| www.973417.com-彩虹宝宝新版| www.an34.com-贵州福彩投注站| www.wv87.com-520彩票邀请码| www.23nb.com-亚洲杯足彩-| www.1279.cm-福利彩票软件官方| www.8290.cm-彩票店销售假彩票| www.048910.com-福彩排列3开奖号| www.94yo.com-打击快三私彩| www.qg81.com-好彩蓝莓双爆好抽吗| www.99ss.com-彩票双色球历史查询| www.220872.com-安徽七星彩开奖结果| www.299856.com-高频彩票开奖| www.578887.com-北京体彩兑奖中心| www.933101.com-小鹿网络时时彩| www.979749.com-一品彩票是真是假| www.m47.net-福彩十选五走势图| www.55gn.com-电脑卖七星彩奖软件| www.03718.com-网赌彩票的背后| www.245448.com-易彩下载-| www.uy36.com-吉林省福彩官网| www.34909.com-双色球网易彩票| www.371.online-时时彩官方通知| www.8048.cn-水彩樱花-| www.48093.com-山东省彩票兑奖中心| www.027063.com-韩国快三计划| www.279019.com-大快发彩票官网| www.613414.com-双色球彩票结束日期| www.9991.in-福彩3d小鱼图迷| www.943639.com-重庆时时彩开奖生肖| GO彩www.fo64.com| www.gr10.com-3d彩票走势图表| www.984017.com-下载购彩彩票手机版| www.4506.vip-足彩奖金分配| www.484081.com-伦敦两分彩-| www.615491.com-失控的黑彩刘雪龙| www.751325.com-今日中彩有托吗| www.858128.com-梦见买彩票输钱了| www.954256.com-七星彩三等奖多少钱| www.aj3.cc-福彩快三复式表| www.a21.cn-体彩图片-| www.4052.cm-三弟牛彩-| www.23453.com-5分彩走人工计划| www.ly21.com-快三开奖规律| www.532591.com-彩虹羽泉简谱| www.79633.com-福彩3d几点钟开奖| www.387333.com-彩带拉花-| www.90906.com-福彩平台刷水| www.021764.com-体彩销售额-| www.984853.com-博赢彩票骗局| www.32yv.com-双色球预测众彩网筱| www.335634.com-湖北快三组合分布| www.742548.com-掌聊彩票怎么样| www.09486.com-105彩票最新版本| www.029854.com-手机彩库宝典app| www.257985.com-105彩票官方正版| www.483592.com-亿彩投注网址| www.639503.com-500彩票终端机| 大赢家彩票平台www.708382.com| www.310390.com-我要体彩大乐透| www.432797.com-测算彩票中奖| www.626528.com-全中彩票安卓版下载| www.jh4.com-福彩3d图谜-| www.952304.com-时彩最大输赢| 500万彩票www.808712.com| www.020455.com-彩38网什么-| www.fh03.cc-快三怎么赚钱| www.567731.com-全民彩票购彩合法吗| www.689102.com-山东福彩app下载| www.791605.com-深圳彩票网-|