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.072559.com-六亿彩票手机版下载| www.194604.com-e球彩怎么玩| www.297006.com-彩票k线图-| www.382266.com-体彩平台诈骗| www.303422.com-虎扑神棍区篮彩| www.402440.com-竞彩多串中奖计算器| www.254667.com-体彩扑克牌开奖| www.035647.com-彩神计划网页版| www.179730.com-内蒙快三最大遗漏| www.267212.com-足彩19040期| www.357297.com-a8彩票可靠吗| www.452199.com-太原福利彩票投注站| www.562153.com-高频彩票基诺| www.639143.com-彩票开店限制| www.172956.com-1分快三开奖记录| www.299175.com-网罗爱彩专栏| www.403221.com-重庆老实实彩| www.522627.com-彩虹51挂挂网页| www.590820.com-天天乐时时彩平台| www.678283.com-优彩神论坛-| www.776444.com-福彩3d追号-| www.155169.com-足彩19044实单| www.256184.com-官方彩下载-| www.mp51.com-彩富网天下资料大全| www.62tp.com-体育彩票总部在哪里| www.499519.com-八彩票-| www.600956.com-为什么富人不买彩票| www.691951.com-彩乐网下载-| www.785298.com-tt彩票app下载| www.865381.com-分分彩历史开奖记录| www.936583.com-足球胜负彩中奖规则| 创富彩票www.cf9908.com| www.221284.com-新彊时时彩助手| www.282472.com-33彩票app-| www.752038.com-体彩大乐透开奖l| www.870397.com-快三有号码-| www.991540.com-旺彩彩票开奖号码| www.39566.cc-开机i彩票-| www.015948.com-唯彩看球旧版本| www.089501.com-快三是官方开奖吗| www.cai3930.com网上的快三是真的吗| www.tx08.com-11选5爱乐彩| www.17ll.com-中国体彩网手机下载| www.1805.me-三位数体彩中奖| www.8844.loan-彩票服务-| www.528260.com-彩票预测网站违法吗| www.636259.com-彩虹机-| www.968413.com-天律时时彩开奖历史| www.cp5922.com-买彩票的人都是傻子| www.0047.pw-金冠彩票网可信吗| www.755631.com-河内时时彩杀码技巧| www.939536.com-黑龙江体彩开奖结果| 豪彩VIPwww.001837.com| www.a48.loan-青岛福彩兑奖中心| www.469892.com-老鼠的彩票数字| www.557720.com-快三购彩-| www.633222.com-希腊5分彩网址| www.993167.com-福利彩票色子点数| www.56px.com-富彩彩票是真的吗| www.9505.vip-财神腾讯十分彩| www.003472.com-菲律宾彩票合作平台| www.123545.com-广西快三和值判断| www.973142.com-五彩玫瑰花的图片| www.hn29.com-福彩快5玩法介绍| www.022367.com-大鲸改造全彩| www.163467.com-福利彩票对等提现| www.299157.com-彩票弃奖排行| www.438187.com-中国福利彩票正版| www.576022.com-v9彩票网-| www.910122.com-快彩联盟-| www.6462.org-博彩推广引流| www.967439.com-福彩3d高手群号码| 豪彩VIPwww.998632.com| www.ky95.com-9福建体彩十一选五| www.362312.com-福彩3d热号码| www.487866.com-老余说彩-| www.597161.com-福彩图库大全| www.669406.com-体彩让球什么意思| www.738685.com-天津福彩机器申请| www.807654.com-买彩票中奖的故事| www.878254.com-福彩3d迷图-| www.980094.com-cp12彩票官网| www.cr5.com-大发快3彩票软件| www.226050.com-内蒙福彩快三走势| www.314989.com-彩票各类玩法| www.019597.com-山西体彩在哪儿兑奖| www.432342.com-福利彩票多少一注| www.554332.com-福彩双色球解析| www.629820.com-山东体彩11运夺金| www.62968.com-彩客科技-| www.029099.com-星光彩票大发快三| www.384545.com-福利彩票算什么单位| www.58if.com-宿迁彩票-| www.37335.cc-俄罗斯彩蛋意义| www.98933.com-梦见彩票店-| www.49314.cc-红旗彩票中彩| www.sj62.com-彩乐乐推荐-| www.17hq.com-直播彩票开奖查询| www.181.mobi-彩名堂怎么下载不了| www.8614.vip-电视没有彩怎么办| www.429008.com-创意水彩图片| www.576117.com-牛蛙彩彩票开奖现场| www.640206.com-下载777彩网| www.818272.com-腾讯分分彩开奖号| www.oh91.com-广州体彩11选五| www.73kk.com-龙瞎炫彩皮肤| www.cp605.com-快三哪几个省有| www.531283.com-93彩票官网-| www.871734.com-瑞彩祥云彩票平台| www.63vy.com-福彩彩票开机号| www.5484.com-长春3d彩报-| www.34801.com-福彩3分析app| www.6787.top-2串1竞彩足彩推荐| www.52685.cc-好彩店足彩-| www.821915.com-七星彩振幅走势图| www.925020.com-彩彩吧-| www.996892.com-头奖彩票app| www.bt96.cc-大发快三软件| www.wa73.com-快三图片图片图库| www.06td.com-彩铅梦幻画-| www.71ny.com-福彩试机号千禧金码| www.1022.cc-好盈彩票骗局揭秘| www.25638.cc-彩库开奖-| www.60442.com-七乐彩票开奖查询| www.9771.wang-排列三体彩专家预测| www.63039.cc-胜天半子足彩| www.004753.com-中国湖北彩票网| www.637003.com-手机可以看彩虹台吗| www.805156.com-彩色纸-| www.877792.com-我想做网络私彩代理| www.944342.com-大联盟彩票取款失败| www.277772.cc-澳洲时时彩稳定计划| www.395160.com-奇门飞盘测彩票| www.hj3.com-内蒙古今日快三| www.673903.com-寺院古建山花彩绘图| www.761357.com-三星镇好彩妹| www.837706.com-网上设赌时时彩案例| www.cp347.com-快三代理怎么挣钱| www.7215.pw-彩票打水方法| www.46864.com-足彩十四场专家预测| www.029775.com-体彩兑奖后多久到账| www.099083.com-网赚彩票是真的吗| www.167537.com-兰州快三走势图今天| www.4060.cc-七星彩总部-| www.9395.cc-去国外彩票公司上班| www.jc.cc-河北省彩票奖快3| www.037047.com-超级彩票助手官网| www.rg63.com-彩票4+1-| www.20sr.com-彩票20选8下载| www.648402.com-江苏快三八方走势图| www.922461.com-甘肃快三官方下载| 亿龍彩票www.1368y.cc| www.062411.com-建平县黑彩大案| www.198384.com-黑彩票平台怎么举报| www.270270.cc-下载即送体验金彩票| www.374902.com-网站首页彩票分析| www.502089.com-093a彩票-| www.586626.com-福利彩票资讯网| www.669112.com-美国彩票23亿是谁| www.ae53.com-体彩19032期| www.yd01.com-多乐彩彩票网站| www.31ic.com-抖音彩虹符号| www.503816.com-江苏快三投注计划表| 恒大彩票www.299695.com|