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.71537.com-手机验证码就送彩金| www.619008.com-济南体彩中心地址| www.628034.com-开门彩是什么意思| www.707318.com-河南体彩283规则| www.00.net-体彩去哪买-| www.97oj.com-973彩票-| www.4032.org-独家七星彩小七靓码| www.06607.com-安装福彩3d彩票| www.917138.com-彩虹代刷网授权| 旭彩www.565378.com| www.pu45.com-a1彩票-| www.qg54.com-好彩柠檬爆珠| www.983570.com-贵州快三投注模拟| www.gh24.com-什么是一分快三| www.a42.top-风彩彩票怎么样| www.09789.cc-九亿彩票平台| www.933735.com-彩票指南电子报| www.997325.com-c58+彩票-| www.fx82.com-快乐彩12选5胆拖| www.zz23.com-福彩标识图案| www.37zy.com-彩铅画水滴详细教程| www.67344.com-武汉福利彩票中奖者| www.047068.com-下载288彩票| www.151517.com-中彩网手机买彩票| www.255950.com-玩时时彩最稳的玩法| www.334382.com-彩票提现多久到账| www.666696.cc-足球彩票的大品牌| www.779876.com-青蛙彩票开桨直播| www.872370.com-江西福彩自助| www.949534.com-百盈彩票登录网址| JJ彩票www.22010.cc| www.774416.com-3gnba彩票-| www.855940.com-时时彩大数据规律| www.926858.com-数字达人社区彩票| www.983814.com-离我最近的彩票店| www.sa12.com-红旗彩票群-| www.wh73.com-彩票最新开奖查询| www.806499.com-中国足球竞彩怎么玩| www.722097.com-山东体彩论坛网| www.94kg.com-众益彩ios下载| www.977899.com-国家竞彩网-| www.ga8.cc-彩票规律破解图片| www.115767.com-小马3d彩乐乐| www.219390.com-一分快三算号神器| www.688058.com-彩票天天中安装| www.150703.com-数字彩票双色球奇偶| www.409808.com-北京彩色透水地坪| www.246837.com-中彩擂台赛-| www.961140.com-云南好彩快三| 超级彩票www.m.cjcp200.com| www.sk88.cc-时时彩无损刷流水| www.27nx.com-网彩快三-| www.55221.cc-福彩黑幕视频| www.13179.com-辽宁体育彩票大奖| www.69801.com-易彩车饰-| www.4811.cc-时彩平台招人要求| www.18923.cc-福彩安装-| www.41xl.com-彩色透水地坪价格| www.729217.com-北京快三截止几点| www.832790.com-彩虹qq定位版| www.910023.com-彩界之首-| www.976351.com-49彩票是骗人的吗| www.io46.com-腾讯5分彩计划| www.48tv.com-天下免费彩票| www.0088.biz-五洲彩票是真的假的| www.59326.cc-福彩双色球开奖顺序| www.zl6.cc-河南彩素481| www.525006.com-什么彩票外挂最稳定| www.765176.com-黑彩都有哪些玩法| www.888813.com-快乐5分彩开奖号码| www.973212.com-彩虹app生成| www.cp323.com-老谢说彩-| www.rr86.com-浙江有七星彩吗| www.53hz.com-福利彩票双色球二| www.om51.com-福彩走势图综合版| www.12ra.com-统一彩票骗局| www.92ov.com-c九彩票-| www.2228.cm-网上兼职投彩诈骗| www.4am.com-彩票查询快乐十分| www.83vo.com-乐彩3d字谜图迷| www.1795.com-中彩啦可靠吗| www.870940.com-体彩6+1中奖规则| www.961431.com-湖北福彩3d日报| 500彩票网www.897030.com| www.843306.com-国家快开彩票新规| www.928788.com-百乐彩客户端下载| www.982638.com-鸿彩app怎么样| www.qw87.com-香港时时彩网址官方| www.591386.com-澳门彩票官网| www.680157.com-福彩迷恋网络| www.761514.com-贵州福利彩票下载| www.029954.com-赛车时时彩计划软件| www.17ap.com-中国体育彩开结果| www.6804.cc-数字三彩票中奖绝技| www.18955.com-安徽快三爱乐彩| www.949702.com-休育彩票开奖| 中彩网www.91233x.com| www.0507.cc-广西七乐彩开奖结果| www.979253.com-好彩蓝莓价格| www.20rb.com-山西福利彩票开奖| www.2600.com-爱淘彩平台-| www.029128.com-亿彩是正规平台吗| www.632883.com-福彩3d2d怎么打| www.718759.com-有关彩虹的美好寓意| www.654631.com-江西省体彩-| www.906301.com-长春打击黑彩| www.977871.com-足彩在哪里买| www.cai3677.com河南福彩22-| www.of78.com-彩票481开奖查询| www.985388.com-今晚关小刀足彩推荐| www.cb36.com-黑彩做庄技巧| www.619418.com-搞笑彩票图片大全| www.703297.com-彩票福彩选号软件| www.984264.com-鸣彩传媒总监| www.tl3.cc-今日体彩开奖号| www.vx41.com-时时彩平台出租骗局| www.07pb.com-彩铅画虹之玉教程| www.wx35.cc-福彩七乐彩预测结果| www.50cw.com-竞彩篮球稳赢| www.358763.com-彩客网开奖结果| www.87xp.com-威发彩票兼职| www.1980.la-pp彩官网-| www.329208.com-七星彩梦册查码大全| www.3jb.cc-京彩挂机怎么用| www.92dj.com-购彩平台注册邀请码| www.3659.cm-奇门遁甲预测彩票| www.8881.com-竞彩8串1和8串8| www.325411.com-下栽彩计划-| www.399511.com-南国体彩开奖直播| www.535223.com-彩票一般是几位数字| www.sf14.com-山东彩票玩转双色球| www.76.la-易发彩iso-| www.79dd.com-足球彩票小说| www.353567.com-网上京彩平台正规吗| www.556147.com-体彩和福彩造假| www.982351.com-下载旧版爱乐透彩票| www.fy85.com-五星彩app-| www.yz09.cc-福彩3d四码的应用| www.32za.com-随时赚彩票ios| www.98va.com-彩票33官网注册| www.12999.com-网络彩票赌博的新闻| www.114048.com-福彩三d走势图软件| www.739874.com-福彩888预测3d| www.983905.com-九九彩官网-| www.cl82.com-淘彩票大发快3秘籍| www.62yc.com-彩票网站怎么维护| www.0570.tv-快三计划加-| www.7049.cm-属马买彩票中一千万| 豪彩VIPwww.6fk.com| www.867862.com-七星彩两期相似号| www.915280.com-福彩3b天齐网字谜| www.962269.com-彩神vii注册| www.995841.com-好彩商城彩票软件| www.am59.cc-七乐彩走势图表| www.pj12.com-新浪竞彩-| www.273561.com-彩票案于海最终结果| www.503089.com-红彩网直播网站| www.703629.com-福利彩票几点关门| www.800486.com-不懂彩票怎么买| www.971454.com-彩票巴巴app| www.f12.site-七乐彩中奖分布图| www.794.in-福彩双色球新浪专家| www.372687.com-手机下注彩票| www.601096.com-把所有彩票都买一次|