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天

知道了
7星彩 www.2xp.com-台湾基诺彩-| www.96738.com-竞彩概率计算方法| www.191449.com-吉林快三免费计划| 500彩票www.50054j.com| www.739324.com-怎么下载百盈快三| www.876008.com-足彩14场竞彩| www.957342.com-全天132彩票计划| 大赢家彩票平台www.357803.com| www.jv64.com-重庆时彩注册网址| www.5wn.com-彩票网源码下载| www.963617.com-梦到彩虹是什么意思| www.508.vip-网络彩票赌博有赢吗| www.7555.site-东方亮彩官网| www.64898.com-碧彩ii800校称| www.038212.com-彩九九app-| www.171335.com-河北快三开奖查询| www.788844.com-中彩网一官网| www.dx7.com-分分快三提前开奖| www.ur17.com-鸿彩快三在哪下载| www.27zr.com-全彩本子百度云| www.018822.com-苏州福利彩票领奖| www.151298.com-天天中彩官网登录| www.323207.com-鸿运来彩票官方网站| www.601784.com-百胜彩票网址是多少| www.699751.com-nba体育彩票分析| www.799027.com-刺客研彩论坛| www.872550.com-体彩山西11选五| www.940523.com-彩6彩票苹果版本| www.998023.com-七星彩彩版高速下载| www.fk60.com-七乐彩奖金-| www.zp86.com-福彩票24号-| www.51ev.com-足彩如何人工缩水| www.0128.top-威尼斯彩色岛怎么去| www.292018.com-福彩3d讨论区| www.429335.com-广州彩鹰喷绘| www.592831.com-彩虹805-| www.684511.com-五分快三人工计划网| www.936017.com-幸运五星彩软件| www.202710.com-湖北福彩网精彩十分| www.363125.com-天彩app官网| www.555560.cc-快三中多少-| www.700823.com-福彩价格表-| www.823997.com-我想去买彩票| www.954482.com-博牛彩票怎么提现| www.fy83.com-三分时时彩开奖| www.14rl.com-安徽彩票中心在哪里| www.596977.com-吉林快三明天啥好| www.719976.com-七星彩选号口诀| www.996940.com-快3遗漏內蒙爱彩| www.xe03.com-甘肃快三推荐群| www.72cj.com-梦到彩票没中奖| www.882409.com-彩l吧论坛官网首页| www.w74.club-走势图快三福建省| www.561807.com-内蒙快三今日推荐号| www.21636.com-6678彩票下载| www.034795.com-黑客破解时时彩软件| www.505326.com-乐彩论坛独胆第一人| www.603715.com-彩票中奖会怎样| www.23ct.com-天津彩票5000万| www.5340.cc-1号彩票注册平台| www.39759.cc-江苏快三走视| www.058929.com-体彩开奖中国竞彩网| www.640338.com-新浪爱彩十四场直播| www.190807.com-江苏快三时间调整| www.xw03.com-ios正规彩票软件| www.31186.cc-神彩争霸11下载| www.6717.cc-app好彩客-| www.58856.cc-体彩排列五开奖中奖| www.308660.com-i江苏快三开奖结果| www.598308.com-体彩直选票开奖| www.1893.top-多彩贵州城旅游| www.5253.in-体彩七位数和七星彩| www.28128.com-快三看走势-| www.11yf.com-腾讯分分彩绝密算法| www.53161.cc-福彩排列五开奖日期| www.062945.com-彩票挂机吧-| www.96320.cc-支付宝彩票智慧管家| www.076916.com-app彩票坊-| www.9925.loan-福彩3a字谜解太湖| www.591122.com-东北结婚彩礼用途| www.tn17.com-安徽快三骗局| www.21ou.com-彩票竞猜好运连连| www.1588.hk-买彩网buy-| www.058761.com-福彩彩报第一版| www.36162.cc-福彩3d坑人-| www.189369.com-幸运彩走势-| www.063277.com-福利彩票站怎么退机| www.188387.com-体彩名词-| www.305390.com-彩票守号会中吗| www.03aw.com-买彩票是凭运气吗| www.1111.blue-上海福彩网正宗吗| www.00414.com-银川中彩票-| www.51976.cc-快三买复式怎么算钱| www.000925.com-赵公明福彩-| www.060174.com-51彩票全天计划| 39彩票www.3933v.cc| www.100698.com-乐彩客app安卓| www.6pv.com-公司赠彩票中奖| www.78iq.com-体彩快开481| www.42gh.com-小学生广播七彩阳光| www.cp5119.com-新快三玩法-| www.570589.com-七彩云南普洱茶减肥| www.688970.com-下载福彩双色球开奖| www.794223.com-如何举报彩票平台| www.27793.com-体育篮球彩票怎么玩| www.356945.com-中了彩票怎么花| www.vy29.com-贵州快三推荐号码| www.0341.loan-快三高手团队| www.29682.com-福彩网邀请码贴吧| www.526344.com-百万彩票网骗局揭秘| www.673093.com-七星彩查是否中奖| www.762615.com-靠谱的网络彩票网站| www.958043.com-彩票3d怎么买的| www.ij9.cc-福彩双色球预测| www.552232.com-c68彩票官方网站| www.355905.com-福彩分分彩-| www.gy34.com-共享彩票贴吧| www.15el.com-红彩彩票网站| www.618529.com-新浪足彩app下载| www.914027.com-买快三怎样中奖率高| www.982497.com-新2彩票下载| www.mj04.com-重庆事实彩开奖结果| www.05yz.com-水彩颜料品牌排行| www.044044.com-彩票挂机软件方案| www.844401.com-彩票是国家开的吗| www.930258.com-足彩全半场规则| www.986298.com-时时彩长期盈利方案| www.tr5.com-江西快三预测三同号| www.382330.com-创名彩票怎么样| www.1847.website一分钟出一次什么彩| www.8981.org-彩迷网在哪里找到| www.91yy.com-百万彩票一分快| www.xw80.cc-怎样买世界杯彩票| www.153999.com-湖北快三共享走势图| www.87fl.com-博彩退水什么意思| www.8646.biz-体彩双色球预测| www.071129.com-彩妆店名字大全| www.067759.com-彩票平台租借| www.387759.com-华彩置业董事长| www.855334.com-双色球彩托真实故事| www.923591.com-安吉彩票案件判刑| www.973095.com-彩虹六号各种梗| www.ck81.com-合肥快三遗漏数据| www.261376.com-99彩票正规吗| www.731510.com-d9彩票版平台下载| www.798566.com-彩八app官网| www.629077.com-足彩4月赛程安排| www.719383.com-彩吧彩票上的大神| www.795873.com-尊彩app网址| www.319678.com-七星彩查询历年号码| www.390094.com-足彩中奖3亿| www.579753.com-体彩排3排5-| www.636323.com-彩虹阅读-| www.753905.com-彩宝贝网app| www.827057.com-南方彩票安全吗| www.905556.com-快三到底怎么买| 趣彩网www.qucp9.com| www.ia84.com-彩票坊能玩吗| www.5qx.com-体彩开奖开奖号码| www.73bz.com-验证手机号码送彩金| www.602995.com-怎么破解新快三| www.212906.com-平台买彩票先赢后输| www.313078.com-彩票助手-| www.426778.com-九龙彩票下载安装|