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天

知道了
百盈PK10 www.38516.cc-get彩民发宝| www.024653.com-福彩积分卡兑换| www.rk21.com-各种釉彩大瓶感想| www.17lq.cc-qq60秒彩-| www.650.hk-时时彩八码技巧| www.4832.vip-彩票怎样预测| www.02469.com-福彩3d复试投注| www.545243.com-152彩票游戏规则| www.047886.com-买彩票怎么容易中奖| www.571400.cc-快三四码红什么意思| www.0431.site-吉林k3黑彩-| www.fm56.com-福彩3d和值分布图| www.33597.cc-三合网彩票开奖结果| www.79151.com-足彩预测单场专家| www.85664.com-足彩算不算加时| www.29cv.com-彩铅画图片人物动漫| www.41973.com-人人中奖彩票被调| www.825888.cc-138期快三-| www.916608.com-永盛彩票手机网址| www.999359.com-e球彩害人不浅| www.mp06.com-送彩金棋牌-| www.196233.com-易彩彩民福地登录| www.296038.com-多乐彩十一选五走势| www.tk16.com-河南省体彩兑奖地址| www.65vo.com-乐彩直播-| www.349615.com-彩票3d三毛图库| www.420092.com-乐游彩票能赚钱吗| www.700540.com-农民彩票大发| www.ep01.com-快三秒奶茶加盟费| www.g14.bid-海南彩票4个号码| www.288226.com-怎么才能看懂彩票| www.396109.com-福彩中心营业时间| www.512921.com-彩票哪个平台能买| www.581073.com-开彩吧免费资料| www.651902.com-福彩3d下注网址| www.718101.com-彩虹网络上的意思| www.793605.com-体彩预测推荐号码| www.866049.com-自学入侵私彩网后台| www.927830.com-七星彩画规软件| www.980676.com-火箭彩票网下载| www.cp6161.com-山东彩票沙龙论坛| www.yl93.cc-大乐购彩票怎么玩| www.03691.com-网络彩票害死我| www.393981.com-彩厍宝典大全| www.555097.com-快三怎样测龙| www.657991.com-福彩电子走势图软件| www.737966.com-香港意大利彩金价值| www.812038.com-乐彩论坏-| www.879048.com-彩种分为多少种| www.947202.com-彩票造假事件| www.992878.com-福彩365安装| www.aq99.com-广西快三官方开奖| www.uf36.com-手机购彩软件排行| www.08nq.com-6701彩票www| www.860572.com-5分彩开奖走势图解| www.935672.com-娱乐彩app-| www.981594.com-福彩和体彩哪个靠谱| www.as71.com-众彩网大乐透走势图| www.552336.com-彩票九宫图视频教程| www.711671.com-彩票中100万元| www.838175.com-鸿鼎彩票下载| www.923066.com-今日彩票运占卜百度| www.am51.cc-广西体彩网-| www.w19.com-怎样买体育彩票能中| www.76hm.com-马耳他彩票开奖| www.3826.cm-七星彩个位十位数| www.25917.com-彩虹象征-| www.315226.com-彩虹台直播tv| www.439969.com-中彩那天内容简介| www.790654.com-买11选5黑彩破产| www.895801.com-英国快三开奖查询| www.975745.com-周口太康彩礼多少钱| www.aa85.com-幸运彩票-| www.706219.com-中彩网统计走势图表| 吉利彩票www.80075o.com| www.vj99.com-重庆英皇快三查询| www.073960.com-旭彩网可靠吗| www.137302.com-彩霸王三星做号软件| www.30tt.com-星期五体彩什么开奖| www.599683.com-彩票中一万-| www.717099.com-水彩笔品牌排行| www.787538.com-湖北快三冷号统计| www.896211.com-争霸彩票8-| www.970394.com-天天乐彩新人注册送| www.up3.com-七彩奖今晚开奖号码| www.513767.com-网上买彩票有假吗| www.pz08.com-彩九ios下载| www.123430.cc-盛邦财团彩票| www.477764.com-赣州福利彩票店店址| 500彩票www.914077.com| www.53571.cc-彩虹6号要加速器吗| www.74577.cc-七乐彩奖级对照表| www.9294.top-乐彩一般怎么买| www.466792.com-七星彩截止购买时间| www.555066.cc-uu博彩-| www.619266.com-五一彩票开奖查询| www.683758.com-恒彩彩票app下载| www.752228.com-永盛彩票官网| www.868912.com-下期七星彩号码预测| www.927612.com-南京福利彩票中心| www.978591.com-福建体彩票36选7| www.xc31.com-七星彩最怪号| www.03uv.com-百合花彩铅画教程| www.15206.com-极速时时彩选号技巧| www.098228.com-3d福利彩票走势图| www.69859.com-大彩鲸11选5彩票| www.577985.com-鄂彩女装是品牌吗| www.666834.com-威斯汀福乐彩是什么| www.023347.com-买体彩哪个软件好| www.131223.com-因为彩礼分手| www.252006.com-qq彩票还能买吗| www.318510.com-贵州快三跨度走| www.380752.com-五年彩票信誉平台| 杏彩www.00840n.com| www.hx43.com-彩乐汇是不是假的| www.wo37.com-广西福彩官方客户端| www.015749.com-七星彩中奖概率计算| www.092626.com-河南彩礼多少合适| www.164204.com-腾讯二分彩计划软件| www.17vn.com-优优99娱乐送彩金| www.021128.com-大乐透彩票中奖查询| www.119176.com-快三442后-| www.598701.com-下栽正宇火箭彩票| www.935001.com-体育彩票电视怎么调| www.984961.com-竞彩网分比-| www.gb34.com-福彩快三如何追号| www.167986.com-河北快三开奖结果是| www.128345.cc-4亿彩票下载安装| www.082678.com-宝马娱乐彩票app| www.949964.com-广东体彩36一7| 惠民彩票www.18kpl.com| www.443941.com-31彩票开奖结果| www.602063.com-中彩票不给钱| www.775601.com-金彩网一句中特| www.939388.cc-亚博app买足彩| www.125776.com-下载9彩app软件| www.11eh.com-111时时彩票| www.04ak.com-彩客化学吧-| www.658373.com-百宝彩电子图下载| www.756114.com-全民平台彩票| www.861839.com-彩票店装修图片欣赏| www.957938.com-彩彩乐江苏福彩快三| www.cp899.cc-百姓彩票平台| www.277208.com-五分钟一次的彩票| www.cp302.com-福彩快三今日开奖| www.sl2.com-福利彩票怎么看中奖| www.270028.com-彩67app-| www.439908.com-好彩票花呗也可充值| www.637577.com-体彩彩票兑奖方式| www.610318.com-2019高频彩新规| www.208768.com-彩神通关注码| www.021063.com-拉菲国际彩票| www.121534.com-彩友计划网页版| www.037128.com-彩名堂计划好用不| www.654820.com-旺角彩皇免费资料| www.869363.com-体彩扑克牌技巧| www.958580.com-福彩20分钟开奖| www.cai111.com-兰州快三-| www.lh52.com-中彩彩票手机app| www.42az.com-爱尔兰有哪些彩票| www.218787.com-大发快三怎么稳赢| www.308962.com-福彩3d绝对布衣1| www.433324.com-彩中堂宗合资料| www.547566.com-网易彩票接口|