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.sh54.com-时时彩网上不更新| www.541.tv-竞彩2串1公司收费| www.5582.site-飞艇彩票怎么玩法| www.27158.com-新2彩票七肖公式| www.sm30.com-时时彩后三直选规律| www.42su.com-福彩日期-| www.4137.cm-彩虹无人机公司待遇| 大赢家彩票www.579411.com| 云博彩票www.www.217113.com| www.754996.com-天津彩票官方开奖| www.929629.com-七星彩开奖查询| 大玩家彩票www.84499c.com| www.238554.com-5亿彩骗局-| www.966486.com-数字型彩票代购网站| www.81wc.com-体育彩票网的玩法| www.357569.com-何越粤彩票实战手册| www.996243.com-彩票店买的了北单吗| www.055126.com-彩色包括哪些颜色| www.0078.cc-彩票用户名昵称| www.657795.com-百宝世嘉彩票怎么玩| www.940588.com-全民汇彩票-| www.c5.cc-湖北十一选五爱乐彩| www.69620.com-九九集团彩票下载| www.088036.com-双赢彩票app| www.226980.com-百胜快三-| www.635066.cc-做时时彩好挣钱吗| www.220233.com-快三追号利润计算器| www.69626.cc-彩票这期买什么号| www.105744.com-西京时时彩新疆| www.35hw.com-台湾福星彩图库资料| www.914422.com-彩票166下载正版| www.984851.com-高频彩赚钱吗| www.br51.com-幸运快三走势| www.tl18.com-时时彩算号器手机版| www.19ed.com-七星彩号码历史记录| www.17719.cc-现在时时彩开奖视频| www.702768.com-彩店宝下架了吗| www.262105.com-中国体彩网走势图| www.357548.com-彩票中奖后收回么| www.3244.vip-内蒙快3彩票| www.gs78.com-江苏体彩七位数| www.135517.com-如何开体彩彩票站| www.47794.com-好彩妹什么电视剧| www.285160.com-时时彩个位必中技巧| www.384801.com-怎么入侵彩票网站| www.025084.com-彩票安卓版12选5| www.149026.com-大花猫彩报2| www.226110.com-购乐彩-| www.301203.com-福彩快三跨度表| www.367721.com-彩铅古风场景图片| 博友彩www.371m.cc| www.1829.cc-7位体彩开奖结果| www.953660.com-盛大彩票app| 500万彩票www.www.98528f.com| www.wb36.com-腾讯5分彩怎么使用| www.918822.com-彩票走势模拟投注| 鑫亿彩www.039079.com| www.381204.com-我要看七乐彩| www.05264.com-红五图库彩吧网| www.866456.com-昨日体彩开奖号码| www.966757.com-广西快三是骗人的吗| www.cp981.cc-彩神8官网合法吗| 天天彩票www.1035aa.com| www.lg46.com-下载红彩app| 优彩网www.974091.com| www.st69.com-星彩-| www.770568.com-分分彩是不是国家的| www.881558.com-辉煌彩票网站导航| www.964126.com-福彩3d稳定和差| 好彩www.60123s.com| www.029102.com-玖富彩票正规吗| www.8672.top-彩票中奖情况| www.55rk.com-山西体育彩票官网| www.940451.com-3d中彩网字谜| www.95519.com-体彩是几位数| www.099380.com-江苏老快三360| www.xm15.com-北京快三规律推算| www.wn09.com-分分钟彩网站| www.383212.com-彩票从哪里买正规| www.791023.com-下载广西福彩| www.896737.com-中国福彩购彩大厅| www.978515.com-天天爱彩票不能提现| www.jn2.com-河北省快三一定牛| www.158461.com-网易彩票开奖中心| www.290463.com-破解腾讯分分彩| www.129009.com-福彩票开奖公告| www.72991.cc-湖南省福彩兑奖处| www.110565.com-七星彩1注赔多少| www.127871.com-彩虹宝宝角色名字| www.230240.com-彩99是正规彩票吗| www.020467.com-彩票开奖查询| www.991800.com-福彩旺彩网-| www.954084.com-开奖大厅彩票365| www.388805.cc-发彩公司系列染膏| www.962182.com-香港快三有哪些| www.cp015.com-彩票走势图详解| www.603485.com-广西福彩网上投注站| www.983140.com-新盈彩怎么玩| www.452.net-买彩票中五百万| www.9434.me-欢乐彩票怎么样| www.53654.com-如何申请体彩销售点| www.997420.com-彩神快3人工计划| www.87vk.com-福彩3d天天彩报| www.2259.cn-新运中福彩-| www.9447.live-一比分彩票走势图| www.46640.com-爱彩乐电视走势图| www.4717.top-巨人彩票账号注册| www.476369.com-下彩铃电话号码多少| 七乐彩www.700231.com| www.rv83.com-中国彩票官网代理| www.29sg.com-简单彩色铅笔画风景| www.1971.me-龙的快三彩票| www.613316.com-彩票全部开-| www.699503.com-竞彩官网赛果| www.793963.com-福彩是赌博吗| www.866403.com-福彩5分钟一期的| www.69625.cc-易彩补漆笔使用方法| www.555245.com-快三红号多少个| www.0953.cc-彩宝典网站-| www.42jx.com-中国竟竞彩网| www.0644.org-时时彩测号软件| www.727647.com-彩票平台套利风控| www.812911.com-彩膜是什么-| www.882732.com-上海基诺彩票奖项| www.260009.com-宁夏福彩-| www.880732.com-手机淘宝网买彩票| www.997949.com-排三乐彩网玄机图| www.tv40.com-快三注册网站| www.392064.com-体彩小炮直播| www.80yp.com-彩神通六会四码| www.2nx.com-在亚洲彩票上输钱| www.70094.com-彩8彩票骗局| www.382126.com-买注彩票-| www.506333.com-茗彩注册-| www.587075.com-11选5幸运彩票| www.655006.com-深圳彩皇电子厂| www.713639.com-王者彩票快3| www.778942.com-彩·663299-| www.867740.com-快三全骰什么意思| www.998954.com-客哥说彩3d-| www.893621.com-博奥彩票软件| www.05129.com-彩经网缩水过滤工具| www.663185.com-彩票平台是一起的吗| www.750449.com-豪彩vip骗局| www.707466.com-本港彩票资讯网| www.021460.com-福利彩票数字| www.617518.com-玩快三输钱的人多吗| www.702389.com-靠谱的网彩-| www.789204.com-竞彩足彩比分结果| www.245586.com-新浪彩票电脑版| www.632319.com-快三012路分析法| www.690145.com-皇帝彩票网站| www.755567.com-彩票3d开奖查询| www.815270.com-手机搜狐网彩票| www.870913.com-双色球彩票app| www.915897.com-福彩七乐彩开奖号码| www.965921.com-易发彩网-| 中彩网www.81233z.com| www.9502.com-上海彩钢瓦价格| www.345242.com-淘宝现在能买彩票吗| www.761707.com-空打彩票-| www.851008.com-大发时时彩五星玩法| www.916040.com-湖北彩票官方网站| www.cai0344.com快3彩票中奖规则|