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.755782.com-中彩在线邮箱| www.3374.hk-足彩加软件怎么样| www.24464.com-彩铅星空画-| www.012216.com-凤彩网双色字谜总汇| www.088981.com-南国彩票论坛4+1| www.26ri.com-2323彩票走势图| www.628202.com-玩彩票有赢家吗| www.698579.com-黑龙江体彩6十一| www.771698.com-重庆时时彩游戏圈| www.856012.com-重庆时时彩还存在吗| www.933170.com-手机上玩快三犯法不| www.986428.com-上海基诺彩票开奖| www.cp9619.com-湖北快三电视走势图| www.lq45.com-如何在中彩网买彩票| www.zs47.com-七星彩单式中奖规则| www.86599.cc-聚丰彩票下载手机版| www.8566.vip-彩票m5快3-| www.26285.cc-彩吧p3图第三版| www.60195.com-天津福彩2d玩法| www.99946.com-河口彩客化学怎么样| www.056620.com-福彩快3真的假的| www.132419.com-平顶山彩礼-| www.219556.com-福彩3d彩吧图| www.047318.com-甘肃快三技巧顺口溜| www.174422.com-三分快三计划网| www.270065.com-帝王彩app-| www.353597.com-苏国京彩票重启| www.434576.com-彩山特曲39度6瓶| www.530765.com-体彩p3有试机号吗| www.612669.com-d8彩票计划网| www.695923.com-合肥福彩网-| www.773756.com-时时彩平刷法网页| www.872743.com-腾讯分分彩-| www.947790.com-中国彩吧2019| 乐彩www.lczg4.com| www.ky67.com-9彩彩票下载安装| www.z94.club-神彩网论纭-| www.65vi.com-七乐彩带线走势图| www.1853.biz-皇冠彩票柬埔寨| www.8785.top-移动端彩票-| www.xc72.com-中国福彩最新政策| www.878768.com-彩票的规律计算法| www.1oi.cc-鸿运彩票网址是多少| www.91zw.com-汇佰彩票是骗局揭秘| www.4534.vip-19020期七星彩| www.06565.com-高价收中奖彩票| www.55282.com-时时彩对码买法| www.053964.com-赌快3黑彩受害的人| www.108537.com-速盈彩平台-| www.329938.com-牛彩网牛彩吧| www.477586.com-手机3d彩神通| www.595106.com-好彩网3d字谜今天| www.693690.com-955彩票官网| www.916205.com-致富彩票主页| www.qa1.com-大发快三大小规律| www.13pg.com-巩义福彩-| www.90ns.com-博彩类app-| www.3688.gg-预知彩票-| www.8814.cm-阿里彩票2018| www.282894.com-准提咒求财中彩票| www.394103.com-今天福彩推荐号| www.572622.com-时时彩网彩计划| www.820854.com-七星彩新浪走势图| www.911843.com-时时彩大神交流贴吧| www.cp844.cc-易彩的app咋下载| www.vr13.com-快三交流微信群| www.31vr.com-星期五体彩开什么| www.7281.cc-儿童画彩虹的图画| www.46676.com-时时彩平台免费出租| www.030891.com-中国福利彩票中奖| www.668028.com-乐米彩票和乐优彩票| www.788612.com-乐彩网友论坛| www.880592.com-百胜彩票登录| www.cp477.com-湖北快三地开奖结果| www.pl24.com-体彩北京快3走势图| www.21uf.com-梦到买彩票号码| www.1820.com-依彩化妆品套盒图片| www.33307.cc-福彩3d奖金对照表| www.77036.com-新浪胜负彩九场推荐| www.662912.com-福利彩票中奖双色球| www.741258.com-730彩票网址| www.813438.com-3d福彩电脑板| www.881435.com-青海福彩快三app| www.947427.com-新彩吧网络图迷画迷| www.988432.com-全中彩票官方下载| www.ar37.com-彩35-| www.ui32.com-彩客网胜平负| www.08ao.com-七星彩txt书包网| www.75fl.com-查福彩试机号码| www.2974.org-东京28彩票-| www.9368.club-博猫彩票改名| www.281224.com-中体彩网开奖| www.364377.com-世界杯期间网络彩票| www.476588.com-全民福彩智投| www.553873.com-赢彩计划苹果版下载| www.629778.com-多彩乐吉林快三| www.692319.com-私彩开奖时间差| www.761632.com-甘肃快三变动咨询| www.823579.com-彩涂钢板型号规格| www.898841.com-福彩门户网址书签| www.958349.com-发大财彩app| 惠民彩票www.hmfc8.com| www.gz33.cc-518彩票app-| www.85tx.com-彩票代打输了| www.2453.com-金钱豹彩迷会| www.81848.cc-时时彩五码遗漏| www.130730.com-狂人时时彩后二技巧| www.276607.com-彩之源合法吗| www.zc09.com-甘肃福利彩票陇彩宝| www.266182.com-河北省快三统计图表| www.520661.com-李彩琳闭幕式歌曲| www.cai5675.com分分快三平台| www.729242.com-3d南方双彩网预测| www.dn47.com-民间买彩票中奖咒语| www.045432.com-七星彩自动规律软件| www.029642.com-博彩平台有哪些| www.739837.com-炫乐彩票注册| www.qp56.cc-福彩新3d骗局| www.0084.loan-七乐彩遗漏统计| www.180907.com-中彩在线app| www.345587.com-易学彩票选号| www.495328.com-彩票税收-| www.959956.com-足彩职业玩家| www.l40.cc-81彩票注册-| www.0880.xyz-彩票软件导航| www.651711.com-永利彩票邀请码| www.791947.com-彩宝网开奖结果查询| www.905132.com-亿彩彩票是不是有托| www.sg95.com-幸运时时彩-| www.90uj.com-福彩3d胆码王软件| www.8011.cc-幼儿园彩虹伞玩法| www.289883.com-福利彩票福彩三d| www.395821.com-19号的福利彩票| www.532873.com-7星彩怎么玩| www.639549.com-竞彩申请名额| www.772911.com-白菜网送彩金网站| www.892376.com-全民彩最新版| www.848514.com-时时彩彩开奖结果| www.201475.com-彩71下载-| www.940992.com-快三国家统一开奖| www.736561.com-时时彩全天大小计划| www.850075.com-美国一分彩走势图| www.990541.com-全球彩票是骗局吗| www.58196.cc-福彩游戏机连环夺宝| www.7733.top-彩票工作人员要求| www.55275.cc-快3彩票分析软件| www.568618.com-阿狸彩票登陆| www.724760.com-cc彩球c红财神| www.860332.com-彩票app开发网站| www.150353.com-最新的彩票分析软件| www.710119.com-什么的彩-| www.32ta.com-317体彩走势图| www.175263.com-刷彩票挣钱可靠吗| www.385422.com-彩票投注免费领彩金| www.802233.com-女神精彩视频| www.906066.com-安徽快三多少分钟| www.yt75.com-奇门测彩票-| www.188257.com-河南福彩22迭5走| www.04cr.com-油性玫瑰彩铅画教程| www.5361.vip-福彩三地图谜| www.72269.cc-彩票打印不一样| www.106582.com-彩票足球世界杯| www.80806.com-燕赵福彩双色球| www.869680.com-彩票代购网站合法|