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.173596.com-内蒙快三专家推号| www.336839.com-今天甘肃快三走势图| www.89722.cc-足彩19034-| www.091777.com-百合网彩票-| www.220523.com-彩神平台可以破解吗| www.328311.com-彩名堂计划软件下载| www.85455.cc-碰碰运气选彩票号| www.088526.com-代玩福彩快三犯法吗| www.188000.com-福彩彩种-| www.290579.com-体彩彩票怎么玩| www.369853.com-云彩店邀请码| www.510210.com-福利彩票站利润| www.660632.com-足彩信息爆料| www.734368.com-凤彩网预测排三| 500彩票www.914077.com| www.319033.com-体彩天下-| www.501763.com-一一一彩票平台| www.600284.com-一元彩票软件| www.672053.com-彩票行业整顿| www.746238.com-禁止网络售彩通知| www.840813.com-福彩在线怎么玩的| www.910119.com-天空彩高手抡坛| www.971085.com-福彩刮刮奖骗局| www.61255.cc-彩99新版-| www.023609.com-匕乐彩推荐-| www.130724.com-因为彩礼放弃你男人| www.198670.com-福彩十选五官方网站| www.608484.com-快三组合图案分析| www.777272.com-如何网购福彩| www.961466.com-500万的彩票种类| www.199029.com-体育彩票怎样买法| www.108347.com-彩票类-| www.646056.com-彩票大发玩法| www.495954.com-如何看彩票图| www.636366.com-彩虹棋牌比鸡挂| www.775453.com-彩票一般买几注| www.898489.com-福彩扫一扫-| www.997914.com-乐彩图表工具图| www.qo76.com-河北福彩快3遗漏表| www.4875.biz-九千万彩票平台功能| www.22759.com-我要下载宁夏快三| www.77202.com-七星彩头奖概率| www.029864.com-彩票频率-| www.108957.com-七彩鱼全品种| www.288799.cc-神彩福牛双色球预测| www.444894.com-彩20.ai-| www.798193.com-app易彩乐官方| www.911551.com-三亚彩票犯法吗| 大赢家彩票平台www.232775.com| www.yb92.com-天津五分彩开奖结果| www.443299.com-福彩3d大花猫彩报| www.686411.com-3000万彩票| www.813086.com-彩票兼职诱骗| www.939303.com-千万彩票下载安装| www.741101.com-澳门彩报一-| www.975364.com-时时彩跨度规律| www.cp925.com-北京福彩快三一定牛| www.uw71.com-今日福彩3d总汇| www.183332.com-手机购彩合法吗| www.ni1.cc-彩票开奖大乐透预测| www.n00.biz-怎样黑进彩票平台| www.0802.vip-宝盈彩票登录| www.078982.com-七星彩计算器360| www.245684.com-中国体育竞彩网首| www.345073.com-彩神通会员四码下载| www.455490.com-聚彩手机网址导航| www.701902.com-中国竞彩网唯唯看球| www.088480.com-千万彩票下载安装| www.272139.com-乐彩33众飞-| www.466673.com-洛杉矶国际快三下载| www.611767.com-真实的彩票代购| www.684578.com-最棒的彩票平台源码| www.769048.com-好彩网是真是假| www.862282.com-体彩排列五开奖厉| www.928760.com-彩票77软件疼牛| www.987939.com-仲彩娱乐登录| www.ia47.com-容错个数彩票| www.02zi.com-快乐双彩开奖结果查| www.266940.com-快三最新邀请码| www.138070.com-各种彩票app| www.237329.com-嘉兴体育彩票| www.319585.com-新星彩网-| www.034937.com-网上有几个彩票平台| www.992234.cc-重庆时时彩定位软件| www.ko46.com-大发快三彩票首页| www.82ol.com-彩票3d算法公式| www.680732.com-8亿彩苹果下载| www.557076.com-vr彩票下载-| www.639404.com-体育彩票机器| www.716325.com-彩铅画古典美人| www.797181.com-天津时时彩直播群| www.882644.com-093彩票规定| www.949820.com-7乐彩票-| www.999492.com-彩票课程-| www.ci08.com-彩票网站平台| www.yz09.com-福利彩票25期开奖| www.42ta.com-微信上的中华彩| www.6034.cc-好听的彩妆店名大全| www.094174.com-彩报图·库-| www.214566.com-达人彩票能相信吗| www.298289.com-体彩店装修图片大全| www.519422.com-256net彩票网| www.909088.cc-澳门十二生肖彩| www.984730.com-中国福利彩票现主任| www.cs17.com-有大发快三的彩票| www.vt97.com-彩票中奖的灵异事件| www.31oq.com-抖音彩虹滑梯在哪| www.2176.shop-帝泰七彩影城影讯| www.8188.online8炫彩自助彩票终端| www.52732.cc-55彩票网页版本| www.876779.com-彩票任三技巧数字| www.202.hk-兔子彩铅画图片大全| www.523026.com-福彩3d便民工作室| www.629088.com-88爱彩登录-| www.739321.com-竞彩网点-| www.857608.com-全民娱乐买彩安全吗| www.949536.com-盈彩吧网址-| www.fy4.com-时时彩技巧心得大全| www.396420.com-釉中彩瓷碗有毒吗| www.539580.com-釉上彩茶具套装| www.08gh.com-彩票1号店app| www.81df.com-体彩5加2范围| www.459499.com-足彩妖刀专家推荐号| www.37353.com-购彩网是什么意思| www.93937.com-竞彩收米动态图| www.044806.com-928彩票官方网站| www.137340.com-牛牛彩票网骗局揭秘| www.up6.cc-彩票计划神器| www.9445.cc-体彩牛彩网图谜总汇| www.lj06.com-2020彩票平台| www.26bv.com-长春溢彩洗浴| www.265376.com-快三多久开一次奖| www.556981.com-3d彩票网上购买| www.643722.com-购彩堂用户登录| www.718798.com-福彩快三推荐代码| www.777361.com-易盈彩票简介| www.832075.com-122彩票-| www.893622.com-彩票内蒙古快3今天| www.zf90.com-福彩3d速查表图片| www.365458.cc-彩铅画乡村风景教程| www.538292.com-彩票停卖了吗| www.667879.com-福利彩票球偷换案件| www.751051.com-彩票巴巴是合法的吗| www.755721.com-安全购彩网站| www.856171.com-注册送彩金可提现| www.491302.com-福彩3d真经布衣图| www.775348.com-中彩神是骗人的吗| www.831293.com-福彩主任什么梗| www.896671.com-彩票小程序-| www.953843.com-牛牛网彩票靠谱吗| 600万彩票www.312522.com| www.444534.com-彩票怎么看中奖号| www.ay9.cc-五百万彩票网| www.4532.biz-福彩双色球第35期| www.509378.com-利彩机械-| www.570720.com-福彩排列四开奖号码| www.33700.cc-彩票跟好计算公式| www.077155.com-买三位数的彩票| www.335989.com-体育彩票数字范围| www.023608.com-免费看彩票指南报纸| www.132171.com-彩礼法律规定六万| www.194652.com-福利彩票三d走势图| www.259044.com-快三单双最多连几期| www.837252.com-l立彩-|