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天

知道了
1分快三 www.569052.com-今日福彩3d寻码图| www.716529.com-彩铅画海边夕阳| www.811204.com-3d彩票实战讲座2| www.897791.com-福利彩票的标语| www.965574.com-u9彩票注册登录| 福彩网www.603694.com| www.iv70.com-竞彩兑奖规则| www.m77.hk-买彩票一张多少钱| www.55pk.cc-云南福彩开奖结果| www.1098.mobi-平台彩票网赚| www.28173.com-新彩票126-| www.78353.cc-优优彩票网是真的吗| www.038833.com-双色球彩票中奖情况| www.160558.com-福彩3d独和差方法| www.258195.com-百胜快三福彩| www.339765.com-旧版310彩客彩票| www.432887.com-福彩3g画迷-| www.536086.com-彩票有重复的数字吗| www.705154.com-传奇彩票8-| www.781009.com-白菜彩票基地论坛| www.858514.com-福彩开奖记录| www.922690.com-彩客竞彩app下载| www.987345.com-中彩票后的小说| www.ej0.com-快三跨质号-| www.rb01.com-彩票中奖不捐款挨骂| www.13tj.com-广东好彩i-| www.91lm.cc-牛彩官网3d断组| www.3579.cn-白菜送彩金大全网站| www.9625.com-福彩3d初几开| www.74977.cc-分分彩输了怎么办| www.029824.com-彩票10086-| www.112414.com-杏彩彩票平台官网| www.189495.com-快三单双术语| www.271448.com-黄好彩什么味道| www.410896.com-唯彩会官方下载| www.525533.com-重庆时时彩关闭了| www.616961.com-彩票黑客预测| www.695999.com-福彩天地报双色球l| www.778709.com-人人中彩票没了| www.945911.com-乐八彩票害死人| www.bh.com-10分快三计划网站| www.qz35.com-内蒙11选5爱彩乐| www.29ef.com-体彩三串一什么意思| www.1141.in-名人彩票_测速| www.9357.win-国家彩票主任| www.85611.com-五百万竞彩网站| www.5cq.com-彩乃奈奈百度网盘| www.420281.com-彩票平台网址导航| www.561876.com-内蒙行快三形态| www.671082.com-福利彩票开心奖结果| www.774834.com-苏州彩票快三| www.893572.com-乐彩网一分快3真假| www.964788.com-彩票表格下载| 大赢家彩票www.393411.com| www.mv10.com-我要中彩app| www.09hj.com-中国福利彩票假期| www.0462.net-河南福彩幸运魔方| www.8742.biz-南国彩票七星彩网| www.52555.cc-福彩内部人员微信群| www.058387.com-汤姆克兰西彩虹六号| www.167010.com-湖北福彩快三走势| www.275982.com-各种釉彩大瓶在哪儿| www.386038.com-天津七星彩开奖| www.529621.com-竞彩网首页赛程| www.635583.com-福利彩票税率| www.735658.com-七星彩中奖率是多少| www.857666.cc-怎么举报彩之源彩票| www.940035.com-海南体育彩票交流群| www.992997.com-喜乐彩票是什么| www.ky5.com-三分三块彩票合法吗| www.rh88.cc-百宝彩票网河南| www.38ba.com-河南福彩跑马中奖表| www.1130.vip-比赛中断竞彩怎么算| www.8926.wang-做时时彩代理犯法吗| www.59726.cc-彩虹代刷网克隆站点| www.029914.com-超简单的彩铅画| www.150619.com-新浪网首页彩票3d| www.320423.com-百宝体彩大乐透| www.397270.com-体育彩票与福利彩票| www.511670.com-体彩今天出奖结果| www.589975.com-海南七星彩规律预测| www.668384.com-彩票走势图全| www.874131.com-福彩布衣天下i| 亿彩彩票www.yi765.com| www.ds78.com-k彩天民福地| www.wo18.com-买彩票上瘾倾家荡产| www.20pr.com-福彩一定牛-| www.2168.net-恩施七彩野山鸡养殖| www.8273.org-彩票返水什么意思| www.88174.com-乐猫彩票下载| www.050928.com-足球竞彩结果| www.168735.com-湖北快三开奖走势图| www.263759.com-福彩快三买卖技巧| www.365695.cc-水溶性彩铅绘画教程| www.528270.com-彩神v外挂下载| www.653552.com-玖亿彩票下载| www.829572.cc-39彩票-| www.901903.com-甘肃快三玩法图表| www.981106.com-点彩鲜花-| www.ov98.com-福彩3d破解秘籍| www.1qk.com-江苏快三输了几万| www.64km.com-微信怎么买足彩| www.2195.com-福彩三d断组| www.7977.top-博彩众人什么意思| www.29891.cc-快三中奖信息| www.004893.com-二分快三计划| www.074762.com-彩富网48cfcc| www.142227.com-神童免费资料中彩网| www.219713.com-彩票投注策略| www.290611.com-大乐透走势图彩宝网| www.362876.com-法国彩票中奖号码| www.462393.com-中彩双色球500| www.552786.com-山东体彩中心位置| www.mk18.com-十大彩票排名| www.54rf.com-体彩金孔雀中奖率| www.965.me-怎样玩七星彩| www.9922.cn-2mm彩票-| www.47310.com-德州好彩快三平台| www.004314.com-竞猜足彩吧-| www.062396.com-老快三走势图360| www.185166.com-福彩快三彩票官方| www.258237.com-皇都彩票网-| www.331158.com-周易与彩票选号| www.441012.com-炫彩图片制作| www.526030.com-世界杯怎么竞彩竞猜| www.625795.com-湖北快三购买技巧| www.757208.com-彩色混凝土路面砖| www.862965.com-钢琴更多精彩小视频| www.930301.com-马来西亚生肖彩图| www.984363.com-鸣彩艺术官方网站| www.um9.com-安徽快三开奖500| www.sw99.com-7星彩开奖-| www.14xr.com-必赢彩票官网app| www.302.in-家庭彩票官司大战| www.3553.net-老虎机送免费彩金| www.8764.top-彩预测客户端| www.65475.com-炫彩灯-| www.087500.com-云彩app-| www.144784.com-易彩网时时彩平台| www.260944.com-竞彩官方网站| www.377976.com-体彩店电视机怎么装| www.509758.com-彩c16安卓版| www.578338.com-腾讯分分彩后二挂机| www.645213.com-富宝坛彩免费资料| www.771574.com-各类时时彩app| www.860763.com-河南福彩二二选五| www.981452.com-彩票返点怎么算的| www.mh3.com-彩票走势图分析方法| www.ou39.com-福彩3b开奖-| www.05os.com-彩铅萌宠形容词| www.0438.org-自己弄彩票网站| www.7774.in-八年购彩心得| www.24022.com-买彩票上瘾离婚| www.96213.cc-甘肃体育彩票大乐透| www.079973.com-彩票管理条例| www.187326.com-时时彩如何买最稳| www.285342.com-彩票数据中心| www.397495.com-飞来福彩吧app| www.538517.com-赢彩彩票靠谱么| www.633916.com-开封七彩集团幼儿园| www.732571.com-女孩订婚换彩礼钱| www.860397.com-昨晚大乐透彩票号| www.920108.com-苏州福彩快3推荐| www.976238.com-遵义订婚彩礼怎么给|