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.431022.com-齐鲁风彩票双色球| www.950638.com-手机买福利彩票| www.336922.com-购买彩票app| www.566963.com-美国兆彩怎么买| www.718.red-私自贩卖彩票| www.th16.com-甘肃省快三遗漏数据| www.11052.com-足球彩票aap| www.05185.com-资金彩票-| www.62962.com-足球竞彩分析推荐| www.622648.com-彩票36o走势大全| www.034558.com-正规官网彩票有哪些| www.588186.com-购彩xs是骗人的吗| www.747898.com-彩易科思合作的彩票| www.861877.com-qq彩票体验版| www.953070.com-体育彩票怎么买的| www.gp14.com-大发快3分分彩计划| www.8zb.cc-乐彩排三字迷| www.388782.com-乐米彩票软件下载| www.48482.cc-宝马人工计划时时彩| www.33860.com-新浪彩票必发指数| 杏彩www.00840y.com| www.vz11.com-吉林快三贴吧| www.51806.com-痴心彩开奖结果| www.772890.com-元角分厘毫模式彩票| www.884712.com-支付宝彩神网靠谱吗| www.06369.com-福利彩票中奖收税| www.562075.com-鑫彩团队计划| www.94ps.com-福彩大家乐玩法| www.1470.net-高大上彩虹屁| www.032777.com-500彩票没邀请码| www.232908.com-中国彩票开奖结果| www.137890.com-六福彩怎么玩| www.zp10.com-怎样玩时彩才能稳赚| www.7494.top-便利店加盟体彩店| www.028742.com-彩票走势图用什么擦| www.131767.com-晋城结婚彩礼标准| www.78yk.com-体彩篮球比赛竞猜| www.6582.wang-鑫彩网是合法的吗| www.80304.com-体彩晚秋-| www.080118.com-时时彩怎么看出豹子| www.257788.com-彩票屠龙计划| www.vz8.cc-彩经网排列三走势图| www.643622.com-自定义彩票走势图表| www.638563.com-嘉定区体育彩票管理| www.366849.com-快三助赢软件| www.070609.com-竞彩分析师怎么考| www.td11.com-彩色的造句-| www.184553.com-彩票快三技巧方法| www.539892.com-姜丽谢俊娟快三教学| www.697883.com-连中彩票最新版| www.791665.com-福彩3d网站大全| www.867252.com-体彩6十1停售时间| www.947857.com-台湾彩票开奖结果| 大赢家彩票www.5086i.com| www.tb03.com-乐盈彩票不能提现| www.673155.com-体育彩票开走势图| www.857254.com-互娱彩票贴吧| www.365241.cc-福利彩票如何玩| www.519085.com-蚂蚁彩票app| www.015685.com-彩票开奖体彩七星彩| www.u47.org-福彩三d奖金| www.22783.cc-彩之源平台-| www.73825.com-体育彩票网上如何买| www.597771.com-彩虹六号高手技巧| www.678313.com-彩摘网牛彩网彩摘网| www.763958.com-5oo万彩票网首页| www.984218.com-福彩3d研究-| www.mf84.com-好彩投app-| www.682630.com-下彩网是真的吗| www.631213.com-博彩刷佣金-| www.717929.com-七星彩抓码公式| www.839177.com-盛弘彩票-| www.894761.com-彩票试机号今天全国| www.957100.com-彩票能破解吗| www.cai9866.com体彩排列三跨度走势| www.34631.com-众彩网程远杀码| www.412362.com-中彩彩票苹果| www.528192.com-双色球福彩神牛杀号| www.620128.com-釉上彩图案-| www.690442.com-重庆快乐十分彩开奖| www.1949.site-保时捷彩票是真的吗| www.947978.com-大乐众彩网-| 百姓彩票www.bxcp3.com| www.469669.com-双色球五行预测彩票| www.665984.com-好多彩票一起玩的网| www.375625.com-彩票群英会改时间| www.528849.com-体育彩票返点时间| www.82749.com-19030胜负彩| www.8837.xyz-谁有福利彩票邀请码| www.125166.com-福彩快三被黑| www.743226.com-皇家世彩网站| www.822430.com-福彩双色球胆拖计算| www.890076.com-nba彩票真-| www.953042.com-鸿运彩票官方| www.998808.cc-快三大小单双玩法| www.cv81.com-10年稳定私彩平台| www.sw18.com-买彩票中奖秘诀| www.169770.com-湖北快三-| www.232701.com-重庆实时彩app| www.298493.com-腾讯5分彩合法吗| www.359312.com-体育彩票去哪| www.109617.com-一分时时彩自动投注| www.90cg.com-篮球博彩看盘| www.nd5.cc-南方双彩网官网| www.437299.com-陕西彩票中奖的地区| www.639200.com-如何申请体育彩票站| www.815120.com-台湾时时采彩开奖| www.922832.com-福彩代销证变更| www.284073.com-体彩网名-| www.4619.vip-彩票中一万-| www.85vj.com-彩66金鹰计划网页| www.730365.com-旧版彩神争争霸1| www.44en.com-盈众彩票下载安装| www.0044.biz-中国福利彩票验证| www.8822.red-快三大小助手| www.62752.cc-开奖公告新浪彩票网| www.042211.com-吉林快三免费计划网| www.136696.com-易彩乐app下载| www.222764.com-快3彩票害死多少人| www.331114.com-财神彩票平台正规吗| www.427767.com-博牛彩票邀请码| www.577002.com-澳客网七星彩预测| www.817921.com-网购福利彩票双色球| www.yj33.com-oe彩票官方网站| www.0968.cm-高频彩随机怎么赢| www.27020.com-新2彩票论坛资| www.85556.cc-3218彩城彩票网| www.td01.com-福彩3d777助手| www.1zl.com-手机后彩膜批发| www.969539.com-酷彩吧网页版| www.4236.biz-三彩夏装新款连衣裙| 乐彩网www.lcw997.com| www.914021.com-乐彩网排三开奖结果| www.2662.in-天盈彩票注册网站| www.46622.com-3d彩神论坛-| www.49ba.com-七彩冰淇凌-| www.01550.com-糖果派对4个彩金球| www.26js.cc-澳客竞彩网手机版| www.22973.com-彩种什么意思是什么| www.117201.com-中体彩官网电脑| www.333788.com-彩票翻身-| www.579512.com-新体彩号码-| www.835811.com-好彩三八指什么生肖| www.93379.com-丹麦28彩票技巧| www.373060.com-柬埔寨彩票网| www.15393.com-嘉兴福彩中心电话| www.000177.com-天津彩票开奖结果| www.od76.com-体彩网足球比分直播| www.517205.com-福彩中彩视频| www.mt69.com-福利彩票排列五| www.115057.com-查福利彩票七乐彩| www.579062.com-老虎机彩金可以调吗| www.648555.com-彩票大师苹果版| www.lb38.com-天天爱彩票官网| www.59tj.com-竞彩计划真的盈利| www.37817.com-陕西体彩兑奖流程| www.319478.com-北京快三奖金对照表| www.xc0.cc-青海福彩快三预测| www.927989.com-中国福利彩开奖直播| www.0931.org-500彩票合买| www.56830.com-利彩彩票是正规的吗| www.311503.com-11选五爱彩乐辽宁| www.5866.vip-体育彩票顶呱呱规则| www.226806.com-福彩双色球二三等奖|