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.oh82.com-河北保定快三走势图| www.51gn.com-足彩11转9怎么买| www.317269.com-彩九平台明儿| www.448369.com-大乐透彩票几点开奖| www.615268.com-手机买不了彩票| www.798178.com-快三开奖要几分钟| www.927206.com-凤凰彩票提款| 500彩票www.50024w.com| www.0058.vip-福彩3d寻宝图做用| www.6198.win-秒速快三下载安装| www.d56.org-123彩票历史| www.95mq.com-星际彩票平台多久了| www.6588.net-彩票白菜网址| www.51519.cc-信彩彩票官网首页| www.841088.com-彩妆盘什么牌子好| www.903281.com-幸福彩票是什么| www.963821.com-500彩票网页版| 大赢家彩票网www.636121.com| www.je17.com-长春福彩中心地址| 幸运彩票网www.33598s.com| www.ff89.com-117彩票-| www.wg97.com-甘肃逸彩快三查询| www.32ap.com-彩虹六号可达鸭头像| www.96fz.com-众彩网叶子3d预测| www.2310.me-彩城彩票注册是干嘛| www.138406.com-三六零彩票-| www.246151.com-彩5彩票-| www.313210.com-好彩网3d图谜总汇| www.377202.com-qq彩票不能用了| www.572608.com-体彩四码最大遗漏| www.699557.com-福彩双色球电视直播| www.is30.com-口袋彩票合法吗| www.71782.com-今天3d银海彩报| www.092147.com-体彩论坛体彩三句话| www.200602.com-手机福利彩票注册| www.308061.com-体彩二十选五走势图| www.382201.com-彩仙阁挂机软件怎么| www.521166.com-北京快三春节停几天| www.584104.com-48彩票是什么| www.661173.com-128彩票坑人| www.757244.com-彩色沥青混凝土厂家| www.891466.com-彩神计划破解版下载| www.7743.biz-彩票平投方法稳赢| www.up15.com-爱快三彩票-| www.72ax.com-甘肃爱乐彩快3| www.1615.wang-云彩网彩票正规吗| www.7774.com-肖立刚教快三视频| www.20121.com-今日足彩推荐网易| www.64868.com-竞彩傻瓜规律| www.005266.com-71彩票官网首页| www.094877.com-福彩双色球摇奖视频| www.178949.com-下载快三技巧| www.242007.com-彩票2元网电脑版| www.308646.com-大乐购彩票怎么玩| www.368973.com-中奖彩票店主没了| www.462013.com-中华公益福彩开机号| www.538644.com-必赢彩票pk10| www.618677.com-刮刮彩怎么看| www.723454.com-彩乃奈奈百度云| www.796905.com-九宫图预测彩票尾数| www.911509.com-快三选号的图| www.966736.com-宝马五分彩-| 易彩集团www.25688j.com| www.fk40.com-河南省快三定牛| www.wj13.com-快乐双彩开奖结果| www.18ky.com-传统足彩首页| www.88vg.com-时时彩几点开奖时间| www.566951.com-香港好彩堂资料中心| www.635884.com-彩票税收计算| www.696666.com-彩世界走势计划软件| www.761501.com-好彩妹钻进蛇精肚子| www.819723.com-特区七星彩网站| www.879353.com-天津福利彩票| www.966705.com-中国福彩3d双彩图| 中国福利彩票www.33588b.com| www.ew27.com-休育彩票-| www.uq29.com-c168彩票网站| www.9bp.com-美国彩票强力球开奖| www.70337.com-36o福彩购彩大厅| www.110060.com-新乐彩染发-| www.225674.com-英国时时彩官方| www.333193.com-五分彩有什么技巧啊| www.449113.com-如何研究海南体彩| www.568160.com-体彩考试知识点总结| www.772034.com-彩票77755-| www.835289.com-炫彩字图片大全带字| www.895528.com-新加坡快三开奖查询| www.976485.com-想看看彩票会奖情况| www.sw8.com-上海快三预测专家号| www.pf59.com-快三中豹子多少钱| www.0jq.com-彩599-| www.57zs.com-快三摇奖模拟器选号| www.1239.net-网上买的彩票合法吗| www.632381.com-吉林快三任意位差| www.731459.com-好彩水果味烟多少钱| www.828761.com-神秘彩票app| www.921235.com-江苏快三套路教学| www.995014.com-5000万彩票官网| www.pr68.com-体彩助手二维码| www.58fa.com-百宝彩票靠谱| www.1407.cm-大乐透彩池最新资金| www.9648.cm-彩经网排列3选胆图| www.61337.com-南京众彩市场| www.031234.cc-淘宝彩票中奖真的吗| www.135247.com-二元彩票网走势图| www.236645.com-竞彩足球害死多少人| www.202098.com-利彩app官网下载| www.445414.com-3的新彩网-| www.076737.com-韩国彩票快3| www.323342.com-竞彩篮球推荐网| www.530921.com-公益时报中华彩票网| www.953192.com-红好彩好抽吗| www.633658.com-河南福彩22规则| www.789068.com-竞彩最新资讯| www.727151.com-08号彩票论坛| www.x33.in-凤凰彩票分分彩计划| www.1673.com-红彩会登录8| www.58729.cc-竞彩牛师傅-| www.057617.com-3d福彩图吧第五版| www.183703.com-重庆快三是真的假的| www.316129.com-上海快三秘诀| www.440342.com-765彩-| www.978100.com-七星彩最近十期号码| www.128.in-时时彩能挣钱吗| www.8895.live-竞彩半全场中奖图片| www.026461.com-竞彩之王的微博| www.136715.com-易彩乐是什么网站| www.296064.com-广西快彩网-| www.471178.com-祝你发财彩票网| www.582721.com-倒霉时怎么买彩票| www.947371.com-福彩计划聊天室视频| www.4006.name-买竞彩足球能发家吗| www.379584.com-彩票开奖结果历史| www.5970.me-我要看体彩排列三| www.51160.com-彩乐乐专家杀号汇总| www.021745.com-熊猫竞彩app中乙| www.127480.com-彩虹世界官网网址| www.259351.com-体彩预测软件哪个好| www.358930.com-体育彩票红球多少个| www.947692.com-江西快三下期预测| www.86su.com-云南彩票中奖没人领| www.cp5355.com-福彩快三什么意思| www.q51.org-安徽最大的彩票弃奖| www.69du.com-皇冠彩票是正规的么| www.5522.top-河北省体彩中心举报| www.30269.com-足彩007-| www.219411.com-爱彩乐网址-| www.365674.cc-彩铅动漫人物画图片| www.539658.com-彩虹的约定歌词歌谱| www.825792.com-彩宝贝3d十位杀号| www.927338.com-吉林十一选五爰彩乐| www.992811.com-中彩在线是怎么回事| www.403357.com-七星彩规划算局| www.599732.com-彩票号全买-| www.731994.com-今日佬牛足彩| www.834482.com-好彩青柠-| www.568207.com-体育彩票官方网热线| www.2607.wang-彩生活e师傅app| www.82179.com-彩七七充值不到账| www.130480.com-彩票销售点编号| www.262775.com-快三十大口诀| www.880524.com-7乐彩走势图| www.298577.com-兰州市福利彩票中心| www.6880.cm-胜负彩竞猜对象|