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.23ku.com-快彩123下载| www.3039.vip-逸彩庭园-| www.9703.vip-体育彩票出球顺序| www.72718.com-彩界精英独胆双胆| www.042699.com-福彩3d的宣传标语| www.134379.com-福体彩开奖话题页| www.218660.com-台北快三投注技巧| www.300073.cc-网易彩票时时彩| www.380163.com-乐彩牛彩网网| www.540981.com-79彩票-| www.684768.com-新浪网彩票电脑版| www.771358.com-彩虹6号怎么说话| www.867854.com-七星彩位置-| www.976100.com-竞彩狂人-| www.ib81.com-河北快三形态图片| www.c88.net-河南体彩网电脑扳| www.38bn.com-订婚礼金和结婚彩礼| www.0731.la-刷彩赚佣金客服| www.7582.vip-手机徽信买3d彩票| www.28732.com-cc彩球网登录| www.75337.com-竞彩8串56多少钱| www.029917.com-福彩快三苹果版| www.111398.com-五分时时彩人工计划| www.189643.com-快三河南-| www.265989.com-一分快三全天计划网| www.427203.com-福彩专家双胆预测| www.529358.com-体彩店装修-| www.629019.com-彩票聚合咨询门户| www.707581.com-被大发彩票骗| www.788340.com-19052足彩推荐| www.868058.com-南国体彩4十1| www.970787.com-怎样破解彩票| www.cai608.com-快三助手推荐号| www.kv96.com-3d彩报吧-| www.l57.com-81彩下载官方下载| www.46sa.com-山东申请竞彩店| www.946.me-365彩票网下载| www.5485.vip-家彩网胆码胆码预测| www.16126.com-网咯彩票怎么玩| www.60583.com-爱彩乐11选五安徽| www.081719.com-彩票万能-| www.148027.com-排列五长条彩版| www.251123.com-彩店宝彩票app| www.324223.com-7彩骗局-| www.403048.com-河北福彩好运3| www.511812.com-手机话费怎么买彩票| www.585501.com-乐彩大乐秀走势图| www.661866.com-竞彩串关对应表| www.801748.com-江苏福彩试机号| www.877949.com-福彩快三首页| www.964170.com-彩乐乐杀和值尾| 500万彩票www.566668.com| www.ik04.com-彩500app下载| www.zm79.com-彩神ii邀请码| www.29va.com-长春体育彩票过户| www.0602.org-500彩票有规律吗| www.6954.net-破网络私彩诈骗案| www.20793.com-竞彩误差值怎么看| www.62881.cc-彩经网排三定胆推荐| www.038621.com-手机彩票万彩吧开奖| www.127331.com-彩客比分直播网首页| www.199999.com-经彩网彩票开奖| www.273259.com-福彩与慈善-| www.376797.com-福彩3d走试图查询| www.497444.com-13彩平台下载| www.567356.com-南京中彩票大奖| www.635987.com-机甲旋风彩虹| www.795926.com-彩票可不可以算卦| www.872079.com-贵阳市体彩中心主任| www.950652.com-乐彩vip打不开了| www.992179.com-江苏快三改版| www.cp8158.com-易彩快3开奖规律| www.nb96.com-江苏福彩快三开奖查| www.1rx.com-福彩十二选五规则| www.57av.com-彩票预测千里马| www.0147.wang-七彩色排序-| www.8078.cm-鹰创意水彩-| www.28003.cc-1688彩票提供| www.70245.com-福彩票网上怎么买| www.050301.com-在黑彩打工是犯罪吗| www.130843.com-长沙体彩中心| www.201475.com-彩71下载-| www.271127.com-76c彩票app-| www.369604.com-七星彩小精英图版| www.461422.com-彩票黄历预测今天| www.546735.com-开福利彩票站的要求| www.649028.com-博彩澳门网站| www.730261.com-万诚彩票-| www.798914.com-竞彩足球胜平澳客网| www.872219.com-都匀福彩中心在哪里| www.956143.com-速盈彩票平台怎么样| www.997981.com-福利彩票三粒走势图| www.xb.cc-甘肃彩票快3图表| www.mr94.com-k彩下载app下载| www.w57.cn-743好彩资料| www.46vp.com-今期财富报彩图| www.463.mobi-兰州新区彩虹城商铺| www.4189.tv-福彩双色球机选器| www.9257.biz-陕西福彩提现不到账| www.69097.com-k8彩票官网-| www.023802.com-澳客彩票客户端安卓| www.092085.com-三分钟彩票-| www.151643.com-官方时时彩怎么玩| www.254031.com-时时彩反倍投技巧| www.319788.com-彩民福地登陆| www.383249.com-网易的买彩票靠谱吗| www.519052.com-彩票是谁研究出来的| www.583851.com-彩票连线走势图| www.652727.com-穷人买彩票的故事| www.754529.com-想买彩票买什么号码| www.834196.com-好彩双爆焦油量| www.896731.com-彩票网站代理| www.959401.com-河北快三出号统计图| www.999851.com-福彩之家走势图| www.vf.com-中彩网3d走势图| www.lw72.com-好彩3开奖号码查询| www.d52.com-123彩票网络平台| www.25wm.com-福彩了3d交流群| www.821.in-可以直播卖彩票吗| www.4370.me-微信玩彩票-| www.9263.online福彩老年公寓隆德路| www.52817.cc-好彩投网站登录| www.91957.com-广东彩王铁塔图库| www.044744.com-彩票图今天三的| www.136913.com-武汉体彩店转让| www.205091.com-多乐彩开奖号码江西| www.271874.com-快三外挂软件管用吗| www.368100.com-彩铅怎样配色| www.449795.com-襄阳体彩在哪里兑奖| www.535895.com-身边中彩票大奖| www.628837.com-什么是极速快三| www.691728.com-什么是平台彩| www.761953.com-大发时时彩后二计划| www.849005.com-新加坡官方福彩| www.905843.com-亚愽彩票-| www.954071.com-超级时时彩缩水手机| www.988214.com-玩掌中彩怎么样| www.cp620.com-彩票争霸ⅱ-| www.jn34.com-快三输钱报警管用吗| www.yr05.com-山东福彩网官方网站| www.13ho.com-彩乐乐好彩一| www.75hk.com-重庆足彩在哪儿领奖| www.0996.net-九万彩票官网| www.9559.top-买彩票一共几位数| www.41078.com-app中彩网-| www.78798.cc-福彩3d绝密解码| www.024451.com-内蒙古福彩aqq| www.088328.com-699彩票ios版| www.140354.com-海南海口七星彩早版| www.208210.com-湖北福彩快三输钱| www.272089.com-立彩助手官网| www.487543.com-福彩3d今日说彩| www.553555.cc-彩票包抄法-| www.608027.com-格莱贝彩金手链价格| www.668416.com-福彩图谜图库总汇| www.730381.com-玩彩经验-| www.789905.com-乐福彩三地-| www.853839.com-万彩动画大师作品| www.897451.com-竞彩足球旧版| www.947734.com-彩票作弊软件| www.988231.com-国家批准的网上彩票| www.cai6733.com上海时时乐彩| www.ih76.com-体育彩票足球竞彩| www.xf94.com-正版好彩客app|