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天

知道了
TT快3 www.69472.com-今日老猫出彩快讯| www.49ma.cc-七彩冰淇淋做法大全| www.435189.com-七分彩下载-| www.632331.com-天下彩票幽默玄机| www.766395.com-蒂之彩学校怎么样| www.875661.com-彩神v111app| PK彩票www.8499a.com| www.g78.com-c8万彩吧-| www.65qi.com-山东福彩购彩客户端| www.1603.vip-彩票购客户端| www.cp9698.com-好彩网-| www.589964.com-福彩三地和值表儿| www.776367.com-快乐彩票骰子大小| www.ec62.com-博众时时彩软件下载| www.604923.com-彩宝苹果版下载| www.du31.com-贵阳福利彩票中心| www.015613.com-搜索491彩票| www.178997.com-爱彩乐快乐十分开奖| www.981049.com-彩八彩票下载地址| www.66312.cc-排3试机号乐彩网| www.3252.xyz-优彩网官网app| www.9587.loan-福彩3d冷号统计表| www.45554.com-满堂彩彩票注册| www.93818.com-瑞彩彩票是真的假的| www.057876.com-北京乐彩快三| www.132678.com-福彩3d定位胆技巧| www.208939.com-彩81彩票-| www.348068.com-无忧彩漫-| www.703886.com-明彩影视app| www.884887.com-高频彩不能追号| 乐彩网www.lcw997.com| www.791143.com-买彩票源码什么意思| www.874462.com-七乐彩走势图带线| www.950466.com-手机福利彩票怎么买| 万历彩票www.77114s.com| www.ei42.com-河南彩钢围挡定做| www.xj85.cc-湖南有没有快三开奖| www.1259.vip-7乐彩出奖顺序号| www.4jv.com-加拿大彩票有官网吗| www.301368.com-湖北竞彩快三查询| www.514418.com-福彩双色球105| www.835996.com-顺丰彩票官网首页| 500万彩票www.35155m.com| www.849309.com-nba竞彩篮球吧| www.nk07.com-158彩票-| www.82mn.com-七星彩分几等奖| www.6782.vip-幸运彩票怎么赢钱| www.52279.cc-试机号爱乐彩| www.033105.com-900彩票-| www.55rf.com-山西十一选五体彩| www.449825.com-chicken彩票| www.609658.com-白银市福彩中心电话| www.739076.com-中国足彩竞彩网首页| www.837636.com-福彩连环夺宝坑人| www.2382.vip-七彩山鸡苗孵化场| www.05230.com-彩票01官方下载| 500彩票www.202374.com| www.12ot.com-吉林快三调整时间| www.383848.com-三晋福彩网今曰开奖| www.555241.com-人人红彩票还能买吗| www.696310.com-足彩19030期| www.875217.com-世界博彩公司网站| k3k3彩票www.601497.com| www.817195.com-春节彩票开售时间| www.906730.com-福彩有哪些彩票开奖| www.995899.com-足彩竞彩平台| www.nj02.com-彩客足球-| www.454452.com-苹果酷彩吧下载| www.278253.com-高频彩票害人输千万| www.509212.com-福利彩票兑换中心| www.rf72.com-168娱乐彩票平台| www.359382.com-七星彩会员数据免费| www.237491.com-辽宁省体彩兑奖地址| www.349448.com-怎么做彩票走势图| www.5817.xyz-银航时时彩登录网址| www.790292.com-快三不同号-| www.9511.cc-七星彩4位取码| www.391930.com-搜狐彩票安全吗| www.614765.com-数字彩票软件| www.05183.com-互联网彩票开售时间| www.051163.com-查彩票开奖公告| www.d28.com-快三预测的软件| www.k75.top-伦敦2分彩走势图| www.69ny.com-区块链彩票试点| www.902896.com-彩店宝彩票客服电话| www.413.in-金博在线彩票怎么样| www.vq05.com-体彩6十1中奖规则| www.67ia.com-太原彩票店转让| www.2079.shop-九千万彩票账户| www.33010.com-彩票被洗衣机洗烂了| www.eu.com-北京快三推荐和预测| www.456383.com-今天旺彩预测3d| www.567026.com-emoji的彩虹| www.644006.com-彩票5元去哪里兑换| www.721255.com-海南东方快三查询| www.795177.com-快三手机-| www.12376.com-中国大乐彩票| www.510968.com-彩虹谷景区-| www.806889.com-玩彩是不是骗局| www.600534.com-美的彩票是真的吗| www.791134.com-彩大师彩票出号机| www.86lb.com-华宇时时彩平台代理| www.852629.com-怎样预测足彩胜平负| www.160702.com-乐彩网p3走势图表| www.132275.com-进口彩妆进货渠道| www.789371.com-酷彩吧竞彩app| www.904987.com-西安彩票店转让信息| www.894.net-彩特吧高手网| www.15025.cc-彩票连中app| www.8533.pw-360彩票安安卓卓| www.29628.com-山东群英会彩票软件| www.016251.cc-鸿彩下载-| www.v65.cn-体彩竞彩赛事推存| www.89is.com-彩77是正规网站吗| www.028363.com-赚佣金精准计划彩票| www.711999.com-彩58软件下载| www.797920.com-易彩娱乐怎么没关| www.877407.com-猜动物彩票-| www.966834.com-彩票大案-| www.cai8355.com休肓彩票开奖| www.654947.com-14个号码的彩票| www.818328.com-乐汇彩网址-| www.920091.com-华彩软件彩票网| www.984598.com-彩票模拟器投注| www.kn67.com-河北彩票十一选五| www.293822.com-国彩彩票是骗局吗| www.873983.com-体育彩票查询双色球| www.bq01.com-七乐彩票平台可靠吗| www.019.me-苏宁彩票主页| www.6022.cn-济南市体彩领奖中心| www.12300.com-竞彩推荐预测| www.08537.com-彩票可以赚返利吗| www.324915.com-彩票统计器软件大全| www.524547.com-福彩3d看组三| www.260659.com-福利彩票怎样兑奖| www.751480.com-杨震足彩推介| www.868722.com-七乐彩专家定胆杀号| www.962062.com-江苏快三作假| 500彩票www.www.957588.com| www.sx33.com-最简单的彩票玩法| www.79pn.com-怎样往福彩机器交费| www.6464.org-彩票竞价话术| www.51837.cc-下載牛蛙彩票| www.979045.com-中免绿好彩好抽吗| www.ox62.com-七乐彩的跨度| www.7974.com-彩宝贝杀号定胆篮球| www.33078.com-236彩票-| www.gl9.com-安徽快三走势| www.737256.com-彩票到哪领奖| www.851290.com-360足彩大厅| www.952266.com-体彩开奖公告结果| 博友彩www.786251.com| www.e67.com-福建七乐彩走势图| www.70ob.com-买足球彩票能发财吗| www.883124.com-多彩投官网电话| www.2123.vip-七乐彩胆拖中奖金查| www.28358.cc-彩乃奈奈百度云| www.97331.cc-北京古建筑彩绘图案| www.323997.com-航天彩虹军工四证| www.376640.com-3d彩吧第三版| www.446125.com-廉江好彩哥规律长局| www.520311.com-体彩红叶杀码今天的| www.qw22.com-福建福彩走势图今天| www.02nh.com-家教男主是彩虹之子|