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.812666.cc-新彩吧彩票网站| www.518630.com-优乐彩网-| www.658661.com-中乐彩官方网| www.076016.com-达人彩票可靠吗| www.443923.com-意彩手机版-| www.mk33.com-28彩票-| www.458559.com-e球彩中奖秘诀| www.665981.com-时彩时彩官网| www.771163.com-51彩票下载安装| www.225356.com-网上买时时彩被骗| www.366176.com-水溶性彩铅怎么用| www.029588.com-彩16是骗局吗| www.167591.com-福彩快3开奖结果| www.265690.com-最近彩票诈骗案| www.593125.com-电视剧《彩虹》| www.525097.com-重庆时时彩聊天| www.086888.com-台湾福星彩图库开奖| www.173.live-彩客网竞足胜平负| www.766737.com-玩黑彩输钱了报案| www.184548.com-福彩3d字谜图| www.298141.com-体彩任选5开奖公告| www.392363.com-昨晚上彩票开奖| www.557973.com-海南彩票4位数| www.626948.com-nba体彩购买技巧| www.710019.com-彩票代玩账号微信| www.808211.com-任九足彩奖-| www.uv22.com-体彩三亿-| www.092408.com-福建体彩网官网| 奔驰彩票www.781566.com| www.kg14.com-最新的彩票选号软件| www.342498.com-好彩频道回放| www.13ge.com-好彩蓝莓双爆焦油| www.051166.com-真实的彩票代购网站| www.551339.com-4场进球彩技巧| www.8473.loan-融彩网是真的假的| www.9198.in-万家彩app-| www.55bk.com-发彩票短信投注| www.5843.org-彩票中奖到哪里兑换| www.19990.cc-虚拟足彩进球数| www.753162.com-中彩吧能信吗| www.101281.com-特彩吧报码开奖直播| www.1259.vip-7乐彩出奖顺序号| www.76108.com-足球彩票去哪买| www.56003.com-重庆时彩讨论群| www.685037.com-盈佳彩票网址| www.839522.com-竞彩收米意思| www.242383.com-黑龙江福彩20选八| 中彩网www.81233h.com| www.866798.com-福彩昨天的中奖号| www.942203.com-2元买彩票-| www.988235.com-华盛娱乐彩票平台| www.fr9.com-159彩票app-| www.019536.com-重庆体彩官网| www.169552.com-吉林省体彩兑奖流程| www.ck23.com-有一分快三的彩票| www.947975.com-四川体育彩票金七乐| www.cp0733.com-快三软件app| www.02st.com-世界杯彩票网禁售| www.287293.com-刷彩票漏洞-| www.382418.com-足彩19o37推荐| www.4728.vip-彩票50万照片| www.390041.com-新加坡乐彩开奖记录| www.024050.com-福和彩票开奖| www.26691.cc-手彩-| www.988233.com-两分快三全天计划| www.85111.cc-中国福利彩票扫码| www.331071.com-彩票免费网址大传| www.512657.com-秋天为主的彩铅画| www.02422.cc-彩票试玩帐号| www.539770.com-体彩双色球开奖时间| www.792278.com-体彩开奖大乐透推荐| www.918027.com-幸运彩票送彩金| 尊彩www.900406.com| www.678394.com-福彩3d列表-| www.047158.com-288彩-| www.463155.com-彩丽厂多少号发工资| www.0522.cn-神彩通三中三会员| www.750600.com-彩票丢失-| www.904890.com-足球彩票胜负彩开奖| 大赢家彩票网www.83033l.com| www.ta59.com-彩票有二位数字的吗| www.79ij.com-双彩网论坛讨论| www.5049.xyz-福彩3d八卦变号图| www.836578.com-快三如何看和值| www.167917.com-彩票上海快3开奖| www.742000.com-彩票730-| www.866525.com-昨日彩票中奖号码| www.931306.com-8彩票直通车| www.984185.com-杀号定胆汇总凤彩网| www.cp8388.com-天天快三是合法的吗| www.sy32.com-福彩3daa牛采会| www.32yw.com-随时赚彩票是正规| www.97xy.com-浙江体彩六加一开奖| www.650556.com-中班彩虹伞教案| www.765485.com-福彩快频彩下载| www.843828.com-福利彩票管理条例| www.914984.com-排列五星彩开奖结果| www.992906.com-买彩票赚钱可靠吗| www.sd4.cc-快三复式计算四个号| www.qn81.com-七星彩开奖号码是| www.0kw.com-彩神v2-| www.52qf.com-彩虹湾公园-| www.706623.com-易彩堂邀请码大全| www.9936.loan-福彩双色球开奖玩法| www.17uc.com-彩哥哥计划打不开| www.791.live-北京彩票计划软件| www.5893.com-铜陵福彩中心在哪里| www.4145.cc-彩虹六号笔记本配置| www.14pw.com-排五走势图彩经网| www.047207.com-22彩票去哪里下| www.444494.com-体彩票开奖视频| www.29822.com-728彩票-| www.554873.com-体彩19038期| www.639162.com-中彩网福彩3d预测| www.715875.com-彩神的网址是多少| www.803707.com-江苏快三单双大小| www.73731.com-闽南泉州体彩聊天室| www.061451.com-3d彩民之家-| www.131112.com-环彩网appios| www.216372.com-道教买彩票的咒语| www.124467.com-攻破彩票-| www.213792.com-如何玩彩神2大发| www.124779.com-腾讯5分彩靠谱不| www.260698.com-内蒙古福彩中心| www.579546.com-qq彩票下不了主了| www.869372.com-买七星彩大害人| www.638003.com-天猫小店体彩| www.727180.com-酷彩彩票网官网| 500彩票www.50064x.com| www.08266.com-南海福彩中心站| www.ta2.com-168彩票网香港| www.hj29.com-五分快三计划网| www.057860.com-有福州快三么| www.88529.cc-98098f彩票网| www.044825.com-湖北快三和值表| www.230658.com-挂彩票骗局-| www.zc45.com-幸运快三计算公式| www.0335.date-幸运时时彩趋势图| www.303003.com-香港马会澳彩对比| www.22666.com-玩快三输了如何回血| www.72819.com-吉林省中国福彩3d| www.880319.com-包头福彩招聘| www.66905.com-重庆福彩领奖地址| www.131392.com-郑州市结婚彩礼标准| www.494365.com-沈阳彩票寻合作| www.728073.com-鼎盛团队5分彩计划| www.68227.cc-重庆时寸彩开奖软件| www.929850.com-生肖彩票规则| 500彩票www.3126v.com| www.604228.com-彩66888app-| www.287938.com-爱乐彩app苹果| www.351088.com-银河彩票官方网站| www.414699.com-福彩3d拖胆复式表| www.o45.net-玩彩票wcp.cc| www.48785.com-中国福利利彩票| www.34908.com-众购乐彩-| www.65356.com-彩名堂计划怎么看| www.577833.com-1分快三计划平台| www.692829.com-快三和值规律| www.773930.com-境外时时彩网| www.840205.com-广西体彩集团| www.925947.com-深圳市福利彩票中心| www.993648.com-足彩19044期| www.db03.com-人人彩票是合法的吗|