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天

知道了
安徽快3 www.89ei.com-彩票版区创建直播| www.7668.pw-福彩宣传图-| www.34415.com-大众彩票官方网站| www.88442.cc-英国彩票大奖姓名| www.057725.com-福彩胆码和杀码| www.124553.com-高频彩票有没有漏洞| www.193675.com-手机怎么玩快三| www.262179.com-快三有作弊软件吗| www.476265.com-蚂蚁彩票网-| www.553711.com-竞彩足计算器| www.628213.com-福建体彩直播室| www.706974.com-深圳福利彩票转让| www.789336.cc-强势竞彩app| www.871608.com-福彩三地试机号预测| 大发彩票www.www.6hcczz.com| www.eo06.com-高频彩官网-| www.xe23.com-七星彩图规手机版| www.22xu.com-三分时时彩中大奖| www.0324.loan-826网络彩票论坛| www.7137.cc-彩宝价格排名| www.23139.com-彩票猜大小网址| www.69705.com-今晚七星彩下期预测| www.053139.com-快三一分钟开奖| www.134871.com-龙彩绘-| www.212815.com-时时彩开奖开结果| www.288748.com-快三遇到龙怎么办| www.394098.com-福利彩票什么是开奖| www.521441.com-鑫亿彩-| www.594578.com-优乐彩不能提现| www.669321.com-彩票单双大小统计器| www.751026.com-玩彩票上瘾了怎么办| www.824739.com-聚丰彩票网站| www.896288.com-玩彩网网址-| www.975521.com-苹果彩票彩apk| www.07qv.com-彩铅动漫古风图片| www.81bv.com-南昌体育彩票中心| www.2029.org-福彩3d中彩网顶测| www.8014.me-中班彩虹伞教案| www.57695.cc-12cc彩票-| www.039494.com-优彩社区怎么进| www.127504.com-彩虹世界男同软件| www.202304.com-福彩3d绝对布衣2| www.279433.com-时时彩票走势图| www.382068.com-点击精彩内容色在线| www.507292.com-彩运彩票网-| www.582065.com-悟空彩票论坛| www.656518.com-福彩博彩-| www.762394.com-彩票红包雨聊天室| www.850956.com-财神分分彩综合工具| www.918030.com-湖北快三走劳分市图| www.977730.com-豪彩vipapp| www.aw08.com-福彩五行绝杀码| www.se12.com-重庆时时彩停了吗| www.13cf.com-鼎盛彩票平台下载| www.83pf.com-彩票上扫码兑奖| www.1878.vip-稳赚体彩竞猜平台| www.7326.vip-彩虹系列无人机价格| www.22571.cc-万人彩票站-| www.62619.com-七星彩四码定位预测| www.070823.com-彩礼钱-| www.133822.com-绿好彩哪里可以买| www.208494.com-江苏快三100计划| www.279904.com-腾讯时时彩走势图| www.391720.com-福彩啤酒计划书| www.512744.com-卖福利彩票多少提成| www.581870.com-六、和彩免费资料群| www.654880.com-马来彩三分钟| www.757200.com-梦见自己买彩票中奖| www.841603.com-超级赛车彩票破解| www.910465.com-500竟彩网首网| www.972028.com-3d福彩彩圣字谜| www.ct4.com-快三中两个号| www.nv65.com-彩票输了7万了| www.4pq.com-福彩3d怎么看| www.59vf.com-单注彩票上限| www.0081.cn-福彩1d中奖多少钱| www.7766.hk-七乐彩五期选号技巧| www.27257.com-新宝彩票怎么样| www.68387.cc-鸿彩平台-| www.048062.com-大连福彩官网首页| www.130871.com-湖南省福彩电话| www.217764.com-幸运快三骗局| www.283880.com-体彩六位数-| www.381563.com-亿万彩票软件下载| www.500468.com-一分彩可靠app| www.566259.com-足彩三串三-| www.630404.com-3彩票开奖查询结果| www.696077.com-竞彩十四场开奖| www.772434.com-篮球博彩单节最高分| www.949870.com-彩票站电视怎么调| 虹彩集团www.hcjt4.com| www.ba24.com-在线购买江西快三| www.rf92.com-168彩票安卓下载| www.09mr.com-01彩票的计划| www.74ei.com-万彩吧真人预测| www.1272.org-七乐彩往期开奖号码| www.8932.biz-头头博彩体育| www.38537.cc-时彩下载手机版| www.79965.cc-快三怎么投注| www.026352.com-赢家彩票平台骗局| www.097101.com-福彩公益慈善基金会| www.158674.com-黑龙江福彩中心电话| www.281458.com-江苏虚拟足球e球彩| www.359526.com-微信买足球彩票| www.438602.com-分分彩杀号大全| www.522505.com-分分彩龙虎精准计划| www.585653.com-彩票双色球如何购买| www.653751.com-澳门有哪些彩票发行| www.771312.com-微信投资福彩快三| www.838401.com-安徽快三走势图一| www.899269.com-最新官网彩票平台| www.959835.com-福彩帮投-| www.997434.com-福彩自助投注机加盟| www.cp8383.com-福彩开奖快3| www.kn02.com-山东快三查询| www.zv94.com-竞彩彩票店限制| www.20va.com-体育彩票样票是啥| www.484.xyz-2元网彩票开奖查询| www.3516.biz-网易彩票网没圈子了| www.8328.biz-重庆时时彩五星计算| www.26066.cc-江苏快三赔率| www.61877.com-金多彩彩票网| www.044896.com-附近彩票销售点| www.125183.com-乐橙彩票app下载| www.188271.com-彩3彩票官网首页| www.253187.com-烈火时时彩软件| www.317719.com-体彩七星彩开奖公告| www.376332.com-安徽福彩中奖| www.526026.com-网络购彩恢复| www.600346.com-彩票可以多期投注吗| www.664086.com-福彩3d售票时间| www.727393.com-3d彩民乐钱树图库| www.790682.com-彩吧开奖助手| www.853811.com-云南时时彩开奖网| www.897741.com-网上买世界杯足彩| www.948674.com-彩票店一月销售额| www.983473.com-福利彩票领奖银行| www.rl09.com-河南福彩幸运彩规则| www.x12.org-随时赚彩票软件| www.40qj.com-为什么七星彩那么难| www.834.mobi-时时彩开奖结app| www.3908.com-海南七星彩投注系统| www.8833.link-体彩18014期| www.47680.cc-好彩妹结局-| www.83283.com-真正彩票高手是| www.026891.com-十三彩软件-| www.089229.com-3d中彩网北斗分析| www.139839.com-哪里可以下载盈盈彩| www.202288.com-快三胆拖怎么玩| www.266295.com-彩票入门与技巧| www.475586.com-福利彩票扫码摇大奖| www.544212.com-福彩第2版-| www.624365.com-金彩网安卓版下载| www.680822.com-彩票网站提现冻结| www.741717.com-南京彩旗快三走势图| www.799789.com-新手买什么彩票好| www.861342.com-体育彩票任三| www.910312.com-小小鱼彩吧图库| www.963295.com-彩宝网彩票手机版| 亿龍彩票www.1368b.cc| www.ac02.com-所有彩票开奖结果| www.nq08.com-福彩自选软件| www.1mp.cc-彩票平台可以对压吗| www.42pv.com-彩票双色球中奖查询|