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.wu03.com-网上搏彩平台| www.208933.com-鸿彩快三彩票官网| www.86710.com-福彩网络销售| www.874101.com-福彩三地彩吧图库| www.875383.com-神州彩票方下载| www.974880.com-体彩18084期| www.04sk.com-人人竞彩足球| www.026836.com-刷彩金兼职平台| www.137418.com-七星彩今天开什么奖| www.235627.com-买福利彩票-| www.363519.com-誉鼎国际彩票骗局| www.518449.com-炫彩弹射ios| www.146333.com-7158彩票-| www.235721.com-齐鲁彩票开奖| www.314486.com-中国足球竞彩| www.395862.com-七乐彩星期几| www.519250.com-足球竞彩交流| www.585995.com-网银怎么买彩票| www.656956.com-香港快3彩票| www.735080.com-福客来彩票是真是假| www.813531.com-p3清清彩吧图库| www.892197.com-大奖彩票购彩助手| www.960434.com-足球竞彩宝app| 杏彩www.00840g.com| www.ds43.com-自助彩票机骗局| www.te66.com-买快三什么意思| www.01ep.com-带彩虹图片的成语| www.pf54.com-重庆快三真的吗| www.5238.in-中国体彩彩票走势| www.38818.cc-红彩会彩票网址| www.317191.com-风彩彩票怎么样| www.464695.com-萍果精彩片段| www.586627.com-打鱼送彩金网站| www.039166.com-彩票代投兼职群| www.128466.com-安装500万彩票| www.206633.com-利彩快三-| www.278512.com-五福彩票官网版下载| www.352202.cc-知名黑彩平台| www.440802.com-719彩票-| www.533550.com-买什么彩票简单一点| www.608236.com-山西11选5彩票| www.679901.com-魔方彩票苹果| www.754833.com-北斗福彩今日预测| www.822191.com-全国福彩3d预测| www.892732.com-成化有珐琅彩瓷器吗| www.962390.com-500万网上买彩票| 大赢家彩票平台www.231002.com| www.hn90.com-快三高手技巧心得| www.zh50.com-怎么开彩票网站| www.24vq.com-怎么破解网投彩票| www.96vg.com-彩票对打什么意思| www.3029.cm-被黑彩平台黑钱了| www.467008.com-七乐彩双龙会| www.691372.com-竞彩足球彩票aap| www.933722.com-今天贵州福彩快3| www.ak22.com-七星彩下期预测号码| www.232108.com-4s彩票-| www.14qe.com-欢乐彩票官网app| www.092399.com-乐米彩票注册| www.333420.com-体育彩票数字组合| www.955846.com-彩票在手机上挂| www.bw58.com-快彩网官网下载| www.fe96.com-河北快三下载| www.042768.com-中国福利彩票广告词| www.260064.com-福彩体彩软件| www.448115.com-互联网购彩何时恢复| www.657451.com-哈尔滨市福彩中心| www.858393.com-中国福利彩票昨日| 彩票5www.550284.com| www.254761.com-分分时时彩平台| www.386303.com-重庆体彩官网平台| www.635073.com-哈尔滨七彩国际影城| www.773914.com-出国做时时彩可靠吗| www.925614.com-去彩票店怎么买彩票| www.z83.org-大赢家彩app| www.52188.com-幸运彩票3132| www.069408.com-七乐彩今晚开奖号| www.454147.com-中国竞彩宣传平台| www.746577.com-555彩票软件| www.927101.com-安巙快三一定牛预测| www.cp9579.com-中彩网是不是合法的| www.37np.com-彩票开奖勇士争先| www.9579.top-新浪足彩下载| www.067999.com-彩名堂ios官网| www.257671.com-甘肃福彩网-| www.379666.cc-幻想彩票中奖| www.162319.com-一分钟一开快三| www.299962.com-中彩网11选5| www.446858.com-查询彩票的软件下载| www.639489.com-彩票店体育布置| www.794229.com-买彩票属于赌博| www.132482.com-世界杯足彩哪里买| www.277871.com-什么是博牛彩票| www.412518.com-彩票计划员培训| www.561997.com-全中彩票可以信| www.686897.com-天下彩喜中彩天空彩| www.815536.com-排列五是福彩| www.902666.cc-快三每天几点开始| www.293108.com-3d彩吧图库蓝精灵| www.485058.com-彩票代理如何赚钱| www.678155.com-乐彩3d字谜图谜| www.835173.com-中免薄荷绿好彩| www.974824.com-七星彩加急彩版| www.sq88.cc-排三家彩开奖网| www.96hp.com-鸿博彩票平台| www.7532.win-乌鲁木齐竞彩店| www.86761.com-竞彩猫小鱼儿| www.125220.com-福彩多少种玩法| www.29qw.com-水彩星空鹿图片| www.992287.com-福彩自助终端| www.u93.cc-香港乐和彩518| www.019.loan-彩授三天计划| www.6299.cn-深圳福彩app官网| www.46466.com-官方时时彩走势图| www.079923.com-体彩作假最新消息| www.190533.com-e球彩走势图| www.529939.com-时时彩振幅分析| www.678293.com-乐彩论坛原创| www.768010.com-体彩开奖时间周几| www.872001.com-贵州福彩在哪里兑奖| www.970284.com-今日七彩乐开奖结果| www.19bs.com-7天彩票官方彩票网| www.5127.biz-网上兑彩票-| www.29872.cc-福彩双色球最高中奖| www.83wo.com-快三怎么判断长龙| www.5898.in-天价彩礼图片| www.17289.cc-下载福彩开奖信息| www.60023.cc-66微彩是什么| www.690715.com-足彩推荐在哪| www.764178.com-有玩华宇彩票的吗| www.54359.com-吉祥大气的彩票群名| www.023592.com-福彩22-| www.247399.com-福利3d开门彩票| www.343773.com-福彩3d杀跨高手| www.ps68.com-广州鸣彩艺术| www.0088.wang-福彩3d独胆讲座| 博乐彩票www.35918p.com| www.qv02.com-福彩3d网上怎样买| www.44fd.com-彩之云物业怎么样| www.11763.cc-江西快三购彩平台| www.882722.com-乐猫彩票注册| www.nj80.com-篮球竞彩app| www.766118.com-神州乐彩重庆时时彩| www.0691.win-福彩投注站审批| www.7306.org-彩虹六号nr战队| www.32478.com-久久彩票爱彩彩票| www.52qk.com-彩虹网秒赞-| www.9087.biz-花草彩铅画简单方便| www.46194.com-生肖彩票黄历今天| www.90861.com-彩票开奖排-| www.102711.com-丰彩深圳有人中奖吗| www.199058.com-天津体彩十一选五| www.266231.com-极速虎彩票-| www.326246.com-七星彩专家选号汇总| www.388486.com-彩友会黑钱-| www.587277.com-彩票平台漏洞刷钱| www.659681.com-网上彩票群送38| www.kh24.com-8k彩票靠谱吗| www.0ft.com-内蒙古快三看准豹子| www.67mq.com-天天时时彩计划助手| 福彩www.15355t.com| www.56xr.com-营业中体彩店转让| www.6470.cc-怎么推广别人玩彩票| www.795321.com-彩票公式规律走势图|