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.075266.com-彩票视频-| www.235903.com-最新足彩分析| www.356676.com-宁波体彩-| www.471255.com-台湾五分彩开奖分析| www.733558.com-福建体彩兑奖流程| www.878998.com-棋牌彩票平台怎么样| www.972434.com-彩铅画图片大全古风| www.hi86.com-快三一共多少组合| www.w66.com-掌上彩票新平台| www.251.red-重庆时时彩合买| www.00778.com-七乐彩属于什么彩票| 大赢家彩票平台www.130511.com| www.zu58.com-爱彩通11选5软件| www.230304.com-北京快三兑奖期限| www.336449.com-可提现的彩票app| www.444109.com-福彩3d杀跨走试| www.110946.com-彩票开奖什么软件好| www.257375.com-福彩快三一天多少期| www.360314.com-竞彩有几种玩法| www.66kj.cc-北京七星彩开奖结果| www.02937.com-江苏福彩快三推荐| www.21212.com-赢发彩票可信吗| www.75bs.com-时时彩正规倍数| www.8363.biz-七星彩论坛下载安装| www.52478.com-足彩任九胆拖投注| www.005072.com-彩芽はる-| www.130795.com-红蚂蚁彩票计划| www.0895.vip-快三稳赚不赔| www.00029.com-福彩幸运二开奖结果| www.162766.com-蓟彩芝演的电视剧| www.265568.com-福彩3d福降天下| www.510968.com-彩虹谷景区-| www.483829.com-彩票5软件-| www.vi37.com-福彩图谜总汇牛彩| www.2289.org-今天的彩民乐图文版| www.36797.cc-28彩票走势怎么看| www.7778.cc-博中彩坛-| www.256382.com-福利彩票游戏规则| www.904028.com-彩神靠谱不-| www.990371.com-多乐彩票是骗人的吗| www.sw0.cc-破解彩票算法的漏洞| www.610169.com-qq彩色字体代码| www.719454.com-七星彩手机机选| www.835533.com-福利彩票26期| www.915880.com-9万彩票官网下载| www.992131.com-中国足彩在线网站| www.zd49.com-红牛彩票下载| www.756110.com-彩票工具箱软件| www.bw76.com-七星彩开奖直播现场| www.l48.com-河北福彩三d| www.74nj.com-p3体彩今日开奖| www.3459.in-发大财彩票-| www.791.cc-大六壬测彩实例| www.7691.top-900天福彩票| www.75917.com-香港热门平台彩票| www.873491.com-在线购彩票-| www.gh43.com-广西福彩手机版下载| www.j78.com-哪种彩票奖金最高| www.57vj.com-贵州体彩大乐透开奖| www.1403.xyz-彩虹伞亲子游戏大全| www.654754.com-3分钟时时彩时间表| www.18856.com-彩068彩票-| www.83785.com-彩票站中一等奖好处| www.6ln.com-彩票数学概率论| www.573407.cc-933彩票最新版本| www.38408.com-彩票返点的平台| www.92667.cc-立彩官方下载| www.115071.com-3d牛彩图库网| www.302557.com-308彩票苹果| www.469107.com-彩票诈骗立案标准| www.581373.com-如怎么看彩票走势图| www.694548.com-360竞彩直播| www.778810.com-百宝彩票数据提醒| www.859988.com-内部人士彩票骗局| www.929101.com-福彩在线是什么| GO彩www.fen00.com| www.ex53.com-福利彩票软件靠谱吗| www.233115.com-北京单场足彩| www.87te.com-玖玖彩票网登入| www.6281.vip-五福彩票苹果| www.fy83.com-三分时时彩开奖| www.350622.com-a3彩色打印机连供| www.fm0.com-彩票专家孙老师| www.52qt.com-个人彩票软件下载| www.329835.com-中国彩吧红五图库| www.397340.com-80彩票app骗局| www.576774.com-彩票图片大全真实的| www.009054.com-广西福彩官网手机版| www.101197.com-周易预测彩票的高手| www.000069.cc-彩票61开奖查询| www.94oj.com-keno彩票规律| www.4326.in-亿彩高峰-| www.616745.com-体彩排列三的玩法| www.695678.cc-豪彩一vip彩种| www.764570.com-彩票77平台-| www.829757.com-禁止彩票买卖| www.891552.com-彩票统计分析工具| www.179129.com-福利彩票开奖结果| www.265599.com-福利彩票快3咋玩| www.078778.com-七星彩奖金计算| www.189214.com-体彩走势图乐彩网| www.799456.com-亿彩购物中心| www.952533.com-k彩1960代理| www.ib1.com-快三直选中奖多少钱| www.zv05.com-七彩国际美容连锁| www.64dc.com-福彩3d2d玩法| www.2842.vip-福彩快三星号怎么打| www.07924.com-中彩那天词语| www.69187.cc-腾讯分分彩人数在线| www.219.tv-乐彩彩票是合法的吗| www.4399.live-甘肃快三今天对子热| www.735809.com-彩虹玫瑰多少钱| www.798669.com-带vip的彩票平台| www.540486.com-360彩票预测网站| www.659143.com-体彩19042期| www.056903.com-炫乐彩票娱乐| www.930674.com-36o七星彩预测| www.995084.com-惠彩网app下载| www.dy05.com-福彩快三正规网站| www.153962.com-彩票团队微信兼职群| www.88571.cc-彩票站打错号| www.070598.com-91彩神可以玩吗| www.fk73.com-人工时时彩在线计划| www.901.in-彩库宝典官方正版| www.47iv.com-幸运中彩票牛牛玩法| www.8200.loan-安徽快三时间| www.38303.com-彩票平台返点8.5| www.88310.com-934彩票-| www.086376.com-体彩胜负彩开奖结果| www.77244.cc-众博彩票网骗局| www.037085.com-彩票收米图片大全| www.610239.com-怎么在淘宝上买彩票| www.710922.com-巅峰对决50元彩票| www.276367.com-网上买快三-| www.442060.com-彩票手机在线| www.568663.com-腾讯微彩正规吗| www.631019.com-彩票平台彩票| www.688603.com-发彩票短信-| www.670298.com-局王七星彩极速版| www.775359.com-会员登陆49c彩票| www.1300.in-365博彩app-| www.06233.com-福彩3d牛材网杀码| www.58866.com-福彩三地杀码技巧| www.818025.com-胜负彩19050| www.948975.com-国彩在线-| www.cai8933.com安徽体彩网十一选五| www.vx16.com-江苏快三跨度怎么算| www.45id.com-安卓版彩19-| www.1340.xyz-彩票中奖兑奖地点| www.477655.com-点彩神通-| www.557791.com-今晚七星彩开奖现场| www.625290.com-体彩即开彩票返点| www.712891.com-体彩排列三杀组合| www.789172.com-名人彩票登录网址| www.839636.com-足彩最新欧赔| www.4510.pro-足彩查询比赛结果| www.445263.com-彩票网站需要维护吗| www.538923.com-分分彩半顺杂六技巧| www.625009.com-福利彩票表-| www.689107.com-彩票兑奖处是啥意思| www.7065.biz-7彩便捷酒店的英文| www.731650.com-百姓彩票返钱快吗| www.811860.com-双彩属于哪里| www.884980.com-体彩个人申请|