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.22191.com-七星彩在哪买| www.727588.com-广东福利彩app| www.869664.com-彩票开奖app下载| 彩宝www.cb2988.com| www.979463.com-168快彩-| www.yj3.com-吉林快三38期| www.ww33.cc-免费送38彩金| www.055174.com-长春打击黑彩| www.395244.com-彩虹歌英文-| www.585789.com-玩彩票能赢钱吗| www.741239.com-北京28彩票投注| www.891696.com-腾讯五分彩走势图| www.og09.com-皇都彩票假不假| www.81ea.com-佛山福利彩票| www.406666.cc-乐佳商城彩票端下载| www.386286.com-南充福彩中心| www.571.website时时彩顺子规则| www.6276.biz-信彩彩票计划网站| www.wx34.com-七乐彩跨度走势图| www.71137.com-阿里彩票什么情况| www.3753.biz-彩票预测神器安卓版| www.039315.com-今日彩票合买大厅| www.996857.com-全民彩票快速登录| www.id46.com-80彩票是骗局| www.13ew.com-快三连开最高纪录| www.0856.xyz-八号时时彩手机软件| www.9741.in-江苏快三怎么玩独胆| www.89yf.com-电子竞技博彩有哪些| www.964578.com-送彩票不限ip| www.ln45.com-彩中彩平台怎么样| www.38dv.cc-网上买7星彩| www.22703.com-网赌分分彩先赢后输| www.149529.com-体育彩票排列五下载| www.208244.com-快三网是什么意思| www.212979.com-今日拼搏在线彩神通| www.22879.com-网络购彩为什么停了| www.94336.com-lg传统彩是什么| www.221571.com-一分快三破解版软件| www.2101.com-中彩网广东-| www.48555.cc-87彩店最新版| www.60394.com-彩票的理论与思维| www.258297.com-今日福彩3d字迷| www.662287.com-366博彩下载| www.813189.com-香港的彩金可以买吗| 500彩票网www.681090.com| www.b00.top-十字彩票怎么玩法| www.37ar.com-七星彩彩迷网| www.338675.com-福利彩票高频| www.113845.com-体彩天下名钻刮刮乐| www.218381.com-吉林快三在哪里购买| www.317681.com-足彩14场秘籍| www.421841.com-博竟彩票重庆时时彩| www.543882.com-3d彩吧图第五版| www.632357.com-500彩票快三稳赚| www.722759.com-中国彩票骗局的案例| www.807595.com-60种珍贵彩票| www.899047.com-福彩3d怎么买划算| www.984148.com-彩运8网站-| www.s13.win-买彩票如何中大奖| www.68ta.com-万达彩票平台| www.866613.com-昨晚彩票出什么数| www.966060.com-5分钟一期的传统彩| www.jl47.com-易彩堂提现是真的吗| www.2986.biz-各彩票平台网址大全| www.9878.org-万通五分彩平台下载| www.645581.com-七彩产卵前-| www.6056.cc-彩票逆向思维| www.23420.com-四季彩登录平台| www.873979.com-贵州彩票双色球开奖| www.2382.pw-七彩山鸡苗那里有卖| www.801283.com-广西快三购买技巧| www.927326.com-易网体彩直播| www.2wx.com-c79彩票-| www.83qk.com-购彩可靠吗-| www.018856.com-手机看彩票的软件| www.028713.com-杏彩平台网页版登陆| www.254087.com-快三算法教程| www.479361.com-足彩只买平局赚| www.211095.com-贵州快3彩经网| www.310811.com-在中彩网-| www.129757.com-江苏体彩和值走势图| www.223806.com-体彩开奖视频| www.329155.com-青海福利彩票三d| www.414885.com-七彩本草滴丸真假| www.520532.com-金沙彩票下载| www.590296.com-深圳体育彩票规模| www.678263.com-申请一个体育彩票| www.762963.com-秒速快三开奖结果| www.848379.com-神兽时时彩专业| www.906068.com-国彩有哪些平台| www.973311.com-fc彩虹岛-| www.ck.com-彩票选号器-| www.br58.com-最好的彩票走势图| www.420208.com-彩票投资指南报| www.558586.com-精彩中国说冠军| www.636772.com-彩虹的歌曲和儿歌| www.989397.com-七乐彩综合版走势图| www.kj27.com-体彩和值走势图| www.184898.com-彩票争霸下载| www.r83.cc-福彩字谜汇总| www.080345.com-体彩生肖乐-| www.179578.com-易彩快3有没有规律| www.272255.com-广西快三怎样中奖高| www.020302.com-凤凰娱乐彩票合法吗| www.096083.com-特彩吧-| www.9541.biz-台湾四星彩-| www.20bk.com-手机全民彩票安全吗| www.865707.com-彩02彩票co2| 幸运彩票www.5095m.com| www.364989.com-阳光彩虹小白马原唱| www.678304.com-乐彩专家论坛下载| www.837099.com-体彩一定牛下载| www.976540.com-河南彩票报纸| www.57uo.com-500万开奖彩票| www.3933.cn-胜负彩14场中8场| www.371017.com-彩票站转让合同范本| www.648568.cc-977彩票平台会员| www.784213.com-心之米商城彩票| www.39be.com-体彩高频足彩走势图| www.174911.com-福彩快三苹果版软件| www.311596.com-陇南福彩中心地址| www.444162.com-福彩3d多彩-| www.634377.com-96购彩-| www.8330.biz-时时彩复式-| www.ja93.com-足球竞彩网站| www.2gt.com-彩团彩之贵宾网| www.1463.xyz-彩铅画星空视频教学| www.7017.biz-体彩篮球中奖规则| www.118151.com-彩票拆分-| www.af53.com-昨晚彩票开什么号| www.0467.wang-钻石彩票软件下载| www.324866.com-发达彩票平台| www.865789.com-熊猫彩票8-| www.302055.com-北京快三走行态势图| www.618485.com-关于打错彩票的法律| www.358981.com-微博如何买彩票| www.437316.com-超级赛车彩票怎么看| www.512381.com-秋天彩铅画-| www.068307.com-福彩快三百度百科| www.909944.com-福彩3d彩界的精英| www.70297.com-恒发彩票亏了50万| www.099372.com-11选五大彩鲸| www.200009.com-河北快三开奖时间| www.322351.com-正规网购彩票网站| www.090016.com-600彩票平台| www.377084.com-微信qq彩票-| www.09782.com-彩90app-| www.039515.com-彩票合买系统在哪| www.243125.com-赌博买彩票破产| 彩客博www.8667l.com| www.273650.com-体育足彩玩法| www.063967.com-竞猜足彩计算器| www.8289.cm-今天福彩3d推选号| www.952077.com-台湾福彩官方网站| www.750047.com-中发彩票靠谱吗| www.2942.pw-体彩店五星网点| www.065602.com-彩客网触屏版首页| www.025734.com-七乐彩30期走势图| www.668572.com-高频彩种服务好| www.807576.com-福彩44期-| www.336566.com-彩票开奖开源接口| www.449952.com-博彩公司的钱怎么洗| www.677257.com-彩钢瓦围墙cad| www.785745.com-领航彩票计划|