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.111022.cc-557彩票平台| www.08822.cc-克拉克博彩-| www.95144.com-彩票内部人员给号码| www.162169.com-c29彩票29登录| www.247313.com-上海体彩官网首页| www.538722.com-时时彩害人案例| www.618282.com-陕西体彩中心电话| www.701412.com-19042期足彩| www.804316.com-哪个网址能买彩票| www.884783.com-网彩快3app-| www.838596.com-彩色纸箱印刷企业| www.48178.com-庄家克星时时彩| www.ql16.com-福彩在线是正规的吗| www.5604.cm-晓风彩票程序源码| www.14515.com-彩票过年停几天| www.60181.com-福彩3d双胆分解| www.025523.com-大发购彩是真的吗| www.116095.com-被黑彩票平台骗了| www.184269.com-彩票开奖查询公告| www.440560.com-体育彩票摇奖有假吗| www.549868.com-彩播最新版本下载| www.649099.com-色彩雫最热门颜色| www.720756.com-如何下载彩票2元网| www.805782.com-彩票属行业-| www.885767.com-福彩管理中心电话| www.955193.com-凤凰彩票的规律| www.687186.com-福彩刮刮乐宣传语| www.737053.com-彩票代打平台| www.639563.com-怎么提高竞彩销量| www.782392.com-tt彩票网人工计划| www.871142.com-期乐彩走势图| www.ft12.com-中国福彩有五分彩吗| www.i47.link-福彩3d精选讨论| www.64cu.com-七星彩票论坛808| www.441062.com-手机炫彩字体| www.599128.com-港彩网投app下载| www.900259.com-爱彩乐专家荐号| www.973617.com-快三输了能不能回本| www.jl86.cc-彩票漏洞骗局| www.6gp.com-雷霆vs爵士彩票| www.365693.cc-彩票图片搞笑| www.cp3629.com-快三不同号有几个| www.th05.com-彩票十一选五玩法| www.20bs.com-福利彩票中奖诀窍| www.0802.cc-足彩胜负彩如何购买| www.6664.vip-手机上怎么购彩票| www.15355.com-妛客竞彩网-| www.69522.cc-凤凰彩票真坑人| www.544966.com-足彩过滤软件下载| 爱彩www.016ac.com| www.if74.com-哪个网站可以买彩票| www.k53.mobi-网赌彩票为什么输| www.942020.com-体彩竞彩佣金多少| 中国福利彩票www.6364z.com| www.07978.com-长沙体育彩票店| www.87897.cc-福利彩票千禧关注号| www.073208.com-彩票买哪个好| www.162175.com-彩乐汇快三是真的吗| www.509677.com-13亿彩票网站| www.607262.com-国外大奖中奖彩票图| www.696290.com-立体彩铅画作品| www.773352.com-1彩票app下载| www.34863.com-日本彩票开奖信息| www.302785.com-体彩上海快十一选五| www.653607.com-六彩票香港-| www.7138.cm-茶杯养出七彩| www.35693.com-福彩复式计算器| www.195393.com-江西福彩官网| www.328862.com-广西彩票客户端下载| www.397888.cc-乐彩01下载-| www.505992.com-许昌盛彩招募车主| www.582207.com-燕赵风采福利彩票| www.27817.com-国内彩票平台注册| www.943336.com-百胜彩票是什么网址| 500万彩票www.w697.com| www.4872.net-福彩怎么算才能中奖| www.18820.com-发彩网怎么玩| www.62144.com-体彩大赢家走势图| www.050181.com-福彩勇士争先规律| www.007570.com-体育彩票19084| www.17228.com-彩杏娱乐app| www.70360.com-彩票聊天切入点| www.381771.com-肥城体彩三亿大奖| www.506837.com-梦想彩票怎么样| www.566833.cc-如何爱快三二同号| www.18457.com-快三代理推广话术| www.77152.cc-任选九场竞彩网| www.024126.com-彩票乐三的玩法| www.090937.com-易购彩app-| www.22013.com-万豪彩票98-| www.73930.com-710彩票下载| www.260311.com-赌博买彩票-| www.983552.com-幸运时时彩走图| www.bb87.com-福体彩最新开奖结果| www.ue01.com-038彩票apk-| www.0294.cm-把彩票网站买倒闭| www.8989.live-彩票彩彩票开奖结果| www.56767.com-玖玖彩票-| www.95nk.com-多彩投怎么样| www.735110.com-e乐彩票官网下载| www.807700.com-潘向东中彩票| www.909608.com-猜单双是什么彩票| www.971233.com-彩c16app-| 必发彩票www.677879.com| www.483409.com-汉代点彩瓷器| www.050059.com-举报黑彩庄家| www.265458.com-宁夏快三和值走势图| www.wm62.com-微商中彩彩票| www.24rn.com-好彩投彩票店| www.279094.com-快三中什么是杀号| www.983365.com-内蒙古快三推荐红号| www.sj40.com-福彩快三属于哪个省| www.386917.com-幸运彩开奖最新结果| www.131217.com-彩礼68万违法吗| www.551239.com-彩宝店彩票-| www.613344.com-时时彩返奖率| www.675777.com-天下彩免费资料综合| www.737993.com-高频彩联盟官网登录| www.576453.com-必发彩票下载地址| 好运彩吧www.030238.com| www.11hy.com-彩票代购交易平台| www.780738.com-体彩5d的开奖号| www.877856.com-时时彩推波原理| www.955195.com-网络彩票时间差漏洞| www.998265.com-新开彩票平台送彩金| www.ci52.com-江西快三开奖结果| www.yt31.com-七星彩对数-| www.31yn.com-彩虹宝宝免费看| www.2285.in-天天送彩票官网下载| www.917221.com-福彩88是真的吗| www.975427.com-江苏快三是怎么控制| www.cp1031.com-j江苏快三计划| www.497658.com-中彩网杀号-| www.588587.com-七星彩什么叫做合数| www.671570.com-彩礼给一万一| www.t78.link-福彩双色球堆荐号| www.65ew.com-老杨说彩专栏| www.8783.xyz-五星竞彩靠谱吗| www.94920.com-彩票押大小骗局| www.085229.com-ios彩票计划软件| www.187602.com-五星彩票开奖| www.514208.com-彩票平台为什么黑钱| www.576939.com-人人中彩双色球| www.866611.com-昨天彩票出多少号| 乐彩网www.8424.com| www.594448.com-556677彩票-| www.006470.com-大发快三主赢软件| www.676608.com-牛彩彩摘网首页| www.943336.com-百胜彩票是什么网址| 350彩票www.350zf.com| www.578389.com-濮阳体彩中心电话| www.646991.com-足彩十四场投注技巧| www.736028.com-彩票什么玩赚钱| www.833775.com-彩票还是自选的好| www.894856.com-大发手机购彩| www.950969.com-中彩是骗局-| 凤凰彩票www.5091x.com| www.785997.com-苹果xr夜览与原彩| www.872593.com-福利彩票时时彩结果| www.937010.com-福星彩下载-| www.976642.com-重庆秀山结婚彩礼钱| www.043135.com-餐厅送彩票宣传语| www.256121.com-快三和值跨度图| www.222349.com-易彩快三辅助|