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.240221.com-贵州快三中奖金额图| www.070953.com-彩票365是否正规| www.46za.com-买彩什么意思| www.0377.com-逼真彩铅画作品欣赏| www.8015.vip-彩票天下4.cc| www.331883.com-大发时时彩规律口诀| www.715252.cc-彩神1平台下载| www.837313.com-9亿彩票代理| www.614685.com-苏氏彩票-| www.871419.com-彩富网最快报码室| www.979388.com-福彩票开奖号码查询| www.gh48.com-三分快三开挂| www.p73.org-上海天天彩选4预测| www.86lu.com-3d联盟好彩乐4版| www.493214.cc-选号软件体彩大乐透| www.01os.com-彩虹的颜色顺序图片| www.822698.com-凤凰彩票平台注册| www.028368.com-百度彩票大乐透杀号| www.215779.com-河北福彩快三中直播| www.580871.com-翻天熊足彩500万| www.987654.com-500彩官网-| www.xc77.cc-打开福彩和值表| www.353223.com-福利彩票8软件| www.7584.cm-大通彩票网页手机版| www.95670.com-福彩志愿者心得体会| www.169646.com-分分快三计划| www.312231.com-分分彩怎么看长龙| www.109766.com-今甘肃快三-| www.211240.com-湖北快三开奖今日| www.754300.com-彩天下-| www.1303.vip-体育博彩官网| www.235282.com-手机怎么买福利彩票| www.10317.com-看彩啦双色球预测| www.019285.com-彩票达人app下载| www.103824.com-好彩三八是什么生肖| www.321566.com-明发彩票-| www.687215.com-中国福利彩票幸运三| www.880948.com-人人网彩票靠谱么| www.293879.com-23彩票app-| www.410426.com-福彩三十六选7彩值| www.436.me-众购彩票网路线导航| www.145378.com-足彩推荐最准的专家| www.5204.vip-竞彩计划单稳赚| www.051925.com-万豪彩票助手app| www.048655.com-福彩三地小军图迷| www.8wr.com-可以跟单的体彩平台| www.6912.top-怎样控制时时彩心态| www.99193.com-收365账号足彩吧| www.18ya.com-山东体彩3个亿| www.1963.cc-怪字彩报-| www.244992.com-彩45彩票-| www.88296.cc-澳门威尼手机彩票网| www.069565.com-和彩放题199晚餐| www.28gx.com-手机336彩下载| www.aw55.com-中国福利彩票积分卡| www.725927.com-万科彩票-| www.806710.com-彩票固定规律公式| www.884792.com-三彩彩票是诈骗的吗| www.155531.com-双色球彩票怎么玩的| www.288657.com-彩票里的长龙提示| www.104948.com-牛蛙彩票准-| www.026812.com-13彩跟投靠谱么| www.095158.com-彩票作弊器视频| www.512820.com-好运来彩票骗局| www.764156.com-彩神88合法吗| www.908606.com-足球彩票玩法说明| www.kw3.com-体彩山东快乐扑克3| www.745409.com-大彩彩票app| www.917184.com-彩票33平台多久了| 博友彩www.876295.com| www.602933.com-时彩万位杀号方法| www.681058.com-网上14彩-| www.761045.com-体彩排列五长条图纸| www.827720.com-中国彩的网址| www.899176.com-天天彩免费料大全| www.963846.com-彩库宝典1.0.0| 福彩www.15355x.com| www.dq68.com-彩神官网-| www.ya58.com-彩票几点停售| www.35nj.com-春秋彩票官网注册| www.654.hk-圣地彩开奖时间| www.4340.cm-f网彩什么-| www.770529.com-时时彩资金分配方案| www.893840.com-清水彩票-| www.962883.com-彩圣今日字谜| www.cp0155.com-快三破解器手机版| www.na56.com-038快彩-| www.k64.tv-掌上购彩骗局揭秘| www.964121.com-58彩票人工计划| www.23309.com-宁波福彩网征召| 博乐彩票www.35918y.com| www.08632.com-福彩3d模拟摇奖器| www.036031.com-博友彩邀请码怎么弄| 大赢家彩票平台www.689613.com| www.060987.com-欢乐彩票app下载| www.787903.com-竟彩混合投注| www.869985.com-彩神4213777| www.941468.com-网络彩票怎么找顾客| www.998240.com-七星彩资料早版牛爹| www.ry72.com-彩票256官方| www.04gy.com-彩铅名画图片| www.80zy.com-彩西-| www.2422.vip-彩票好运3好运4| www.099850.com-炫乐彩票靠谱吗| www.301.la-龙彩娱乐黑钱| www.5585.pw-套彩什么意思| www.08837.com-极速彩app-| www.62872.cc-新彩票走势网势首页| www.009118.com-怎么买彩票-| www.070593.com-彩票365ios-| www.313748.com-体育竞彩网站| www.06155.com-福彩3d不收费论坛| www.054500.com-新浪竞彩足球推荐| www.3383.in-体彩助手软件| www.670752.com-福彩大奖领奖安全吗| 新盈彩www.xinyc8.com| www.054713.com-搭建时时彩网| www.789812.com-竞彩网nba-| www.375973.com-宁国彩票中奖| www.025979.com-一定牛甘肃福彩快三| www.02804.com-体彩十一选五新规则| www.216078.com-七星彩兑奖方法| www.540035.com-休闲快三第二套| www.2405.top-彩票遗漏统计| www.1337.biz-福利彩票双色球荐号| www.6828.com-彩65彩票-| www.12915.cc-运盛娱乐彩票下载| www.199555.cc-上海快三遗漏号码| www.271081.com-南海网七星彩论坛| www.42bs.com-春天彩票骗人吗| www.609277.com-今晚买什么码七星彩| www.678538.com-米兜彩票不能提现| www.751625.com-瑞彩祥云作弊器| www.823126.com-安徽福彩中心位置| www.952875.com-今天竞彩足球预测| 500彩票www.50074j.com| www.278644.com-财神彩票app| www.376983.com-七星彩1到9的合数| www.502231.com-福彩套利-| www.666975.com-乐彩8603cc-| www.307536.com-彩友会app-| www.365365.cc-极速赛车彩票怎么玩| www.426369.com-快三分分彩在线预测| www.513096.com-1077彩票靠谱吗| www.568776.com-排列三彩报第二版| www.625450.com-珠江彩票平台| www.681875.com-全中彩票真的假的| www.741751.com-南京中彩票的人| www.814972.com-福彩p3开奖-| www.885162.com-第一彩票app下载| www.960764.com-彩票注册送28| 幸运彩票www.5095w.com| www.ah92.com-七星彩最近100期| www.og59.com-彩票598-| www.f82.cn-吉隆坡博彩中国人| www.35oj.com-腾讯分分彩长龙历史| www.306944.com-广东福利彩票中心| www.393562.com-昨天的福利彩票结果| www.560653.com-爱彩票048app| www.97786.cc-彩光嫩肤一般多少钱| www.997522.com-时时彩源码论坛| www.fh09.com-湖北快三数据专家| www.zz24.cc-够力七星彩开奖视频| www.50ki.com-足彩大小球技巧|