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.443653.com-七星彩票开个奖结果| www.582530.com-ok58福彩信息港| www.664824.com-彩票复式多少钱一注| www.751034.com-九彩彩票-| www.824173.com-郑州福彩电话| www.892142.com-福彩快乐彩22选1| www.965121.com-5oo彩轻聊版| 361彩票www.361560.com| www.mz75.com-58代玩彩票兼职| www.2eq.com-体育彩票好干不| www.938956.com-网易竞彩单场专家| www.cai2759.com安快三开奖结果查| www.ol52.com-快三走势图电脑版| www.770066.com-博彩广告站-| www.900112.com-22彩票去哪里下| www.986783.com-篮彩比分直播网| www.gq05.com-哪里可以买快三彩票| www.4676.org-彩票30号-| www.196566.com-彩票开奖秋-| www.816776.com-时时彩追热号技术| www.21402.com-5亿彩怎么玩| www.020479.com-竞彩足球彩票玩法| www.100386.com-金狮彩票是不是真的| www.s51.cn-西宁福利彩票中奖| www.89vq.com-彩吧排三试机号| www.900614.com-注册就送彩金的网站| www.1452.xyz-下载个大赢家彩票| www.972094.com-优优彩票网站正规吗| www.cw89.com-16年私彩平台| www.04ds.com-彩票搜索-| www.93ap.com-彩票性缘下载网盘| www.x35.me-快三下期预测| www.62xt.com-义乌福利彩票双色球| www.0287.xyz-彩票有追杀吗| www.vq73.com-我要看安徽福彩| www.056667.com-七星彩大奖梦册| www.602933.com-时彩万位杀号方法| www.574795.com-彩票网预测-| www.085630.com-福建快三昨天走势图| www.179986.com-快三秒奶茶店| www.wy7.cc-内蒙快三走势| www.yd87.com-好彩官方版-| www.535895.com-身边中彩票大奖| www.7029.cm-体育篮球彩票| www.088278.com-澳客彩票全部版本| www.54ct.com-甘肃彩票中奖| www.7268.net-彩虹6号无人机视频| www.92qw.com-福彩30选5开奖| www.03184.com-掌优彩票下载安装| www.843825.com-彩票中心工作人员| www.921716.com-f彩网app-| www.983897.com-1980彩下载-| www.dc63.com-国家认证足彩分析师| 彩票500万www.cp500.biz| www.873749.com-福彩选四开奖结果| www.gr36.com-一定牛彩票下载安装| www.504761.com-节目彩排的作用| www.622766.com-湖北福利彩票点查询| JJ彩票www.47370.cc| www.851.mobi-福建省彩票中心主任| www.767695.com-3d字谜新彩网吧| www.54910.com-元角分厘毫模式彩票| www.045033.com-体彩481玩法体会| www.603679.com-梦见在彩票店| www.514223.com-王牌彩票是做什么的| www.378171.com-彩虹六号电脑配置| www.597927.com-足彩一等奖14场| www.671119.com-福彩3d如何选胆| www.738628.com-58.cc赢彩网| www.827713.com-佳缘彩票骗局| www.897075.com-uu彩票直播平台| www.970325.com-刮刮彩有刮中的吗| www.373050.com-光大彩票手机版平台| www.627785.com-双色球字谜乐彩网| www.771902.com-时时彩刷漏洞真的吗| www.887181.com-网上彩票是真的吗| www.963007.com-彩铅花卉图片| www.cp9192.com-彩中彩app-| www.682205.com-买足彩哪个网站正规| www.147957.com-黑龙江福彩网p62| www.440295.com-排三跨度振幅彩宝贝| www.050336.com-手机qq怎么买彩票| www.129741.com-3d中奖彩票新闻| www.6866.biz-海南体育彩票乐吧| www.285210.com-时时彩为什么改时间| www.233099.com-重庆试试彩app| www.251065.com-爱彩彩票下载地址| www.jx56.com-河北今日快三开奖| www.yv59.com-世界最高彩票| www.954172.com-七星彩开奖预测| www.690181.com-福彩三d历史试机号| www.ky63.com-苹果彩票网手机版| www.583027.com-体彩排列三有规律吗| www.52ra.com-利彩是什么意思| www.768551.com-彩票中大奖怎么领取| www.874674.com-亚博彩-| www.944205.com-胜负彩十四场| www.995564.com-通过社交软件福彩| www.bt55.com-派彩网手机版| www.cx66.com-时时彩哪个网站正规| www.295283.com-彩票送彩金优惠活动| www.008279.com-周五开奖彩票| www.262581.com-广西快三开奘结果| www.9288.com-乐彩交流平台| www.0099.cm-6118彩票网站| www.242866.com-体育彩票中亿元大奖| www.539202.com-阿里彩票下载安装| www.672745.com-竞彩篮球联比分直播| www.402567.com-鑫彩国际这个软件| www.74jv.com-环球一号彩票靠谱吗| www.18ml.com-乐彩10102-| www.129.bid-彩虹屁英语-| www.2971.biz-福彩第一时间藏机图| www.7847.biz-快三开奖吉林快三| www.904909.com-中国足球彩票网| www.0694.cm-彩票机换纸视频| www.004657.com-竞彩足球可以胆拖| www.38357.com-彩票优惠活动| www.734545.com-凤彩网双色球字谜| www.637127.com-彩虹六号不同版本| www.757299.com-体彩87-| www.856955.com-福彩3d字谜汇总图| www.930371.com-福彩3d规律-| www.870262.com-广西快乐双彩走势图| www.5223.cc-快三红号有几个| www.148318.com-百胜快3彩票坑人| www.097822.com-福彩3d中奖多少钱| www.539481.com-昆明彩票店承包| www.295579.com-十分快三是什么意思| www.16kg.com-蜻蜓广播天天福彩| www.38683.cc-彩乐瀑官网下载| www.329181.com-彩票送38元开户金| www.9999.biz-华彩赢家严校长| www.329009.com-3b福彩正版藏机图| www.573585.com-彩胜团队微信号| www.229332.com-093彩票网址| www.021826.com-足彩微信交流群| www.189863.com-快三开奖结果一定| www.392172.com-福彩三弟开奖号码| www.865942.com-购福彩方法-| www.912925.com-体彩三d排列五| www.961665.com-从手机怎么买彩票| 彩票大家乐www.21202m.com| www.262848.com-湖南福彩中心新地址| www.804146.com-会员登录8g彩票| www.875365.com-手机买彩票能中奖吗| www.926606.com-彩票软件暂停销售| www.970658.com-红旗彩票导师微信| 500彩票网www.790991.com| www.691022.com-足球彩app-| www.869252.com-彩票服务中信| www.960129.cc-七星彩票送彩金| www.009040.com-彩票网站入侵教程| www.763359.com-快彩乐走势图| www.879956.com-内蒙福彩中心在哪里| www.026761.com-易彩票骗局-| www.689709.com-95彩票靠谱吗| www.12336.com-国际彩票网站| www.661133.com-62彩票会员中心| www.00184.com-国彩是黑平台吗| www.549605.com-欧冠足彩玩法| www.659386.com-七星体彩开奖号| www.724772.com-福彩3d选号王预测| www.784024.com-彩票犯罪-|