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天

知道了
500彩票竞猜 www.878.in-重庆时时彩止损技巧| www.071618.com-金口诀占卜彩票| www.175126.com-正彩彩票-| www.256792.com-彩报正版大花猫预测| www.328096.com-微彩吧是真的吗| www.394244.com-彩虹六号新手教程| www.500394.com-皇都彩票彩种| www.567269.com-乐视彩票开奖| www.577874.com-万家乐彩票平台网站| www.769745.com-网络彩票提款被拒绝| www.os00.com-百度贴吧彩票| www.800281.com-福彩福彩开奖结果| www.988377.com-副利彩票开将结果| www.ip59.com-竞彩500篮球| www.14zl.com-快彩王推荐代码| www.659149.com-快乐彩怎么看开奖| www.846563.com-福利彩票双色球案| www.pu87.com-彩票极速赛车骗局| www.0041.cn-彩票是多少位数| www.70666.cc-口袋彩票店铺| www.505035.com-澳洲快乐彩假不假| www.673077.com-七星彩7注一等奖| www.826993.com-如何确定彩票店真假| 爱彩www.004ac.com| www.wg49.com-智慧彩挂机软件官网| www.9612.biz-排列五分析凤彩网| www.693345.com-东森彩票-| www.198413.com-1分快三数字规律| www.531357.com-澳门全天彩-| www.283913.com-6个数字的彩票| www.57171.com-友宝彩票-| www.255906.com-如何下载彩富网| www.756573.com-竞彩缩减单-| www.946.me-365彩票网下载| www.9465.shop-美国有哪些彩票| www.92938.com-岩棉彩钢板价格| www.100230.com-怎么买福利彩票| www.268280.com-发彩网首页-| www.579684.com-甘肃福彩快三玩法| www.370386.com-用彩铅画动漫人物| www.11je.com-体彩和值最大遗漏值| www.884900.com-彩神网赌-| www.459548.com-彩票1516-| www.92975.com-众博彩票平台app| www.959314.com-竞彩168-| www.294059.com-彩票走3d-| www.cc23.cc-爱彩乐彩票湖北快三| www.802412.com-玩彩票输钱能报警么| www.988905.com-家彩网3d试机号| www.yj64.com-c彩38-| www.108577.com-买彩票可以致富吗| www.013994.com-佰万彩票系统下载| www.68116.cc-最牛时时彩计划软件| www.224929.com-五分快三怎么投注| www.2352.win-七彩虹主板重装系统| www.929729.com-七星彩网-| www.470399.com-体彩店怎么买足球| www.35081.com-天空彩免费资料大| www.059167.com-福彩3d直播-| www.8xc.com-中国体育彩票生意| www.36690.cc-澳门有彩票吗| www.299989.com-彩中彩网-| www.182149.com-皇都彩票邀请码| www.061688.com-天天彩票兔兔向前冲| www.031877.com-买全球足球彩票| www.cp192.cc-玩快三怎么才能赚钱| www.110490.com-鸿运彩票是合法的吗| www.649196.com-澳門理工博彩| www.800690.com-福利彩票有快三吗| www.143.cc-夸人厉害的彩虹屁| www.959257.com-青岛彩票中奖排行榜| www.68953.cc-盈彩吧邀请码| www.842896.com-中国彩票刮刮奖批发| www.qm9.com-官方彩10分快3| www.983772.com-吉林快三规律口诀| www.230128.com-共享彩票网站| www.237635.com-福利彩票手机购彩版| www.s92.cc-福利彩票中奖记录| www.1615.vip-澳门5分快三| www.79593.com-真人真事足彩博客| www.17aj.com-球探彩票正规吗| www.711273.com-彩票诈骗破案案例| www.160090.com-江苏利彩快三| www.536572.com-越南彩票类型有几种| www.941449.com-怎么寻找彩票客户| www.011088.com-手机彩票zucp| www.327697.com-百度福彩开奖号码| www.616957.com-龙虎彩票下载| www.108510.com-传影和彩影-| www.766825.com-广东体彩app| www.008317.com-肥城彩票-| www.300200.com-今晚南洋彩开奖结果| www.nz3.com-江苏快三怎么买稳赚| www.957125.com-2044彩票下载| www.x98.net-彩运快三专区| www.626354.com-彩生财-| www.738387.com-福利彩票阳光探码图| www.010026.com-彩票频道123| www.736967.com-彩票代打下注兼职| www.852608.com-时时彩开奖有假吗| www.06gu.com-吉林快三小乔预测| www.373863.com-500w彩票软件| www.35vw.com-小白彩票怎么推广| 500彩票www.372477.com| www.762242.com-内蒙快3彩经网| www.218628.com-快三的平台有哪些| www.352762.com-七彩乐今日开奖号码| www.333655.com-玩彩票wcpcc| www.633546.com-竞彩篮球玩法说明| www.b67.club-人人购福彩-| www.971934.com-乐彩网双色球首页| www.369092.com-体彩排例三开奖| www.28549.com-彩票带计划群| www.xo12.com-七星彩号码-| www.086583.com-聚祥泰彩票机| www.777208.com-福彩3d相年富图迷| www.981727.com-亚博体育彩票违法吗| www.230920.com-招彩票代玩是真的么| www.n36.net-体育彩票机选机率| www.0288.net-彩票业主心得与总结| www.282436.com-小鹿多彩开奖网| www.782673.com-双色球杀号百度乐彩| www.013336.com-星期三买什么彩票| www.w13.cn-体育彩票猜世界杯| www.8824.cc-彩票全-| www.500255.com-最近的体彩售卖点| www.131694.com-豫彩通功能-| www.410086.com-如何解冻彩票账号| www.571599.com-网络上买彩票合法吗| www.687093.com-体彩顶呱刮中奖图片| www.146168.com-阿里巴巴福彩是什么| www.802077.com-牛彩网英雄看胆| www.77216.cc-105彩票合法吗| www.744998.com-大赢家彩票网站首页| www.76304.com-澳门福乐彩开奖结杲| www.147235.com-时时彩4星平刷大底| www.736721.com-福彩全麦必中解太湖| 500万彩票www.39500d.com| www.71po.com-买彩票搞笑说说| www.024749.com-体彩中了-| www.167383.com-人人快三投注平台| www.843896.com-福彩题库-| www.ni8.com-308彩票app-| www.682083.com-微信上购彩票中奖了| www.963357.com-七乐彩31有奖吗| www.k78.net-立彩彩票追号计划| www.3197.bid-33彩票安卓版下载| www.31991.cc-体彩店app-| www.369451.com-福建省彩票网| www.276637.com-快三中奖几率计算| www.726708.com-天天彩选四最新开奖| www.870339.com-分分钟开奖彩票| www.9107.vip-黑客门彩美-| www.77939.com-彩票走势图规律| www.217128.com-快三一个号码怎么组| www.550108.com-优彩环保啥时候上市| www.897456.com-今晚足球竞彩| www.205715.com-一分快三计划app| www.663990.com-时事彩五星公式| www.850258.com-截止前买彩票| www.174520.com-福彩快三网上投注站| www.194665.com-河南跑马彩-| www.076118.com-彩票红旗-| www.592390.com-南方双彩缩水工具|