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.899226.com-彩乐园3下载app| www.800953.com-福彩综合版-| www.716213.com-宝赢软件彩票| www.497771.com-牛彩官网手机版| www.78736.com-福彩双色球往期回顾| www.355.biz-牛彩彩票官网| www.8382.me-七星彩芝麻数据| www.0121.top-彩色的什么词语填空| 中彩网www.81233k.com| www.007224.com-qq7彩票网址| www.659220.com-丰富多彩中彩的意思| www.135494.com-利海互动彩票合法吗| www.77dw.com-天天时时彩彩票论坛| www.7697.top-乐彩33可信吗| www.67611.com-易彩官方登陆网站| www.3983.me-买竞彩哪个app好| www.08087.cc-彩吧助手走势图势图| www.589993.com-南粤彩票论坛七星彩| www.692572.com-泰国的彩票怎么查| www.796002.com-享彩app-| www.6097.cm-釉上彩过程-| 500彩票www.394277.com| www.722760.com-新未来微信彩票| www.44kj.cc-买彩票能中10万吗| www.581986.com-时事彩怎么买不会输| www.16461.cc-彩客网正规么| www.064747.com-私彩举报电话| www.37cg.com-新版一定牛彩票网| www.325467.com-彩经网排列三预测| www.483465.com-二四六好彩管家婆| www.013512.com-南国七星彩票规律图| www.565686.com-天娱彩票平台骗局| www.298103.com-快三群赌博-| www.319500.com-快三怎么买容易中奖| www.996200.com-足彩十四场直播比分| www.mp37.com-吉林快三奖励| www.s61.club-体彩排列三组三复式| 易盈彩票www.www.7793h.com| www.135373.com-恒大彩票下载| www.fj24.com-江苏省福彩-| www.299090.com-怎样看彩票走势| www.826.win-时彩直播-| www.812166.com-亮彩打印纸-| www.972243.com-福彩三滴开奖号码| www.444597.com-顺盈彩票网址| www.595311.com-中国福彩数字3| www.687333.com-体彩官网世界杯| www.809852.com-高频彩票新规| www.274687.com-玩脑者分分彩| www.h59.com-福彩双色球试机号| www.47gv.com-体彩下载网易彩票| www.581007.com-新浪彩票页面打不开| www.25579.cc-彩票试刮-| www.039075.com-网投彩票网址| www.079675.com-有没有5位数的彩票| www.62522.cc-福彩跟单-| www.088181.com-竞彩之家下载| www.184164.com-快三输钱翻本的有吗| www.781836.com-国彩网正规吗| www.33tm.com-好乐彩app-| www.4520.org-体彩19034预测| www.972886.com-彩虹哥客服-| www.355576.com-刘军时时彩秘籍| www.540365.com-迪士尼彩乐园假网址| www.792113.com-7彩颜色-| www.889925.com-彩票标语-| www.968696.com-帮别人刷彩票犯法嘛| www.03ov.com-福彩3d彩票官网| www.34go.com-淘宝彩票安卓版下载| www.35sd.com-特区网七星彩票论坛| www.cai91.cc-11彩票5甘肃| www.a13.top-中国福彩标志| www.754047.com-分分彩挂机论坛| www.821211.com-四川福彩领奖流程| www.894836.com-信彩娱乐计划| www.965294.com-辽宁体彩十一选5| 九五彩票www.878743.com| www.101229.com-京彩挂机能赚钱多| www.171302.com-河北快三统计图表| www.153770.com-310足彩推荐| www.823798.com-福利彩票能看直播吗| www.00638.com-彩票销售点有钱挣吗| www.3322.cm-彩色简笔画风景图片| www.971509.com-亿发彩票app| www.di38.com-福彩网安全吗| www.22ph.com-3d电脑福利彩票| www.778.cm-怎样买体育彩票| www.5814.xyz-百万彩友论坛| www.15599.com-众赢彩票平台| www.712886.com-刘醒彩虹六号| www.790882.com-贵烟多彩图片| www.866057.com-五星平台彩票| www.925219.com-彩代表什么-| www.974697.com-体彩第19015| 500万彩票网www.808910.com| www.hd83.com-湖北时时彩玩法| www.xq05.com-什么地方可以买彩票| www.428387.com-国外足球竞彩网站| www.08.cc-体育彩票销量排行榜| www.95do.com-网上体彩在哪里买| www.024340.com-百盛彩票靠谱吗| www.295379.com-分分时时彩计划号码| www.bb68.com-彩票万能准确选号器| www.939811.com-玩彩哪个平台安全| 中彩网www.2408a.cc| www.vw22.com-v9彩票-| www.63dc.com-今天彩民乐树图| www.361635.com-彩票三d开奖查询| www.0570.bid-博彩三预测老头| www.51984.com-旺彩网合法吗| www.9937.loan-订婚的钱算彩礼钱吗| www.71623.com-福利彩票快三换时间| www.637920.com-开竞彩店需要多少钱| www.134835.com-1号彩票安卓版下载| www.778.cn-彩神l外挂-| www.866.xyz-彩铅画基本功| www.7820.pw-福星新星彩-| www.784307.com-体彩排列五预测| www.vu49.com-山东体彩快乐扑克三| www.772124.com-彩500怎么玩| www.05822.com-附近竞彩网点| www.00869.com-注册送20彩金| www.451652.com-太原转让体彩机| www.589353.com-怎样买竞彩足球稳赚| www.95296.com-七乐彩双色球区别| www.159797.com-体育竞彩网官方网站| www.be01.com-01彩票正规不| www.92748.com-芸彩数字营销骗局| www.9972.com-国家规定彩礼钱多少| www.831827.com-江苏休育彩票七位数| www.483409.com-汉代点彩瓷器| www.651406.com-体彩兑奖期多久| www.683870.com-中奖彩票图片大全| www.825493.com-广州鸣彩传媒正规吗| www.923167.com-白小姐祺袍正版彩图| 网易彩票www.07163l.com| www.675648.com-新浪爱彩十四场投注| www.783806.com-下载最多的购彩平台| www.845456.com-体育彩票是哪发行| www.070803.com-足彩咨询师-| www.167681.com-内蒙快三走势图| www.237357.com-体彩浙江6+1规则| www.299933.com-彩票2元走势图大全| www.25677.com-分分彩骗人-| www.cp347.com-快三代理怎么挣钱| www.ek20.com-幸运快三代玩靠谱| www.xn56.com-易旺彩票手机版| www.444258.com-网易竞彩彩票| www.559383.com-包头福彩中心待遇| www.659064.com-像91竞彩的软件| www.747787.com-彩运宝客服电话| www.848799.com-汪汪时时彩最新版| www.949176.com-快三遗漏数据江苏| 环球彩票www.81455.com| www.397941.com-一分钟快三稳赚技巧| www.cai9855.com精彩十分开奖号码| www.338579.com-彩尊手机客户端| www.458777.com-海南四星彩网站| www.963564.com-被彩票托骗了| 金凤凰彩票www.404977.com| www.689606.com-国民彩票赚钱吗| www.319001.com-168时时彩-| www.437732.com-体育彩票投站点附近| www.560939.com-百姓彩坛高手|