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.06705.com-福彩福利彩票app| www.964672.com-足球彩票新浪网| www.259079.com-竞彩足球比分旧版| www.9008.com-乐彩站下载-| www.325218.com-体彩排列三迷语字迷| www.6525.biz-福彩小小鱼字谜| www.90as.com-香港六和彩票网站| www.739157.com-555彩票官网| www.712688.com-网赌快三是真假| www.cai5959.com爱彩乐北京快三开奖| www.5261.biz-开奖派彩助手| www.250393.com-中彩彩票推荐码| www.89534.com-新彩网手机版的吗| www.110280.com-k3彩票网官方网址| www.552930.com-今日福彩字谜新彩网| www.754900.com-白菜彩金-| www.878393.com-时时彩任四技巧| www.975733.com-福彩快三专业版| www.dm74.com-各省快三-| www.2xa.cc-黑彩举报电话| www.gb26.com-福彩快三怎么样| www.d67.top-亚博科技阿里彩票| www.30369.com-京东有时时彩吗| www.94794.com-足彩缩水大师破解版| www.355414.com-彩奈奈奈百度贴吧| www.27135.com-彩票计划团队| www.76531.com-足彩外围玩法| www.234466.com-安微快三今天结果| www.469558.com-福彩十分钟走势图| www.9809.cn-中彩双色球开奖结果| www.930554.com-七星彩梦兆查询| www.999666.com-福彩网是不是骗人的| www.fb28.com-有彩票的挂吗| www.bs66.com-必中快三计划全能版| www.wt28.com-江苏快三号码图表| www.41pz.com-七彩球游戏手机版| www.82026.com-福彩好易自助终端| www.997363.com-快三怎么算下期和值| www.337574.com-博彩免费体验金论坛| www.272935.com-福彩内部号-| www.17637.cc-足球彩票让球投注| www.4556.biz-悠悠彩票官方下载| www.246399.com-极速时时彩开奖历史| www.432496.com-彩票站怎么搞促销| www.557197.com-网络彩票代理证据| www.632151.com-竞彩收米图-| www.711827.com-c58.彩票-| www.088249.com-彩票d9cc-| www.846182.com-七乐乐彩开讲结果| www.8603.wang-利博彩票平台| www.006421.com-美国好彩烟价格| www.355875.com-福利彩票分分时时彩| www.895589.com-会员登陆9b彩票| 500万彩票www.98528g.com| www.372557.com-梦到彩虹还拍照| www.383961.com-星期六彩票-| www.329521.com-深圳福彩开奖结果| www.484018.com-天天彩票可以提现吗| www.934544.com-快彩软件下载| www.ru58.com-全国快三彩票| www.546528.com-体育彩票申请范本| www.601332.com-20元中国红彩票| www.qh20.com-好彩蓝莓柠檬双爆| www.61eo.com-彩63官网-| www.690404.com-足彩即时凯利指数| www.786746.com-福彩有极速快三吗| www.868167.com-老时彩360-| www.949014.com-国彩彩票网-| www.m12.in-天福彩票官网| www.aw64.com-快三绝密打法| www.525937.com-助赢计划时时彩网站| www.077800.com-一分快三害人| www.00ku.com-写彩虹的现代诗| www.717840.com-菜鸟彩票平台| www.326640.com-旺彩双色球专家预测| www.431073.com-彩牛网官方网站| www.536176.com-给几组彩票号码| www.142448.com-钰堂彩票大师软件| www.662913.com-3d彩票有几个球| www.730954.com-雪缘园足球彩票比分| www.7856.hk-足彩预测公式| www.353992.com-体彩史上最大奖| www.449935.com-彩票1980-| www.526.cc-体彩大乐透奖池余额| www.2285.shop-天天存款送礼金彩票| www.76cs.com-2628彩票骗局| www.655613.com-五福彩彩票软件下载| www.047207.com-22彩票去哪里下| www.130330.cc-彩票查询有没有中奖| www.501983.com-体彩一共多少个数| www.961783.com-福彩数字3开奖时间| www.xf56.com-分分钟彩票网| www.087399.com-快三必出号技巧| www.373011.com-322彩票-| www.570128.com-w彩票线路检测| www.751752.com-彩票乐园下载安装| www.jt87.com-河北保定快三查询| www.1926.club-体彩天下软件下载| www.646368.com-竞彩足球赚钱吗| www.608738.com-解梦七星彩号码撞车| www.698708.com-彩票走势图1000| www.808755.com-福彩吧app-| 亿彩堂www.868216.com| www.zf61.com-鑫彩网买彩票安全吗| www.363.org-排列3双彩论坛| www.387557.com-87彩店店铺邀请码| 盛大彩票www.ct8800.com| www.842965.com-体育彩票哪年上市| www.954184.com-胜负彩087期| 彩乐乐www.cll168.com| www.214700.com-cp彩票-| www.da94.com-彩神1软件-| www.001121.com-360竟彩足球| www.208913.com-贵州福彩快三开结果| www.4293.org-尼彩手机图片| www.dg67.com-瑞彩网app-| www.a97.cc-彩虹伞创意玩法| www.36qn.com-昨天的开奖号码福彩| www.149255.com-最新版彩29-| www.27667.cc-中国足彩竞猜平台| www.033289.com-中信积分换彩| www.7179.xyz-宝乐彩票安全吗| www.055143.com-彩色的黑-| www.545243.com-152彩票游戏规则| www.175913.com-安徽省快三跨度| www.259159.com-竞彩保本对冲7%| www.5969.cc-足彩北京单场| www.469588.com-竞彩足球是不是赌博| www.681553.com-辽宁省级福彩中心| www.755558.com-旺彩四肖中特图片| www.829076.com-体彩排列三胆码分析| www.889717.com-彩票和值破解| www.950901.com-快三做庄会输么| www.999222.cc-足球竞彩手机软件| www.ck61.com-合肥体彩中心在哪里| www.1183.vip-赤体彩术语| www.854435.com-360竟彩比分直播| www.937742.com-幸运快三谁被骗过| www.989111.com-新浪彩票3d论坛| www.cp8528.com-三分快三计划| www.500615.com-彩票领取期限| www.497.biz-七乐彩开奖历史重号| www.62099.cc-xr原彩有什么用| www.682109.com-微信买彩票中奖| www.758506.com-无锡彩票店营业时间| www.46of.com-东方分分彩-| www.02gu.com-快三解锁计划软件| www.501131.com-中i国彩吧-| www.828703.com-体彩真实性被质疑| www.893061.com-时时彩5星缩水| www.959651.com-哪个平台买彩票正规| www.aj92.com-彩票开奖公告立| www.p37.com-彩票百位振幅走势图| www.62tt.cc-义乌福彩中心地址| www.1534.cn-福利彩票大家乐| www.4717.me-江西体彩100期| www.68113.cc-重庆时时彩高手心得| www.63pn.com-彩票平台怎么搭建| www.310036.com-延吉体彩中心在哪里| www.063219.com-双机彩票站转让| www.195506.com-体彩图标-| 博友彩www.820737.com| www.800136.com-搜狐彩票下载安装| www.233915.com-河北快三最大遗漏值|