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天

知道了
彩票256平台 www.396234.com-星期三体彩开什么| www.fq57.com-贵阳市彩票中心| www.e99.space-体彩金七乐下载| www.68ti.com-酷彩3d相册-| www.2340.top-大信彩票网-| www.606505.com-周易彩票预测公众号| www.720997.com-超级团队彩票计划| www.180037.com-彩票出号绝密公式| www.296899.com-惠民彩票合法吗| www.377741.com-中华彩票网好看视频| www.489163.com-乐彩三b-| www.578122.com-体彩兑奖期限多久| www.660729.com-时时分分彩开奖号码| www.48428.com-体育彩票图片大全| www.047818.com-教我买彩票-| www.151028.com-3分快三官网开奖| www.222041.com-红牛腾讯分分彩计划| www.331642.com-买七乐彩票大发| www.412388.com-竞彩9场几点开奖| www.529987.com-时时彩最怕怎样买法| www.652595.com-快三选号软件手机版| www.731220.com-体彩佣金怎么算| www.194623.com-请把福彩三的早出来| www.125286.com-特区彩票论坛开| www.232630.com-福利彩票怎么玩| 众乐彩票www.387844.com| www.ri97.com-彩运8网登录| www.37xr.com-开封市结婚彩礼多少| www.0668.la-福利彩票换纸教程| www.7883.cn-好运来彩票聊天室| www.28369.cc-彩票大乐透怎么玩| www.576377.com-山西福彩十分| www.579021.com-福彩中奖分享| www.062222.com-万彩网快三合法吗| www.217083.com-贵阳福彩兑奖中心| www.322112.com-快三软件预测| www.395282.com-彩虹岛手游台服| www.058931.com-彩93下载-| www.276785.com-秒开彩票-| www.350149.com-博乐名游天天彩票| www.95132.com-明哥足彩-| www.098000.com-美国彩票种类| www.171487.com-湖北福彩网-| www.257909.com-038彩票ios版| www.331656.com-彩票技术分析方法| www.408610.com-七星彩投注平台搭建| www.535857.com-买彩票一组几位数| www.633553.com-七彩轻云app下载| www.699571.com-福彩3d字谜解释| www.268235.com-668彩票网真实吗| www.391088.com-天空好彩免费料大全| www.522120.com-老时时彩龙虎和计划| www.949104.com-三星福彩平台| www.tj11.com-广西快三预测软件| www.312.cm-赢彩赢每日资讯| www.7457.xyz-体彩审批手续| www.53679.cc-8k彩票一彩种| www.006676.com-五分⑥和彩app| www.069037.com-快三中奖彩票图片| PK彩票www.8499n.com| www.jw18.com-彩铅樱花-| www.994030.com-凤凰彩票怎样稳赢| www.js54.cc-福利彩票官网手机版| www.231159.com-234彩票下载安装| www.638932.com-体育彩票店面申请| www.448191.com-盛兴彩票网1| www.550101.com-彩票摇奖软件| www.622765.com-快乐网彩票平台| www.689121.com-齐鲁彩票开奖时间| www.gg63.com-日彩网快三是合法的| www.t24.xyz-支付宝顶呱刮彩票| www.62rz.com-下彩网平台网站| www.0411.org-彩票预测合法吗| www.8108.in-江苏快三彩票爱彩乐| www.30228.com-鸿彩网是不是诈骗| www.hx66.com-快三的投注技巧教程| www.z09.net-彩神v评价-| www.986646.com-首页竞彩网开奖| www.fj00.com-安徽快三计划精准版| www.f93.com-体彩排列三图谜汇总| www.37bh.com-福彩排列五哪天开奖| www.1041.vip-五分快三预测网站| www.7345.vip-彩六要挂加速器吗| www.20326.com-重庆实时彩平台| www.953.cn-买什么彩票简单一点| www.7666.ren-福彩总汇图-| www.31287.com-大家乐彩票app| www.72254.com-2565万彩票弃奖| 500彩票www.51515h.com| www.ly73.com-江苏快三规律| www.cp3155.com-福彩快三官方下载| www.29451.com-易彩娱乐-| www.008918.com-七星彩旱版专区| www.108676.com-中国彩票应用| www.444367.com-彩16在线-| www.11682.cc-彩乐汇app下载| www.87738.cc-搜索三b彩票藏机图| www.070989.com-易约约彩合不合法| www.135795.com-彩票打票员会很难吗| www.567.gg-时时彩怎样分辨虎龙| www.5475.me-彩虹世界下载安装| www.9929.org-中国福彩神牛嚼图| www.225957.com-天天中彩票骗局| www.2831.bid-重庆时时彩走势牛牛| www.85859.com-彩友多怎么注册| www.036867.com-有人知道彩票榜吗| www.108767.com-富贵彩害死了| www.189630.com-河南快三走势及预测| www.306252.com-彩6c官网下载| www.659634.com-多彩网字谜-| www.741013.com-28彩pc-| www.808997.com-怎么玩彩票-| www.877497.com-r8彩票平台怎样| www.933309.com-彩票回血规划| www.982414.com-鸿彩网正规吗| www.fl99.com-手机体彩-| www.wq08.com-2元彩票可有中奖的| www.987014.com-彩02彩票极速彩票| www.gm2.cc-快三开奖网站| www.pq69.com-福彩3d做号软件| www.r45.red-北京体彩排五预测| www.37fr.com-彩礼嫁妆怎么分配| www.082.loan-七星彩封机时间| www.4645.cm-彩票号段-| www.657613.com-澳客体彩开奖结果| www.718777.com-彩虹mp3下载| www.791404.com-排列三走势囹彩经网| www.854497.com-酷彩吧怎么下载伴奏| www.905006.com-有卖快三挣到钱的没| www.960112.com-泰安彩票弃奖| 中彩www.zc35.com| www.fk00.com-福彩端是真的假的| www.965574.com-u9彩票注册登录| www.qb49.com-彩票应用-| www.70sq.com-巴厘岛彩票注册| www.3954.org-最权威的足彩返还率| www.31aq.com-彩虹正版源码下载| www.741.cm-八百万彩票网| www.5199.in-下载彩友多-| www.118044.com-广东站中国福利彩票| www.529730.com-铁公鸡七星彩规律图| www.640421.com-彩票那回事-| www.714765.com-彩神争霸大发快三群| www.789956.com-福彩3d夜间字迷谜| www.871313.com-福彩快3线上平台| www.971397.com-007足彩论坛| www.950.bid-彩票的几种玩法| www.03156.com-333彩票网安全吗| www.44110.com-哪个app能买竞彩| www.599987.com-合买彩票1元| www.721915.com-新快三合法吗| www.795163.com-手机快三哪个平台好| www.891572.com-彩票推销文案| www.954734.com-一分钟快三猜单双| 3G彩票www.c133.vip| www.jt66.com-快赢彩票手机客户端| www.l84.net-c81彩票官方网站| www.31258.cc-易彩票二维码| www.201479.com-七星彩走势图彩经网| www.995493.com-91竞彩之家官网| www.eh11.com-正规网上购彩网站| www.441107.com-彩民胆拖中奖| www.531600.com-我要福彩3d-| www.682718.com-3d预测彩吧论坛|