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.690903.com-手机彩票网投平台| www.879034.com-易彩官方彩票网| www.980062.com-打彩票的工作复杂吗| www.76va.com-福彩石家庄市行唐县| www.2321.biz-w彩票线路检测| www.133376.com-围挡彩钢瓦尺寸| www.096300.com-彩宝贝杀号定胆红球| www.225879.com-澳门意大利彩金骗局| www.0719.date-安徽快三百度贴吧| www.44od.com-竞彩外围反奖率| www.668825.com-欢乐彩票怎么样| www.779911.com-彩票店在什么位置| www.869010.com-七星彩在线购买| 500彩票www.50024q.com| www.272635.com-福利彩票有啥| www.775914.com-彩票福彩20选5| www.dm82.com-7星彩玩法开奖说明| www.126307.com-融彩网下载安装| www.556235.com-微信重庆时时彩群| www.0452.net-彩网cai5登录| www.642600.com-彩汪汪大乐透39期| www.735867.com-彩票分析师证哪里考| www.820616.com-佩奇彩票app| www.198809.com-10选5彩票骗局| www.0418.tv-彩贝壳电话打不通| www.779176.com-王者手游彩票| www.867689.com-彩软科技计划项目| www.938848.com-亿彩网是正规平台吗| 8号彩票www.60108e.com| www.7331.net-红彩会网页版登陆| www.77yj.com-足彩是赌博-| www.e15.mobi-好123彩走势图| www.85eo.com-足彩复式转9软件| www.175832.com-彩神8快3破解| www.284823.com-大发快三和值| www.377710.com-陪嫁要比彩礼多吗| www.487970.com-七乐彩近三十期走势| www.589055.com-七星彩票图库参考| www.665630.com-七乐彩随机选号工具| www.743470.com-复式彩票中奖双色球| www.875542.com-幸运彩是不是骗局| www.949833.com-网络彩票犯法判刑| 13e彩票www.257760.com| www.98788.com-梦见很多彩票| www.538262.com-竞彩混合计算器| www.678387.com-3d专家预测众彩网| www.756532.com-买彩票群是真的假的| www.bv70.com-用ip代玩彩票套路| www.579851.com-明月珰七星彩| www.678676.com-彩天下代理申请| www.771684.com-体育彩票申请流程| www.850656.com-玩快三下大就死| www.908428.com-9m彩票-| www.971943.com-湖北有哪些彩票网| www.eg99.com-鬼6神算彩吧图库| www.tz88.cc-竞彩5700万大奖| www.1127.win-竞彩领奖-| www.267300.com-足彩最新分析| www.85391.cc-竞彩容错解释| www.830893.com-浦东彩票销售点| www.979110.com-广东体彩快中彩| www.ie51.com-怎么戒彩票-| www.00050.cc-彩色的包装袋机器| www.70320.com-f8彩票-| www.422253.com-彩票总站正版资料| www.532694.com-七星彩买中4个号码| www.30398.com-福彩网首页我的帐户| www.090097.com-世界平台彩票| www.010967.com-其他网易彩票| www.115283.com-体彩新票运-| www.cai615.com-大发快三技巧| www.4ge.cc-央视贺炜天天中彩票| www.5475.vip-彩虹世界下载网址| www.39585.cc-九歌彩票吞奖| www.280686.com-体育彩票大乐透| www.171192.com-快三开奖查询江苏| www.274987.com-辽宁11选5爱彩乐| www.eu47.com-彩票争霸谁与争锋| www.89.vip-买彩票就是看运气| www.79pv.com-福利彩票开奖42| www.1439.net-彩神4邀请码| www.5614.org-腾讯抄袭彩虹六号| www.735715.com-新浪彩票_新浪网| www.799958.com-快乐彩计划| www.689036.com-81彩票网址-| www.337080.com-连中彩票手机版下载| www.428005.com-高频彩缩水app| www.237053.com-足球计算器竞彩网| www.362645.com-喷雾自制彩虹实验| www.492818.com-用户登录百家彩娱乐| www.588342.com-体彩七星彩怎么开奖| www.89bm.com-今日福利彩票30期| www.9080.net-网易体育彩票频道| www.lh67.com-中彩彩票aqq| www.34zd.com-海南特区七星彩版| www.0493.cn-钻石彩票下载| www.8177.loan-贵州今天快三贵州| www.329943.com-多彩贵州网投票| www.414029.com-披灯挂彩-| www.015178.com-七星彩杀号绝巧| 福彩www.26878b.com| www.9256.org-乐事彩票-| www.323288.cc-百度乐彩首页| www.456934.com-恒彩app是干嘛的| www.563107.com-万彩彩票下载| www.202239.com-贵州有那些彩票站| www.576294.com-遵义体彩中心| www.516303.com-彩客彩票苹果版下载| www.tz40.com-彩票里的长龙怎么玩| 博友彩www.977657.com| www.631982.com-优优彩票网提现| www.742677.com-好运来彩票安全不| www.802851.com-福彩字迷图迷| www.868768.com-七星彩专家杀号技巧| www.314445.com-彩票攻略网-| www.593161.com-镜面的七彩阳光| www.739327.com-凤凰彩票平台代理| www.006872.com-湖北福彩快三在线| www.187352.com-快三官方开奖网| www.713973.com-即时彩票app下载| www.810132.com-鸿运彩票网注册| www.888454.com-新加坡南洋五咊彩| www.pk07.com-彩色混凝土-| www.311756.com-3d彩报图今天图库| www.214.cm-鼎盛彩票登陆网址| www.6482.vip-苏宁小店彩票| www.18315.com-手机版的京彩彩票| www.57965.com-234彩票安卓| www.320435.com-十一选五百宝彩浙江| www.421500.com-体彩中奖短信图片| www.538108.com-国彩软件-| www.4899.com-彩票代打平台app| www.29001.cc-大发彩票登录| www.839672.com-彩色耐磨地坪报价| www.903891.com-福彩双色球拖胆| www.51bx.com-369足彩缩水软件| www.441377.com-百宝彩视电话| www.58285.com-网易手机彩票版| www.ro15.com-彩之源app快三| www.ph82.com-海南快三官网| www.8lj.com-黑彩杀号-| www.75lt.com-古建彩绘吧-| www.1367.win-幸运快三回血| www.rh94.com-时时彩必中规律| www.354191.com-彩票投注手兼职| www.452380.com-太原开彩票站怎么样| www.491345.com-澳博彩票01302| www.553783.com-彩票店开业介绍| www.611082.com-彩票贷怎么贷款| www.670192.com-指数360彩票| www.732867.com-浙江风采江苏体彩| www.788040.com-足彩胜天半子| www.846667.com-福彩3d模拟购买| www.890684.com-青岛快三开奖| www.941145.com-彩票代理微信号| www.977402.com-兰考结婚彩礼| 凤凰Vwww.www.fh7557.com| www.lk94.com-249彩票app-| www.b94.com-体彩天下-| www.0472.com-大乐透彩票结果今天| www.8368.biz-七星彩私彩-| www.848026.com-体彩快三和值表| www.xl56.com-中国福彩报-| www.1071.org-足彩10串1013|