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天

知道了
亚洲28 www.017596.com-六亿彩票网-| www.155807.com-总彩票心得-| www.279863.com-五分时时彩开奖网站| www.382151.com-彩票怎样买中豹子| www.519786.com-众彩股份股票| www.603041.com-茄子玩彩虹六号| www.686837.com-快三开奖技巧| www.770077.com-七彩文鸟-| www.925404.com-拓彩真瓷美缝剂| www.984072.com-c99彩票平台登录| www.yt12.com-怀化市体彩中心地址| www.35za.com-中国福利彩票的类型| www.0540.cn-下载中国体彩报| www.7846.com-体彩胜负彩吧| www.32587.com-订婚退彩礼案例| www.82528.com-足彩场次安排| www.045518.com-117彩票下载| www.172158.com-彩票开奖结果往期| www.268890.com-丹麦快乐彩开奖号码| www.366166.com-海底世界彩铅画高清| www.474847.com-福彩字迷图总会| www.565560.com-易彩网五分快三计划| www.647611.com-彩票店中奖后感想| www.775992.com-彩乐网c.49pw| www.873124.com-贵阳市彩票机转让| www.960326.com-买彩票而穷漫画| 大赢家彩票网www.630155.com| www.kn41.com-极速时时彩开奖历史| www.p60.biz-香港有快三吗| www.52dg.cc-简单创意色彩画| www.0337.com-彩票对码是什么意思| www.9658.xyz-3d开奖彩宝网| www.56128.cc-皇家彩世界官方网站| www.006484.com-山东体彩手机查询| www.082662.com-宝马博彩登录| www.153771.com-七星彩往期中奖查询| www.282294.com-9码也赢不了时时彩| www.375991.com-欢乐彩app苹果| www.505822.com-曝光彩票黑平台| www.583001.com-39福利彩票走势图| www.661795.com-亚洲杯竞彩神单| www.778240.com-福彩复式怎么玩法| www.876371.com-福彩3d断组-| www.953046.com-湖北福彩快三| 彩之家www.04czj.com| www.ed08.com-高频彩违法么| www.xi64.com-优乐彩怎么下载| www.22fb.com-大发快三专业带回血| www.4773.biz-彩虹六号女鬼黄图| www.07603.com-彩500网址-| www.53947.cc-体育彩票站利润| www.002379.com-福彩七星彩玩法介绍| www.081517.com-网络福利彩票合法吗| www.153830.com-七星彩怎么中奖| www.305344.com-体彩店能买双色球么| www.380220.com-七乐彩号码预测专家| www.520703.com-上期福彩中奖号码| www.595809.com-华夏彩要是什么| www.676864.com-万彩吧六开彩奖资料| www.758666.com-网上微彩是合法的吗| www.880301.com-2元彩票网排列五| www.956095.com-总是买彩票什么心态| 澳客彩票www.108ak.com| www.dy14.com-亿彩彩票骗局揭秘| www.wj78.com-世界杯彩票-| www.16kj.com-号百彩票安卓版下载| www.978.cm-七星彩两个号码| www.7173.cn-福彩双色球彩票应用| www.24011.com-大发彩票可信吗| www.67315.com-战神彩票团队| www.050491.com-黑彩坐庄咋处理| www.133088.com-世界杯网上购彩| www.211642.com-网络快三是合法的吗| www.285670.com-彩票助赢软件靠谱吗| www.391923.com-256彩票时时彩| www.515693.com-彩天堂黑钱了吗| www.587619.com-c8∵cn万彩吧| www.663111.com-印尼5分彩技巧| www.761344.com-好彩香烟1871红| www.881957.com-宝盈三分彩全天计划| www.956086.com-玩彩心态-| www.996457.com-佬牛足彩解盘| www.uz6.cc-马来三分彩官方开奖| www.qu24.com-崔永元谈彩票| www.07go.com-彩铅牡丹配色| www.77dw.cc-一分彩票网-| www.1453.blue-彩虹的约定下载| www.9568.in-哪种彩票最可信| www.50057.com-阳光彩票代理注册| www.94056.com-彩色耐磨地坪漆| www.055415.com-体育彩票哪个比较好| www.161772.com-美国纽约快三查询| www.280036.com-省福彩中心在哪里| www.372451.com-彩票背后写名字| www.475813.com-彩票46分解式| www.558580.com-高级彩虹屁文案| www.625235.com-全民彩票是什么意思| www.695587.com-福彩3d类型走势图| www.771691.com-宝马集团彩票| www.903879.com-彩票竞猜金豆领取| www.967354.com-快三万能码使用技巧| 9号彩票www.80767v.com| www.fn03.com-竞彩足球赛-| www.wq20.com-奥客网足彩比分直播| www.14dn.com-湖北快三牛一定| www.1029.wang-广东11选五爱彩乐| www.7474.wang-彩票818手机下载| www.22378.cc-足彩十四场-| www.63379.cc-订婚要彩礼吗| www.037052.com-成化斗彩薄胎瓷| www.121916.com-河北省福彩快三玩法| www.190632.com-乐购彩票正规吗| www.257322.com-微彩吧被骗-| www.324395.com-彩票第一把手| www.392003.com-销售彩票计划书范文| www.554274.com-体育彩票店广告词| www.618128.com-福彩投注站管理办法| www.683004.com-彩一彩票开奖| www.759116.com-彩薇花官网-| www.911995.com-聚华体彩店app| www.965171.com-博彩租卡-| 幸运彩票网www.33598q.com| www.da23.com-彩票争霸官网| www.tc12.com-彩色资料-| www.19vq.com-彩仙阁挂机说明| www.96qz.com-彩排的本意是| www.2596.cn-时时彩网络诈骗案例| www.7771.net-万彩宝-| www.22115.cc-足彩工作室招聘| www.63110.com-体彩十一选五任选一| www.060480.com-彩要平台-| www.132762.com-世界杯彩票网| www.204891.com-内蒙古快三开奖直播| www.269053.com-933彩-| www.368140.com-儿童彩铅画芒果| www.451259.com-彩票到底造没造假| www.533905.com-即开型彩票开店| www.630083.com-新浪彩票佬牛| www.691186.com-手机如何买足球彩票| www.761175.com-体彩小站宝怎么注册| www.852810.com-大同彩票平台登录| www.911433.cc-公益福彩图片| www.959892.com-彩票兼职赚佣金| www.999638.com-福利彩票走势大全| www.le.com-宁夏福彩快三下载| www.li52.cc-306官方彩票下载| www.a56.top-中国彩票程序下载| www.20ng.com-彩票头奖在哪领| www.586.date-极速时时彩真的假的| www.3934.top-女方彩礼钱法律规定| www.8670.in-大发快三如何买豹子| www.48700.com-87升级版云彩店| www.86714.com-好彩频道直播回放| www.055519.com-彩票组号技术交流吧| www.180033.com-体彩网比分-| www.239112.com-河北快三夸度走势图| www.304002.com-快彩在线是什么情况| www.365279.cc-云顶彩票官网| www.439123.com-黑龙江体彩中心位置| www.521656.com-时时彩万能码视频| www.582951.com-易盈彩票是哪里的| www.649833.com-彩虹跑的意义| www.796094.com-彩票预测选号神器| www.861683.com-关注彩票开奖查询|