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.4648.cn-买彩票从不输| www.41868.com-中华彩吧的网站| www.98687.cc-足彩10串9怎么算| www.077280.com-激光彩色复印机价格| www.157101.com-福彩快乐8官网| www.364558.com-e球彩总进球数规则| www.475368.com-彩票店招聘彩票员| www.566243.com-彩世界彩票官网| www.644854.com-青岛福利彩票双色球| www.777638.com-南方双彩安卓版| www.922672.com-人人中彩票跑路了| www.cai7644.com玩彩票一天赚一两千| www.ox06.com-福彩3d判断大小| www.07qb.com-彩铅古风场景图片| www.86mt.com-七级彩票-| www.3039.net-流晶逸彩-| www.8989.live-彩票彩彩票开奖结果| www.67233.cc-绵阳福利彩票中心| www.031180.com-彩票代玩真的嘛| www.116362.com-彩虹羽泉吉他谱| www.193631.com-快三怎么算中奖| www.273019.com-五分快三全天计划表| www.390608.com-生肖彩票网址| www.520101.com-财神爷彩票下载| www.595982.com-快三如何稳赚不赔| www.672608.com-彩云追星七星彩预测| www.754828.com-江西福彩中奖规则| www.866622.com-昨日福彩3d开奖号| www.937547.com-9851彩票-| www.984479.com-爱乐彩官方网站| www.ef07.com-福建体育彩-| www.xr50.com-身无分文买彩票| www.22no.com-天津福彩中心办公| www.848.red-小鹿网络时时彩工具| www.5443.in-梦见彩票号码能守吗| www.11476.com-澳客足彩下载| www.57041.cc-球彩app哪个好用| www.038083.com-喜盈门彩票-| www.127010.com-彩铅画图片风景卡通| www.206182.com-易彩网骗局-| www.279832.com-手机版时时彩开奖器| www.385502.com-天津时时采彩人工| www.510496.com-彩虹屁是啥-| www.584278.com-人人中彩票登陆不了| www.660917.com-海南体彩七星彩规律| www.773037.com-快三过滤缩水器| www.866686.com-昨天出的福彩号码| www.936828.com-增光溢彩-| www.992067.com-时时彩单期独胆技巧| www.aq2.com-河北福彩网-| www.ov91.com-e球彩玩法介绍| www.37.com-福彩3d报纸彩图版| www.71ez.com-时时彩斗牛娱乐注册| www.1387.xyz-牛彩双色球字谜| www.9907.tv-彩票开奖查询23期| www.78795.com-新彩网三d字谜总汇| www.030556.com-彩网cai5-| www.110311.com-彩票3d怎么买的| www.181377.com-彩票app哪个好| www.255169.com-买时时彩稳赢办法| www.330300.cc-福彩速查表图片| www.399638.com-sk彩票平台-| www.576242.com-分分快三输了很多钱| www.647296.com-七乐彩136-| www.744453.com-7星彩图片-| www.817581.com-杭州彩票快三| www.886641.com-随机彩票真能中奖吗| www.995024.com-5000彩票网-| www.ne8.com-一分快三走势图讲解| www.h16.org-网易彩票比分直播| www.38ue.com-七星彩排除码| www.0483.cn-体彩恢复网上购买| www.6809.org-足彩胜负彩玩法介绍| www.19181.com-福彩3d天牛彩吧| www.62616.com-华彩娱乐登录网址| www.030349.com-谁有淘彩票邀请码| www.103041.com-大奖彩票网址| www.169871.com-长春快三开奖号| www.325663.com-南国七星彩彩坛| www.394155.com-天下天空彩免费大全| www.525217.com-特彩吧高手报码| www.606651.com-取个好听的彩票群名| www.674689.com-纪检委查福利彩票| www.751025.com-彩票刮刮卡上瘾| www.820052.com-河南郸城县彩礼| www.889912.com-彩票123官方下载| www.955488.com-体育彩票店销量排行| 名门彩www.33997h.com| www.dj80.cc-福彩网是真的假的| www.ue85.com-快乐彩怎么玩| www.03nw.com-福彩aa牛彩会| www.71du.com-梦见买彩票没买成| www.1082.vip-分分彩害人不浅| www.00961.com-彩吧论坛牛材网图库| www.52423.cc-亚博体彩-| www.94552.com-足彩皇冠信用我| www.051561.com-福彩3d网上的购买| www.143317.com-手机彩票做号软件| www.217631.com-五星彩开奖号码| www.285454.com-北京福彩快三怎么玩| www.381462.com-体彩19037-| www.497518.com-首彩红酒-| www.563853.com-松岗东方亮彩在哪里| www.629281.com-咨询彩票-| www.679373.com-重度彩民怎么自救| www.737186.com-彩票智能机选| www.792895.com-买的彩票兑奖去哪里| www.866453.com-七星彩计算公式教程| www.926511.com-彩票达人app| www.971197.com-七乐彩买的人多吗| www.wv48.com-何明七乐彩预测| www.09fa.com-爱购彩票软件安全吗| www.73rm.com-彩票倍投逻辑陷阱| www.0890.shop-3d彩宝贝专家字迷| www.8310.in-大彩黄鹤楼-| www.26838.cc-新浪彩票电脑版老版| www.65768.com-彩票选号模拟器软件| www.031961.com-中国体育彩票开奖号| www.101911.com-彩狮计划-| www.160735.com-广州福彩站-| www.257621.com-乐米彩票官方网站| www.324255.com-乐彩站能提现吗| www.383129.com-天天赢彩票真假| www.513824.com-彩票网站安全吗| www.577533.com-七星彩专家预测准号| www.637842.com-竞彩网络销售| www.735580.com-手机时时彩票下载| www.800081.cc-陕西体彩开奖结里| www.869249.com-七星彩如何网上买| www.957797.com-帝王彩色马桶| JJ彩票www.20016.cc| www.bq90.com-至尊彩快3软件下载| www.ri75.com-自己做庄5分快三| www.09ez.com-703com彩票| www.67vm.com-什么是彩钢瓦| www.0088.loan-秒秒彩长期盈利心得| www.7096.cn-昆明七彩阳光教育| www.15788.com-油性彩铅画星空教程| www.53629.cc-时时彩万能码使用| www.92198.cc-中国体彩篮球计算器| www.039584.com-广州东方快三正规吗| www.149443.com-51中彩官网-| www.279285.com-吉林快三微信群严打| www.356531.com-酷彩吧是什么| www.423778.com-三国里的星彩是谁| www.513382.com-口袋彩票被禁了| www.574062.com-今期跑狗彩图片| www.635251.com-时彩有规律吗| www.751089.com-彩票软件邀请码| www.806297.com-好彩双爆珠香烟价格| www.870794.com-广东福彩好彩1| www.948550.com-福利彩票那天开始| www.981424.com-竞彩任选九开奖时间| www.xf.com-彩票倍投-| www.lf45.com-彩29app官方| www.a11.com-福利彩票图标意义| www.19gh.com-网上买卖彩票合法吗| www.445.pw-福彩双胆预测号码| www.3547.top-分分时时彩网页计划| www.8110.cn-彩票最长兑奖期限| www.21369.cc-网上带领买彩票| www.57731.com-彩票中奖票样展示图| www.032891.com-福彩通邀请码| www.097776.com-微信带玩快三|