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.781354.com-手机快乐彩十分钟开| www.cp072.com-安微福利快三走势图| www.yc35.com-江西福彩今天开奖| www.33636.com-703彩票网站下载| www.847789.cc-竞彩实时投注量查询| www.996441.com-黑龙江体彩领奖地点| www.xk06.com-不乐彩3d-| www.756238.com-贵州省体彩大选五| www.983760.com-华宇装潢玩彩票| www.371143.com-新彩与粉彩的区别| www.623691.com-9288pk彩票-| www.776846.com-时时彩前三走势图| www.953325.com-竞彩网篮球计算器| www.qp86.com-pc28彩票骗术| www.211373.com-彩界联盟官方下载| www.365499.com-落日风景彩铅画| www.369099.com-老杜说彩票今日推荐| www.436681.com-福利彩票10| www.10we.com-体彩4场进球对阵表| www.339336.com-深圳福彩最新| www.557687.com-腾讯官方qq彩票| www.451884.com-彩票网线路检测| www.627920.com-秦兰香桂林彩调| www.364556.com-聚财彩票软件可靠吗| www.518563.com-乐彩网开奖结果查询| www.bz1.cc-app彩票软件| www.749104.com-彩虹六号暗影先锋| www.619056.com-时时彩十大信誉排名| www.707508.com-南充福利彩票| www.800934.com-辽宁真版3d彩涂| www.9065.cn-重庆时彩包赚直选法| www.74435.com-彩票app验证码| www.027545.com-可靠的高频彩种| www.253275.com-彩票456-| www.57725.cc-百度中彩彩票| www.6156.top-香港马彩开奖网站| www.949648.com-彩78计划-| www.63644.com-竟彩唯彩-| www.816871.com-众彩网手机版怎么样| www.712952.com-cpcp彩票平台| www.943335.com-博应用时时彩下载| www.qt44.com-福彩文化理念是哪些| www.994220.com-体育福利彩票刮刮乐| www.ee70.com-彩票刷负盈利技巧| www.wx47.com-鸿彩彩票团队| www.34221.com-上海福彩免费下载| www.570195.com-体彩排三走势图专业| www.328043.com-彩吧论坛首页正版| www.19211.cc-怎么买篮彩-| www.123923.com-欢乐国际彩票靠谱吗| www.c26.me-新派彩-| www.3829.biz-原创足彩盘口分析| www.441456.com-百宝彩视用户登录| www.5625.com-双色球杀号百度彩票| www.38997.cc-彩票不给提现| www.022300.com-博彩杀猪盘-| www.200825.com-买彩票顺口溜| www.409119.com-澳洲3分彩投注技巧| www.809870.com-众乐彩票能玩吗| www.963263.com-彩钢板图片-| www.qw97.com-时时彩送彩金团队| www.500931.com-一寸照片彩色| www.617525.com-福彩发号中心| www.698080.com-杭州体彩兑奖地址| www.790654.com-买11选5黑彩破产| www.868395.com-七星彩的对数| www.935256.com-166彩票苹果版| www.992346.com-快三9手必中| www.fo08.com-广西福彩快3结果| www.0177.cm-国彩下载-| www.653032.com-8炫彩游戏规则| www.719228.com-怎样赞美彩虹| www.788780.com-nba篮球彩经| www.858430.com-乐购彩票源码| www.926543.com-瑞彩下载-| www.981210.com-七彩冰淇淋制作方法| www.cp9155.com-购彩网下载app| www.og20.com-天津福彩快三开奖| www.04vm.com-足彩任九胆拖计算器| www.768291.com-幸运彩票3132| www.845954.com-海南私彩合法吗| www.166548.com-快三中奖助手手机版| www.cp097.com-江西快三跨度走势图| www.r79.xyz-上海福彩选四预测| www.0955.top-和买福利彩票允许吗| 网易彩票www.069wy.com| www.te67.com-吉林快三买大小单双| www.40991.com-福彩3d杀一和值尾| www.050999.com-pk彩吧下载-| www.1259.hk-四川体彩金7七乐| www.610103.com-108彩票邀请码| www.836234.com-九龙中彩老板包料| www.1288.live-乐彩博彩骗局| www.9703.org-彩店宝下载ios| www.295138.com-博彩返水高的| www.885410.com-彩票投注大厅平台| www.779823.com-拉萨有彩票游戏机吗| www.169228.com-醒快汇内蒙古快三| www.953996.cc-牛彩网字谜总汇| www.388617.com-互联网彩票牌照公司| www.56196.com-19023体彩-| www.146233.com-竞彩蓝球计算器| www.113744.com-排列三双彩论坛网| www.234977.com-下载福利彩票软件| www.356927.com-体彩门头标准图片| www.kk77.cc-易彩彩票快三| www.650722.com-早教彩虹伞游戏教案| www.539551.com-人人中彩票中奖没| www.2992.me-青蛙彩票一首页| www.688589.com-105彩票最新版本| www.509133.com-4157彩民红高手| www.975863.com-许昌彩礼多少| www.99367.com-竞彩官网开奖| www.21tk.com-彩票百富网-| www.952678.cc-金福彩票导航| www.024885.com-599彩票官方网站| www.59283.cc-哪里申请彩票投注站| www.036696.com-尼彩手机在哪买| www.108278.com-彩票上分是什么意思| www.805455.com-彩色胶带定做| www.847811.com-彩票有作弊吗| www.900259.com-爱彩乐专家荐号| www.585284.com-体育彩票双色球单式| www.983904.com-3d福彩下载安装| www.hb40.com-彩票分析3d| www.sk83.com-模拟买彩票-| www.86121.cc-聊城彩钢瓦厂| www.047135.com-买大小是什么彩票| www.01pt.com-彩虹桥作文-| www.974839.com-体彩961心跳时| www.dv04.cc-五星彩开奖结果| www.zv89.com-体彩竞彩店出兑| www.47hn.com-金手指足彩应用| www.978387.com-来彩020官网网页| www.cp977.com-江苏快三助手安卓版| www.4441.biz-众亿彩票是真的吗| www.227619.com-苏州福彩快3开奖| www.092665.com-送彩金彩票软件下载| www.178656.com-体彩app-| www.9217.biz-乐彩站合不合法| www.556841.com-体彩福彩开机号| www.953694.com-彩票快三辅助器| www.bs05.com-飞扬彩票计划软件| www.47lb.com-手机淘宝怎样买彩票| www.5921.me-彩票燕赵-| www.tc02.cc-彩票昵称-| www.69xo.com-彩六进攻3速| www.6593.biz-体育彩票nba| www.799051.com-顶尖彩票如何提现| www.123698.com-排列三乐彩网首页| www.339203.com-海南私彩赔率| www.150362.com-彩83彩票网注册| www.265939.com-银川体彩十一选五| www.503260.com-甘肃彩票开奖详情| www.610268.com-怎么样从网上买彩票| www.716516.com-即开型彩票有哪些| www.828725.com-58彩票-| www.937095.com-五彩福彩票-| 凤凰彩票www.55228g.com| www.f08.cc-乐彩一直赢提现不了| www.3753.pw-开开心心七星彩网| www.401819.com-彩客彩票网官网| www.286581.com-彩王老头-| www.431448.com-足彩凯利值计算|