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.473440.com-彩票9cb下载| www.614848.com-体彩大乐透分析预测| www.789675.com-投彩跟计划骗局| www.894831.com-陕西快三查询| 39彩票www.39cp.cc| www.ld81.com-大彩网公告-| www.16yz.com-彩票刮奖谁中过大奖| www.77830.com-快三数字图-| www.116095.com-被黑彩票平台骗了| www.223196.com-福彩快三多久开奖| www.f12.me-最新七乐彩中奖情况| www.350908.com-彩票能买那些数| www.46rk.com-中国彩票官方网| www.676543.cc-彩票榜软件是真的吗| www.761453.com-好彩妹照片-| www.771492.com-时时彩五星单式漏洞| www.868681.com-乐购彩彩票安全吗| www.hg99.com-极速快三全天计划| www.i50.top-c58彩票app-| www.754822.com-黑彩快三怎么拉人| www.032976.com-网易彩票网官方下载| www.222142.com-彩票改革透明| www.216324.com-快三哪个平台好| www.ph20.com-六会彩皇冠开奖结果| www.jr2.com-河南快三今日遗漏| www.ys70.com-延吉福彩中心| www.1199.link-华彩人生1点通下载| www.595210.com-重庆乐彩网-| www.401090.com-七星彩中间值走势| www.607877.com-在哪找彩友多店铺| www.783305.com-足球彩票在线过滤| www.168627.com-江苏快三怎么玩| www.518051.com-帝皇彩票网站| www.20161.cc-幸运28彩票app| www.405366.com-彩票店几号开门| www.533404.com-那种彩票最简单| www.619433.com-甘肃中彩网-| www.690233.com-足彩310走势图| www.777877.cc-福彩3d字迷牛彩冈| www.872099.com-天天中彩网下载| www.947258.com-快三开奖贵州| 大赢家彩票平台www.975367.com| www.531569.com-买彩票中奖的经历| www.616198.com-体彩单式票开奖查询| www.684278.com-福彩3d211路号| www.zn60.com-最新彩票资讯| www.37no.com-ios大公鸡七星彩| www.3179.xyz-世界杯足球竞彩玩法| www.816091.com-柬埔寨博彩招聘骗局| www.921398.com-中国合法网上彩票网| 500彩票www.50080b.com| www.tl42.com-体彩试机号关注号| www.55nb.com-九州彩票平台网站| www.1894.cn-今日福利彩3d图纸| www.18321.cc-甘肃福彩天地报纸图| www.66356.com-开体彩店心得| www.129667.com-彩票新闻中奖故事| www.307907.com-派彩官网11选五| www.391690.com-足彩二串一算法| www.687258.com-彩圣网免费资| www.804773.com-七乐彩复式5十1| www.911772.com-福彩彩票3d怎么玩| www.c2.cm-手机上快三平台| www.d57.club-下彩网触屏版| www.2260.biz-福彩e乐服能提现吗| www.9518.vip-海南私彩中奖会跑吗| www.928210.com-九万彩票可是骗局| 天下彩www.741770.com| www.d54.xyz-长春彩票销售| www.8376.vip-七星彩头尾书| www.57687.cc-多彩网江苏快三| www.114330.com-福利彩票随机选的| www.253729.com-快三豹子中了多少钱| www.397471.com-快乐三分彩顺口溜| www.722865.com-人人乐彩票安装| www.299395.com-彩票开奖结查询| www.448822.com-山西福彩投注站电话| www.595881.com-极速时时彩官网| www.720521.com-七星彩17年第一期| www.857989.com-手机买彩票的客户端| www.974086.com-快三怎样选和值大小| www.848568.com-nba每日推荐竞彩| www.9306.cm-七乐彩顶测-| www.630866.com-今日足彩胜负平| www.741241.com-彩票28是正规的吗| www.033329.com-彩站宝如何发起跟单| www.96394.com-福彩全国联销期| www.111555.cc-怎样下载盈彩网| www.214228.com-足彩招聘-| www.583167.com-百位杀号彩经网| www.93ve.com-彩色的梦怎么画大全| www.7173.cc-福彩双色球手机应用| www.40219.com-702彩票-| www.049292.com-3d天天彩图报纸| www.133476.com-福利彩票假不假| www.227971.com-彩票走势图表格| www.338908.com-体彩是随机出号码| www.462929.com-宝发彩票真假| www.565950.com-联合投彩票-| www.652952.com-博彩概念股票有哪些| www.66658.com-福利彩票兑奖网址| www.205405.com-淘宝彩票怎么购买| www.52987.cc-时时彩资金分配方案| www.119864.com-福彩排三图米总汇| www.255975.com-时时彩牛牛玩法规则| www.400319.com-特区网七星彩票论坛| www.888146.com-福乐彩是骗局吗| www.555516.com-08彩票论坛-| www.756801.com-彩票一期计划网| www.984503.com-彩虹8彩票下载安装| www.84di.com-伦敦两分彩-| www.639670.com-买竞彩输了-| www.156364.com-好彩堂好彩堂论坛| www.351301.com-彩神v交流群| www.514191.com-彩票国际黑钱平台| www.012660.com-特区彩票论坛论坛| www.96192.cc-彩电云-| www.yk7.com-10选5彩票骗局| www.zq1.com-彩迷天地-| www.896298.com-优势的彩票合买源码| www.r13.org-体育彩票几个数字| www.392294.com-搜狐彩票平台| www.594569.com-上海三彩夏装新款| www.14pm.com-彩票走势图专业助手| www.2659.org-彩吧vip彩票| www.088959.com-网上买快三怎么能中| www.525555.com-重庆福彩官网电话| www.803961.com-体彩票可以网上买吗| www.nk42.com-我发现竞彩有规律| www.5423.vip-彩钢瓦水槽安装图片| www.947682.com-支付宝积分兑换彩票| www.su21.com-9彩彩票是真的假的| www.4246.xyz-有诚信的彩票程序| www.964870.com-国家禁止彩票软件| www.271711.com-丰彩1元有中奖的吗| 大赢家彩票平台www.708382.com| www.cp8148.com-易彩快三大小单双| www.4626.net-体彩精彩足球| www.659339.com-彩票开奖第35期| www.935418.com-快三二同号全打| www.365885.cc-众彩网排三预测分析| www.450070.com-时时彩012路表| www.395330.com-福利彩票双球开奖| www.588020.com-购彩v是真是假| www.795168.com-贵州快三计划网页版| www.56uz.com-延安市福彩中心地址| www.5953.biz-福建体彩网排列五| www.057128.com-福彩怎样才算中奖| www.616094.com-即时开彩软件下载| www.801830.com-彩票加倍计算器| 彩票坊www.022zj.cc| www.881037.com-彩票站开设赌场罪| www.47790.com-好彩妹是哪个电视剧| www.105028.com-华人彩登录注册网| www.571708.com-新年讨个好彩头| www.1070.tv-时时彩采集软件出租| www.93097.com-苏州施工围挡彩钢| www.324800.com-如何买外国彩票| www.629889.cc-福彩直播平台| www.801148.com-富彩网下载-| www.894813.com-福利爱彩票开奖| 中彩www.zcwf2.com| www.759206.com-福彩图库网址是什么| www.517436.com-爱彩乐助手下载|