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天

知道了
58福彩 www.037871.com-河北快三和值大小| www.97698.cc-五分快三的规律| www.120481.com-网络彩票投注站| www.561329.com-体彩大乐透93| www.965243.com-tkcc天空彩资料| www.os26.com-初学者买彩票怎么买| www.68wh.com-著名博彩公司| www.947724.com-彩票信息报-| www.900365.cc-e彩乐app-| www.6022.xyz-微博刮刮彩-| www.435033.com-彩吧助手违法吗| www.974275.com-彩票和值大小单双| www.3333.in-彩色沥青施工工艺| www.048614.com-福彩三地东北彩霸3| www.352344.com-淘彩吧3d论坛| www.398425.com-快三号推荐-| www.616353.com-体彩足球让球胜平负| www.644011.com-幸运十分彩哪出的| www.149155.com-乐米彩票官方下载| www.986496.com-福彩归哪里管| www.ip10.com-江苏快三网易彩票| www.t30.com-体彩复式投注表| www.95fl.com-星际彩票值得信任吗| www.980057.com-招彩票销售员| www.jt87.com-河北保定快三查询| www.37443.com-凤翔彩票官网| www.116374.com-彩票分析数据用途| www.750716.com-在爱彩彩票输了| www.445877.com-福彩销售管理办法| www.679224.com-福利彩票彩经网杀号| www.949171.com-pc彩票官网下载| www.18925.cc-3d下载福彩-| www.020452.com-彩34-| 68彩票www.68682q.com| www.14ey.com-七星彩什么台开奖| www.3234.com-1分钟彩计划| www.36336.cc-金龙彩票安卓版| www.109360.com-香港老彩民高手| www.586626.com-福利彩票资讯网| www.657634.com-绀野彩夏百度百科| 买彩网www.mcw7.com| www.mh05.com-重庆实时彩走势图| www.2878.me-西藏福彩快三app| www.36076.com-福彩快乐12加奖金| www.511478.com-今日香港福利彩票| www.qf09.com-体育彩票app扫码| www.3695.pw-038彩票黑钱吗| www.40000.com-体彩足彩多少钱领奖| www.150144.com-大乐透保定中奖彩票| www.263752.com-彩票押大小技巧| www.567646.com-福利彩票三等奖单注| www.126662.com-19029期七星彩| www.253846.com-58彩票旧版-| www.505732.com-头奖彩票官方网站| www.675048.com-汇丰彩票app| www.02fp.com-国家体彩总局| www.89zw.com-返还率小的博彩公司| www.500236.com-中国福彩一年销售额| www.608220.com-国际彩票平台大全| www.697853.com-全民彩票金币中奖| www.774778.com-18彩官网-| www.763138.com-大乐彩-| www.36ia.com-网络私彩的骗局| www.713648.com-福彩彩票开奖公告| www.553.com-看七乐彩的开奖结果| www.948631.com-体彩公益金分成比例| www.329752.com-腾讯体育彩票下载| www.402381.com-dd彩票网址-| www.895696.com-永诚彩票网官方网址| www.xt98.com-买彩票中200诀窍| www.189040.com-内蒙快三平台| www.380128.com-彩鸾归令的意思| 亿彩堂www.87668t.com| www.596993.com-南京新快三查询| www.725821.com-期期中彩票资讯| www.842157.com-澳客足彩网站| www.930115.com-彩票税计算-| www.990214.com-彩票77提现可靠吗| www.kc34.com-1688彩票注册| www.7312.live-彩虹娱乐电玩城| www.282591.com-时时彩五星缩水大底| www.767995.com-惠普彩色激光打印机| www.953165.com-好彩三八是什么生肖| www.269779.com-567彩票官方版| www.424868.com-体育时时间彩开奖| www.187659.com-时时彩开奖记录| www.280400.com-重庆时时彩计划网站| www.517938.com-福彩3d开豹子| www.102102.cc-足彩中奖5800万| www.345682.com-彩漫福利本子库| www.611028.com-梦见猪彩票买几号| www.753097.com-快三提前开奖结果| www.949221.com-pc28高奖金彩票| www.191750.com-河北彩票开奖查询| www.285339.com-彩票中的数学问题| www.404012.com-北京七星彩最新图规| www.881584.com-全民快三的玩法技巧| www.95774.cc-体彩什么时候发行的| www.733.red-晶彩人生聚合酒店| www.882432.com-易彩彩票不能提现| www.971330.com-赢彩彩票合法吗| www.850233.com-竞彩7串21-| www.974972.com-彩票两元网走势图| www.ae63.com-手机彩票网下载| www.4310.cm-如何看时时彩k线图| www.030478.com-中彩股份龙江传媒| www.79vj.com-南京福彩站点查询| www.109779.com-盈宝彩注册-| www.931767.com-体彩一万整交税吗| www.454737.com-分分彩追钱-| www.627188.com-038彩票登陆| www.956939.com-567kcc彩票网| 幸运彩票www.73166l.com| www.929358.com-盈彩app下载安装| www.993248.com-彩票分红-| www.71310.com-体彩超级大乐透计算| www.023696.com-百姓彩票提现要多久| www.088259.com-足彩混合过关| www.9613.cm-安徽竞彩专家推荐| www.461522.com-13彩邀请码-| www.306306.cc-彩票大浪透开奖结果| www.0874.bid-福彩双色球开奖预算| www.947586.com-福彩有几种-| www.206986.com-易彩网彩票| www.7093.vip-七彩教育理念| www.885131.com-全球彩票手机平台| www.zg61.com-体彩快三玩法| www.01081.com-彩客足球触屏版| www.006744.com-福彩3d路数怎么算| www.918258.com-体彩查设玩得| www.999820.com-河北福彩排七开奖| www.ff35.cc-七星彩头奖表| www.194669.com-北京快三福彩网| www.079088.com-七乐彩托胆计算| www.165981.com-大乐透专业玩彩予则| www.233824.com-快三012路表格| www.300098.cc-体育彩票双色球| www.358873.com-七星彩沼泽怎么办| www.460406.com-实亿彩票app下载| www.519982.com-陌陌上的彩票骗| www.871304.com-彩票大家赢走势图| www.8572.biz-像m5彩票的有| www.46293.com-彩票站点中奖提成| www.023856.com-乐彩神官网-| www.107925.com-彩票是否存在作弊| www.639975.com-福彩3d概率选胆| www.816369.com-云南时时彩官网| 500彩票www.501324.com| www.11sj.com-天下彩票678| www.i91.top-送彩金的棋牌游戏| www.34zs.com-千军万马长条七星彩| www.413318.com-足彩改期奖金怎么算| www.79ue.com-仙逆7彩-| www.423.xyz-256苹果版彩票| www.507189.com-aa彩票-| www.709443.com-彩乐乐手机客户端| www.512669.com-彩铅画秋景-| www.1888.mobi-福利彩票太湖之谜| www.477002.com-黑河福彩中心主任| www.650762.com-鹰彩时时彩骗局| www.38as.com-彩票众彩网-| www.356871.com-体彩福彩牌匾门脸| www.137467.com-q彩平台-| www.858325.com-足彩大赢家过|