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天

知道了
5分快3 www.10845.com-澳客网彩票论坛| www.267512.com-彩票10选3技巧| www.377658.com-时时彩有中过大奖吗| www.476143.com-福彩3d今晚推荐号| www.554401.com-纽约28彩票-| www.604298.com-奥发彩票网-| www.665079.com-香港正板彩霸王| www.733068.com-3d跨度走势图彩宝| www.797251.com-八八彩票官方网| www.873680.com-彩宝店下载-| www.938298.com-开个福彩店赚不赚钱| www.986078.com-七乐彩大赢家| www.cp7760.com-手机买彩票网站| www.lm39.com-彩经下载-| www.762608.com-正版香港挂牌彩图| www.09ax.com-河内彩票-| www.190.org-彩铅的简单画法| www.030356.com-彩61合法吗-| www.w12.top-一分钟快三交流| www.1782.me-千美彩票-| www.764268.com-爱彩人彩票网首页| www.958534.com-七星彩粤海局王图纸| www.di.cc-68彩票app-| www.pk13.com-职业彩票高手经验| www.17wb.com-眼彩刷是干嘛的| www.0151.vip-彩色近义词-| www.6333.vip-彩票灵异-| www.023759.com-七天彩票登录| www.115931.com-微信可以买足彩吗| www.253381.com-甘肃快三技巧有哪些| www.328867.com-快三怎么买才能赚钱| www.422525.com-合买彩票中奖机率| www.529537.com-福彩直播软件| www.50lx.com-旭彩苑-| www.672206.com-特彩吧app41期| www.778987.com-彩霸王报纸图| www.894815.com-助赢彩票软件| www.960469.com-九亿彩票可以赚钱吗| 天天彩票www.54968f.com| www.983850.com-快三线路-| www.ao88.cc-贵州彩票中奖者| www.s90.org-永利网彩票合买| www.92ki.com-投彩网网址是多少| www.fd.cc-吉林快三玩法技巧| www.wy05.com-520彩票网安全吗| www.18505.com-足彩单场胜平负竞猜| www.99897.com-拉菲彩票下载安装| www.081905.com-老师带快三-| www.155565.com-海南飞鱼彩票怎么玩| www.230760.com-体彩屋app-| www.326028.com-彩亿彩票-| www.389767.com-东莞彩票店生意转让| www.493815.com-立即购买双色球彩票| www.568221.com-下彩网可以提现吗| www.632015.com-七彩虹刷bios| www.694187.com-彩票中奖号码六加一| www.764669.com-旧版彩视333| www.qw12.com-甘肃福彩3d快三| www.08kf.com-彩票与生活庄子说梦| www.33hz.cc-网站彩票停售| www.943450.com-福彩与体彩那个真实| 体彩网www.3890w.com| www.yz46.com-幸运飞艇彩票| www.531563.com-彩铅画漫画人物图片| www.86ez.com-三星彩票娱乐漏洞| www.aq3.cc-河北快三奖金新规则| www.vg36.com-百盛彩票快三| www.85ly.com-财神8五分彩| www.836647.com-利彩工具手机版下载| www.978418.com-好彩店彩票ios| www.vr73.com-安徽快三二维码平台| www.29pu.com-彩票网站推广哪家好| www.97tr.com-彩票平台登陆| www.925956.com-彩票彩种分析| www.556123.com-国乐彩注册-| www.682884.com-福利彩票怎么代理| www.815519.com-中彩堂-| www.907508.com-免费破解快三软件| www.990485.com-大本赢彩票官网登录| www.ek62.com-中国彩吧更懂彩民丨| www.n76.club-彩票怎么看号| www.151527.com-彩票缩水的意思| www.235619.com-手机什么买福利彩票| www.cp7715.com-红快三开奖-| www.i05.cn-七星彩票开奖今晚| www.50tf.com-怎么下载买彩票软件| www.366860.com-彩铅手绘麋鹿图片| www.765338.com-篮球彩票到哪里买| www.587052.com-上海福彩4d-| www.679659.com-魔方彩票苹果下载| www.367842.com-彩铅古风锦鲤| www.467813.com-修改福利彩票兑奖| www.550588.com-买彩票神器中奖| www.267025.com-推导彩票-| www.349152.com-3d乐彩字谜画迷| www.874317.com-808七星彩版| www.945996.com-美国45秒彩开奖| 百姓彩票www.bxcp3.com| www.93128.cc-才峰竞彩团队| www.195769.com-贵州快走势图彩经网| www.484078.com-体育彩票下载官网| www.ql11.com-一定牛彩票停售| www.ak54.com-河北快三遗漏走势| www.29xw.com-中国体彩主任| www.64388.cc-体育彩票号码是什么| www.155596.com-康彩娱乐体彩乐吧| www.223470.com-贵州福彩快三走势图| www.566043.com-中华彩吧怎么样| www.0dc.cc-个人玩私彩违法不| www.815133.cc-下载天天福彩| www.886076.com-彩库宝典开码结果m| www.954454.com-彩票店双色球二维码| 福彩www.16878d.com| www.230272.com-幸运快三哪里玩| www.324175.com-支持提现彩票app| www.400001.com-富彩三d开奖号| www.492977.com-竞彩看盘术语解析| www.562114.com-金辉彩票网-| www.pu81.com-98彩票骗局揭秘| www.03se.com-购彩iv下载-| www.55lu.com-山西竞彩5800万| www.22785.cc-九州彩票软件分析| www.66293.com-京东彩票可信吗| www.760368.com-韩国彩票怎么玩法| www.988436.com-广东福彩兑奖地址| www.hr.com-足球竞彩网首页| www.613186.com-和盛彩票-| www.129137.com-昨天3d彩票中奖号| www.69572.com-九九购十分彩| www.795865.com-大乐透彩票选号软件| www.94598.com-足彩模型-| www.m39.cn-爱彩乐11选5遗漏| www.8819.vip-分分彩全部玩法介绍| www.71874.com-永旺彩票网-| www.176288.com-河南新快三-| www.325811.com-新浪彩票开奖一信息| www.553259.com-彩票53倍-| www.03975.com-中国三d彩票下载| www.333287.com-竞彩兑奖上税| www.439005.com-306期彩票-| www.539442.com-未来彩票前景| www.678264.com-重庆彩钢棚-| www.738131.com-百度乐彩网下载| www.787711.com-彩客科技-| www.839366.com-竞彩米斗推荐网| www.190906.com-人人中彩票-| www.861387.com-体彩排列三玩法说明| www.978239.com-彩钢扣板厂家| www.ch9.com-福利彩票发行目的| www.067082.com-福彩快3官方直营网| www.690797.com-苏州体彩11选5| www.760618.com-体彩七位数中奖图片| www.822124.com-七星彩18143期| www.894422.com-湖北一定牛彩票网| www.953496.com-黄好彩爆珠-| www.997604.com-广东快中彩中奖规则| www.sf9.cc-上海体彩十一选五开| www.311866.com-快三开的什么号| www.380035.com-体彩每周开奖几次| www.474518.com-福彩快三计划聊天室| www.212335.com-体彩屋下载app| www.271635.com-中原彩票app| www.323417.com-七乐彩中奖查询工具| www.370229.com-大款买彩票倾家荡产|