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.pk10.com www.67vt.com-彩钢夹芯板安装视频| www.vk68.com-彩运福彩快3| www.559271.com-3d乐彩网字迷专区| www.640622.com-大乐透图迷与彩民乐| www.707581.com-被大发彩票骗| www.767050.com-竞彩比分直播和赔率| www.07xj.com-彩铅上色-| www.614.in-时时彩论坛技术| www.5909.pw-霸州市体彩-| www.22152.cc-58彩票网不能提现| www.017803.com-福利彩票3d幸运码| www.116717.com-3d彩票定胆-| www.025946.com-3号彩票网app| www.253936.com-快三广西开奖结果| www.392028.com-万彩吧网站-| www.667871.com-中国福利彩票冯学志| www.824277.com-七星彩卖奖软件| www.934702.com-快彩11选五电视版| www.gi40.com-怎么看快三大小| www.938.red-体彩胜平负奖金查询| www.592535.com-香港彩报-| www.739438.com-快彩网极速快3计划| www.004863.com-33期福彩-| www.97fz.com-重庆时时彩越赌越输| www.029816.com-内蒙古快三和尾和值| www.257685.com-彩票开奖快三下载| www.078938.com-99彩票网-| www.638551.com-111彩票安卓| www.16938.com-幸运快三走势图下载| www.015727.com-鸿运彩票不让提现| www.6068.cm-足彩胜负14场推荐| www.30377.com-体彩彩票走势图| www.877185.com-七乐彩往期中奖号码| 818合彩www.www.8000hc.com| www.sj14.com-上海快三专家预测| www.62ms.com-篮彩推荐新浪| www.479404.com-青岛福利彩票总店| www.626957.com-五百中彩票专栏| www.028584.com-8828彩票-| www.v09.cn-彩票里啥叫屠龙| www.804296.com-世界杯彩票如何购买| www.942554.com-山东省体彩兑奖中心| www.gn79.com-河南快三智慧彩| www.28ez.com-网上彩票什么开售| www.658642.com-彩票店能买世界杯吗| www.892293.com-足彩怎么买稳赚不赔| www.4074.cc-乐彩33登陆-| www.209032.com-快三什么平台好| www.722793.com-双赢彩票网址是哪个| www.973621.com-广西福彩开奖号码表| www.066129.com-建彩票平台用多少钱| www.745163.com-6234彩票可信吗| www.895567.com-彩票合买系统在哪找| www.328826.com-彩票精准计划聊天室| www.254057.com-808体彩-| www.091088.com-福彩快三开奖视频| www.977342.com-河南多少彩礼| 幸运彩票www.444072.com| www.522019.com-福运来彩票骗局| www.717464.com-彩客足彩比分直播| www.850601.com-快三杀号的计算器| www.975010.com-111cc彩票下载| www.nr28.com-8816平台彩票| www.20be.com-买复式彩票怎么玩法| www.019149.com-瑞彩祥云网页版| www.111185.com-彩客彩票ios下载| www.265234.com-江苏福彩快三遗漏号| www.02ia.com-彩虹七种颜色的顺序| www.583.cc-套彩票规律-| www.6252.biz-彩八苹果下载软件| www.030.pw-075彩票图表| www.3368.in-今日篮球竞彩| www.070001.com-福彩票中奖号码| www.303025.com-福彩双色球奖项规则| www.398645.com-竞彩2串一对冲打水| www.vy23.com-河北体彩票开奖查询| www.41ip.com-彩票中三等奖多少钱| www.444.cn-彩神优信-| www.4643.com-彩票买全号-| www.26409.com-七星彩胆拖计算器| www.287736.com-彩票千万别合买| www.540622.com-易彩彩民登录福地| www.948.org-七星彩开奖公告直播| www.812068.com-新加坡天天彩资讯| www.739392.com-快乐3彩票-| www.85rh.com-360福彩导航| www.441170.com-环彩网客服电话| 500万彩票www.937160.com| www.356341.com-高频彩逻辑-| www.477171.com-2019年福彩时间| www.76pn.com-彩票买到几点结束| www.712549.com-福彩双色球单注奖金| www.559966.com-大公鸡七星彩神算子| www.563689.com-中彩网app邀请码| www.657263.com-中国福彩消消乐| www.747744.com-环彩网登录-| www.817704.com-一彩票图谜总汇| www.878962.cc-五位数的彩票| www.950683.com-体彩江苏七位数| 易盈彩票www.7793k.com| www.404838.com-儿童彩铅风景画简单| www.035312.com-彩票aqq哪个好| www.709318.com-腾讯分分彩不可能赢| www.505950.com-86彩票app-| www.761644.com-韩国彩票玩法规则| www.506714.com-3d久久彩吧-| www.591890.com-彩票中奖学问| www.56px.com-富彩彩票是真的吗| www.81630.com-福彩快三多久开一次| www.085300.com-彩神uv机怎么样| www.159111.com-彩宝网彩票走势图解| www.3211.net-买彩票霸气的网名| www.10134.com-凤凰微彩官网| www.089663.com-七乐彩中3多少钱| www.670306.com-狂欢彩票网址| www.as67.com-甘肃快3爱乐彩| www.11ln.com-826彩票微信群| www.62548.com-极速一分彩开奖| www.146433.com-竞彩篮球比分赛果| www.763188.com-广西淘宝快三体彩| www.857945.com-快乐十分彩票软件| www.941671.com-怎么找玩彩票资源| www.998746.com-时时彩黑客入侵改单| www.iu63.com-福建体彩网11远5| www.0927.cn-足彩胜负任九合买| www.033690.com-易彩网彩票3d| www.8806.xyz-章鱼彩票合法吗| www.026229.com-快三免费计划app| www.138729.com-三分时时彩计划网址| www.213857.com-彩神官方在线| www.731567.com-彩色包装袋印刷| www.834485.com-彩烟烟花多少钱| www.941818.cc-福利彩票代理| 818合彩www.07hc.com| www.sc89.com-新分分彩开奖结果| www.882.pw-手绘日落彩铅画| www.491306.com-彩众赢-| www.208451.com-七星彩开奖公告| www.23583.cc-怎么买彩票最靠谱| www.939912.com-爱彩乐彩票下载安装| www.986346.com-彩票助手吧-| www.cp0993.com-快三分析软件| www.432107.com-天空彩票与开奖问行| www.81hn.com-时时彩福少做号软件| www.171.in-好用的足彩外围| www.ge64.com-湖湖北快三走势图| www.ur86.com-有谁代理了大发快三| www.1us.cc-杏彩测速-| www.05tc.com-彩铅海底世界优秀| www.870342.com-河北快三结束时间| www.xr08.com-七星彩历全记录| www.30he.com-打开令天彩票| www.324783.com-马来西亚博彩| www.474600.com-南方彩吧网-| www.488266.com-香港时时彩是骗局吗| www.554484.com-七星彩超级组合| www.611119.cc-彩票领导者网站| www.50jy.com-2018买足彩口诀| www.740566.com-玖亿彩票官网| www.25la.com-华彩咨询公司怎么样| www.696458.com-竞彩网是不是合法的| www.mx3.cc-人人中彩票安卓| www.f96.com-体彩3d图迷-| www.353413.com-京彩手环app下载|