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.869388.com-七星彩有规律吗| www.739944.com-22彩票网下载| www.882205.com-彩90彩票-| 大赢家彩票平台www.106517.com| www.140026.com-贵阳福彩网站| www.389488.com-有没有人要福建体彩| www.790682.com-彩吧开奖助手| www.209958.com-高频彩平台出租| www.351325.com-数字团测彩-| www.521438.com-彩票预测诈骗| www.659054.com-好运来重庆时时彩| www.856675.com-广西福彩开奖结果| www.989255.com-福直3d彩吧助手| www.h67.in-福利彩票走势图| www.0714.com-彩票投注站好申请嘛| www.284563.com-时时彩规则及奖金| www.058212.com-彩票网cpw-| www.9287.cn-福彩3d概率统计| www.96360.com-甘肃体彩11选5开| www.157166.com-易彩票app合法吗| www.532903.com-天牛图库3d彩报| www.790601.com-快三推荐代码| www.961887.com-时时彩单双大小规律| www.hb45.com-彩民彩票app好吗| www.385.website赌时时彩的下场| www.fi85.com-福彩3d论坛乐彩网| www.971804.com-创彩网兼职-| www.397114.com-云南快三骗局| www.48fd.com-七星彩开奖走势| www.552879.com-彩票选号聪明组合| www.7570.cm-深圳东方亮彩地址| www.025754.com-佳木斯喜乐彩开奖号| www.220677.com-体彩开奖号码查询| www.627713.com-彩票上市公司排名| www.890321.cc-合肥福彩中心在哪| www.312778.com-网易彩票客户端| www.528460.com-福州体彩31选7| www.823628.com-彩镀锌板-| www.960129.cc-七星彩票送彩金| www.036835.com-彩票开奖360安全| www.737211.com-更多精彩内容| www.127327.com-c798彩票-| www.293526.com-河南福彩百度网| www.819199.com-广西福彩投诉电话| www.961430.com-竞彩猫杨震微博| www.fj56.com-内蒙古三快三推荐| www.30099.com-下载彩票网-| www.023801.com-今期的彩票指南报纸| www.878217.com-3d牛彩网图谜总汇| www.88hu.com-新天成彩票网| www.083156.com-500彩坑人-| www.798298.com-海南福彩额度| www.209956.com-凤凰网彩票合买| www.34897.com-购乐彩合买大厅| www.985180.com-竞彩足球淘汰赛平局| www.5410.cc-1519彩票app| www.865671.com-3d福彩论坛手机版| www.06do.com-德国彩铅品牌| www.9398.cn-国外彩票工作| www.111769.com-东方太阳彩票| www.23xl.com-还出售的网络彩票| www.757.com-时时彩和值预测计划| www.4411.biz-贩卖私彩构成什么罪| www.9338.bid-彩票1千本金| www.37537.cc-六开彩票届六| www.556562.com-私彩平台的开奖结果| www.681736.com-豪彩平台-| www.790533.com-体彩快三11选5| www.310653.com-官方彩网址-| www.826580.com-家彩网p3开奖结果| www.982714.com-九号彩票-| www.mt12.cc-体育e球彩下载| www.129.org-led幻彩控制器| www.395775.com-抖音彩虹鸭-| www.863590.com-黑客更改彩票余额| www.cp495.com-浙江快三开奖号码| www.lx20.com-老平台彩之家| www.01101.cc-江苏福彩网论坛| www.09190.cc-山东福彩公众号| www.301229.com-苹果北京快三助手| www.565339.com-彩票平台合法吗| www.024405.com-500万彩票可靠吗| www.53uc.com-彩票营销攻略| www.3662.net-今晚彩票会出什么| www.099831.com-福彩三天必出胆码| www.hr95.com-彩票走势新浪网| www.555025.com-宝马博博彩论坛| www.dk99.cc-大吉彩票-| www.8501.shop-易彩娱乐注册账号| www.113650.com-利彩助手追号计划| www.05724.com-彩61真的吗-| www.112543.com-彩票源码手机版| www.221946.com-七星彩出奖结果今天| www.338229.com-谦禧彩票-| www.552347.com-神彩黄金液危害| www.697233.com-彩票查询七星彩单式| www.092791.com-松原快三开奖走势图| www.397495.com-飞来福彩吧app| www.859092.com-u588发发彩-| www.981243.com-网上做兼职彩票| www.jt8.com-快三大小单双公式| www.i58.xyz-上海快三最大遗漏号| www.74rd.com-福彩主任死刑| www.455551.com-中奖彩票故事会| www.599875.com-体彩点能买双色球吗| www.705866.cc-福彩3d天牛彩吧| www.806816.com-彩票老师带我回本| www.608606.com-71彩票天天送钱| www.872507.com-四川体彩兑奖流程| www.356.in-997彩-| www.024704.com-竞彩双平怎么打| www.751604.com-360彩票买不了| www.2627.in-外国合法彩票网站| www.32864.com-彩票驿站首页| www.657263.com-中国福彩消消乐| www.739977.com-福彩3d今天什么号| www.938969.com-网络足彩单场在哪买| www.cai5672.com江苏快三助手下载| www.32uj.com-搜索昨天福利彩票号| www.136957.com-附近哪有福利彩票店| www.308239.com-中福快三走势| www.06sd.com-彩铅手绘画花彼岸花| www.324726.com-体彩排列三图库| www.451511.com-买彩票用哪个软件好| www.593153.com-彩虹的重力-| www.td94.com-投注快乐时时彩b盘| www.397723.com-七星彩长局表| www.626179.com-金祥凤龙版彩票| www.156262.com-好彩堂2232-| www.675297.cc-百福利彩票开奖结果| www.cp0202.com-福利彩票快三走势图| www.05bn.com-幼儿彩铅画动物图片| www.600066.cc-买彩票运气很重要吗| www.12319.com-伯爵国际彩票骗人| www.018843.com-旭彩美缝剂批发| www.136337.com-广西体彩官网兑奖| www.284911.com-竞彩足球混合| www.604242.com-688彩票审核| www.172664.com-内蒙古快三开奖结| www.088539.com-吉林快三盘系统| www.389664.com-有云购彩票是真的吗| www.490828.com-宏达彩票购买中心| www.34308.com-儿童彩铅画图片| www.74246.com-武大彩虹旗事件| www.ee35.com-未来实体店彩票前景| www.99667.cc-体彩选3开奖号码| www.090063.com-彩票站经营思路| www.1598.vip-懂彩帝苹果下载软件| www.22221.com-河南彩民中大乐透| www.238955.com-网上买彩票骗局套路| www.7vy.com-农民工错过彩票大奖| www.251387.com-人人中彩app下载| www.313562.com-百胜快三平台| www.378075.com-幸运彩票应用软件| www.449976.com-我该买什么彩票| www.521823.com-和彩云是什么| www.569635.com-下彩票提款被拒绝| www.621781.com-关於台湾彩券| www.675119.com-全部快三软件安卓版| www.758700.com-大发快三全天计划群| www.816939.com-中彩票福报八字| www.878392.com-安徽快三三同号预测| www.932821.com-网易163彩票| www.974567.com-众彩娱乐平台登录|