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.4734.xyz-打彩票不给钱怎么办| www.45255.cc-99彩票是骗局吗| www.99007.cc-时时彩斗牛规律| www.079938.com-上海一彩-| www.155843.com-辉煌彩票注册网址| www.319397.com-江苏快三二同推荐| www.397931.com-七星彩局王奖表| www.537518.com-有彩色系包括| www.626173.com-祥金祥彩票登录| www.701899.com-体彩福建-| www.786788.cc-福彩网刷流水| www.871703.com-苏州福彩中心在哪里| www.977063.com-18071期足彩| www.of.cc-宁夏福彩快三72期| www.pp38.com-湖北快三实时分析| www.04bc.com-长春市怎么抓黑彩| www.79jr.com-彩票有中了的吗| www.1990.cn-pp彩票能取现吗| www.8024.net-彩宝彩票官方| www.31972.com-快发彩票app下栽| www.80579.com-天天买彩票app| www.038477.com-今天彩票图片大全| www.188374.com-安徽快三是不是诈骗| www.268131.com-福彩3d奖金计算表| www.369188.com-尼彩大屏智能手机| www.473439.com-河北体彩网中奖查询| www.560724.com-七乐彩缩水工具| www.630655.com-网上购彩官方网站| www.706116.com-彩票网兼职是真的吗| www.790568.com-幸运快三最多连几期| www.869600.com-七星彩画板-| www.990659.com-8199cc彩票网| www.bt4.com-珠江彩票是真的假的| www.pc24.com-北京快三稳赚技巧| www.00ec.com-印度乐透彩开奖结果| www.73qb.com-8g彩票快充中心| www.1573.top-七星彩名字选号| www.9400.vip-马来西亚博彩招人| www.49877.com-华宇彩票安全不| www.95314.com-金什么彩票-| www.060045.com-爱彩乐网页版| www.219884.com-体彩排列五开奖时间| www.295190.com-快乐彩票下载安装| www.365603.cc-幸运彩票6-| www.454939.com-江苏快三犯法吗| www.548189.com-幸运28彩票怎么玩| www.669671.com-四位数的彩票是啥| www.750313.com-全民彩票免费下载| www.818679.com-惠州市福彩兑奖地址| www.890278.com-彩计划app最新版| www.959041.com-转让体彩机-| 500彩票www.50052w.com| www.gp47.com-河南彩礼标准| www.zc37.cc-大发快三的运算公式| www.26oz.com-58体彩出兑哈尔滨| www.0470.mobi-亚洲彩票网页| www.6988.tv-幸运时时彩历史开奖| www.19599.com-5分时时彩走势图| www.62108.com-微信购彩app下载| www.032606.com-赛马直击赛果及派彩| www.108543.com-速赢彩为什么总是输| www.175623.com-彩票平台网-| www.277837.com-香港快三彩票下载| www.361148.com-新浪彩票定位走势图| www.446455.com-彩票网租-| www.536611.com-今天七乐彩几点开奖| www.628060.com-广东体彩下载软件| www.697240.com-快速七星彩机选号码| www.774566.com-七星彩获奖规则| www.895049.com-网络快开彩合法吗| www.954082.com-体彩竞彩胜平负开奖| www.995886.com-彩店宝彩票官方网站| www.aa2.com-银川福彩-| www.nc38.com-福气快三彩票| www.z96.cc-彩票国际信誉大平台| www.52du.com-重庆快乐十分开彩报| www.929.cx-外国数学家破解彩票| www.7564.cn-重庆时时彩平刷漏洞| www.23237.cc-国彩是骗局吗| www.63987.com-澳洲三分彩人工计划| www.035135.com-体育彩票竞彩宣传语| www.121716.com-有没有彩票的qq群| www.188967.com-vip彩票安卓版| www.255542.com-七星彩开奖号码结果| www.325827.com-下载查看万彩吧资料| www.396299.com-体彩星期四有开奖吗| www.556644.com-复式投注七乐彩图片| www.621035.com-极速三分彩-| www.687612.com-陕西彩票app下载| www.761290.com-广东手机彩票网| www.863571.com-境外彩票api接口| www.924002.com-新手怎么买福利彩票| www.980712.com-彩77绿茶网下载| www.jz60.com-中国福彩网官方网| www.zx81.com-线下体彩店app| www.25ea.com-周公解梦七星彩查码| www.423.net-飞翔竞彩吧-| www.3771.win-彩吧vip下载网址| www.8965.biz-如意彩票人工计划| www.52735.cc-七彩西游记全集| www.93882.cc-河南快三号码分布图| www.047770.com-贵州爱彩乐-| www.139616.com-什么什么众彩| www.209349.com-福彩排5开奖号| www.279856.com-胜负彩500w-| www.446510.com-七星彩研究理论| www.530942.cc-时时彩后三杀条件| www.617138.com-广东彩礼钱-| www.679321.com-玩彩票成瘾怎么办| www.750452.com-豪彩投计划-| www.813245.com-重庆寸时彩开奖视频| www.878751.com-彩票的积分卡号| www.978795.com-南通彩票-| www.cai2911.com快三胆拖怎么回事| www.ix25.com-江苏体彩e球彩直播| www.yu37.com-中国彩票和美国| www.14pw.com-排五走势图彩经网| www.263.me-重庆时时彩团队| www.3070.com-彩神江苏快三计划| www.8038.top-水彩森系少女| www.22501.com-玩彩平台可靠吗| www.59100.com-彩易网app-| www.039353.com-优彩网官网登录| www.120333.com-体彩图谜第二版| www.180932.com-今日中彩-| www.247029.com-彩票分析师收入| www.311351.com-快开三分彩-| www.372552.com-梦到彩虹周公解梦| www.456190.com-梦见死人打什么彩票| www.536626.com-2d福彩中奖-| www.663640.com-大众彩票网登录| www.728668.com-体彩排列三图谜| www.791224.com-排列3彩经网预测| www.857640.com-盈彩网计划-| www.912174.com-海南买私彩-| www.966620.com-腾讯五分彩是国彩吗| 500彩票网www.65707b.com| www.dc71.com-足彩团队招聘| www.so08.com-七乐彩内部预测| www.09mr.com-01彩票的计划| www.67ov.com-福彩3d小军第五版| www.0220.in-爱心彩中国彩票| www.7286.org-彩虹4-| www.15477.cc-绍兴体彩网阳光征召| www.52444.com-凤凰彩票购彩平台| www.89266.com-来彩彩票o2o| www.035081.com-有倍率高的彩票网站| www.145833.com-足球竟彩计算器| www.222954.com-浙江快乐彩开奖结果| www.284802.com-重庆时时彩规则调整| www.366389.com-油性彩铅品牌| www.443468.com-愽马彩票下载| www.523439.com-幸运中福彩下载| www.603203.com-中彩走势图-| www.661700.com-2010世界杯足彩| www.750170.com-公牛网站彩票骗人| www.794198.com-怎么举报黑彩票| www.843556.com-福彩公益语-| www.885062.com-快彩安卓下载| www.984246.com-吉林快三开奖一定牛| www.on6.cc-买江苏快三的技巧| www.mq57.com-福彩12选5开奖号| www.k83.top-玩赚彩票官网| www.26xt.com-重庆时时彩彩500|