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天

知道了
彩01彩票 www.914951.com-五星彩票是正规的吗| www.796336.com-怎样制作竞彩表格| www.0683.org-彩票店装修样板| www.674310.com-幸运彩是不是骗人的| www.883202.com-彩友多微信彩票店| 七星彩票www.3qxc.com| www.04ok.com-水彩风景画-| www.a59.top-江苏快三电子走势图| www.165161.com-全彩助手官网| www.603286.com-太原福彩领奖| www.737676.com-参与网络快三违法吗| www.822991.com-凤凰彩票有哪些网址| www.887469.com-釉下彩怎么画| www.087656.com-官方云彩厅app| www.377966.com-开体彩店要怎么装| www.557445.com-福彩机选号码在线| www.876065.com-各省份快三开奖结果| 吉利彩票www.80065q.com| www.249498.com-河北燕赵风彩福彩网| www.554768.com-5分快三大小技巧| www.304108.com-彩票01app-| www.566848.com-彩虹六号进游戏崩溃| www.642280.com-福利彩票存在的意义| www.766435.com-鑫彩美缝剂厂家直销| www.866993.com-福彩中心放假吗| www.955098.com-佛教与彩票-| www.fn24.com-3d福彩中心开机号| www.e99.club-七星彩开奖日期| www.56qv.com-网络彩票重启时间| www.370148.com-七星彩开奖结果机选| www.34182.com-保定福彩电话| www.98837.cc-足彩任选9-| www.863812.com-吹吹七星彩交流专区| www.966495.com-全球彩是什么东西| www.bo79.com-一分钟快彩-| www.826798.com-彩票造假事件刘亮| www.4818.cn-彩宝彩票苹果版| www.32242.com-怎么计算快三和值| www.001462.com-新皇冠彩票网| www.155729.com-彩票实战技巧| www.817499.com-彩票数据表格| www.920303.com-彩之星下载专区| www.981708.com-吉利彩票网投可靠吗| www.as21.com-体彩和福彩哪个真实| www.752386.com-竞彩足球哪个平台好| www.842181.com-福彩和体彩-| www.913666.com-快三提现延迟吗| www.974300.com-网购彩票是骗局吗| www.cai3457.com168彩票网-| www.pu46.com-98彩票网安全吗| www.14yc.com-iso七星彩软件| www.87fj.com-乐彩工具图-| www.856018.com-彩站宝网页版登录| 利彩www.57578j.com| www.605530.com-海口七星彩几等奖| www.714188.com-三d走势图彩经网| www.816234.com-今晚彩票出什么号码| www.22sv.cc-彩票停售原因| www.3826.in-体彩19055-| www.9938.pw-大彩网空心菜博客| www.56553.cc-竞彩网强胆推荐| www.53287.com-北京极速快三| www.98182.cc-浙江体育彩票6| www.383783.com-彩票3d组六走势图| www.575457.com-彩99老版下载| www.123534.com-正规网络购彩平台| www.246543.com-2345全民送彩票| www.489076.com-中国体彩培训平台| www.13pw.com-体育彩票大奖时间| www.0428.wang-彩缘同志-| www.456781.com-六今彩幵码结果| www.307660.com-河南派彩电子走势图| www.8269.top-杨幂品彩丝袜广告| www.35598.com-彩票杀号-| www.798839.com-体彩太湖三字诀| www.916829.com-如何举报彩票网站| 大赢家彩票平台www.507670.com| www.090788.com-彩票中5块-| www.9785.cm-体彩排三最新开机号| www.686073.com-手机上买福利彩票| www.772142.com-体彩竞猜网-| www.840096.com-如何叫传统戏彩票| www.899890.com-福利彩票站向申请| www.966058.com-快三最长遗漏多少期| www.cai2266.com福彩3d开奖结果| www.fi11.com-时时彩51计划网| www.xd05.com-618彩票网-| www.310669.com-今天甘肃快三推存号| www.781942.com-彩票黑彩网址| www.883844.com-乐彩17500-| www.954619.com-足彩世界杯比赛竞猜| 500彩票网www.61655d.com| www.lk83.com-正规官方彩票有哪些| www.01732.com-足彩购买大厅| www.79155.cc-ns彩贴-| www.6kr.com-等差数列与彩票| www.61ck.com-彩票大盘系统软件| www.1059.vip-时彩赚钱专业团队群| www.52925.com-快乐好彩-| www.052604.com-彩盈彩票-| www.389929.com-d8彩票客户端| www.561277.com-厘模式彩票平台排名| www.634104.com-北京市彩票咨询中心| www.761484.com-河北快三高手群| www.820460.com-彩钢房顶寿命| www.891633.com-彩票组合号码器| www.955788.com-足彩胜负彩中奖| 环球彩票www.47d.cc| www.304360.com-江苏快三有哪些技巧| www.281712.com-六壬测彩3d-| www.364666.com-太阳彩票下载| www.450024.com-现在买彩票的人多吗| www.306075.com-凤凰彩票是怎么回事| www.374437.com-彩票站点号-| www.501255.com-迷彩虎讲堂下载| www.562071.com-分分钟彩-| www.618537.com-全国各地彩礼价格图| www.679421.com-神彩网手机版本| www.753812.com-558彩票靠谱吗| www.821910.com-彩票沙龙好玩| www.6216.com-快三摇奖程序开发| www.8800.in-金彩网大发快三| www.65037.com-710竞彩平台骗局| www.019896.com-500万彩票时时彩| www.077723.com-彩拍ios软件下载| www.313231.com-大发彩票坑人| www.372037.com-彩宝贝彩票-| www.455234.com-皇冠彩票犯法吗| www.556335.com-非法彩票平台名单| www.611989.com-买环球五福彩赢钱吗| www.680587.com-体彩到底是真的假的| www.739414.com-彩票99单机游戏| www.802111.cc-天天乐购彩票app| www.869504.com-广西福彩官网结果| www.950480.com-乐彩网怎么不能下载| 彩乐坊www.55clf.com| www.623387.com-三星彩票app| www.750082.com-七星彩4个号多少钱| www.854608.com-中彩网3b试机号| www.952934.com-竞彩足球推介必准| www.vr4.cc-华人彩票—官方网站| www.27639.com-118彩票网站| www.089200.com-台北快三赢钱技巧| www.680642.com-彩票欠款打官司| www.807969.com-优彩app官网| www.896722.com-盁彩网-| www.cai8311.com彩票查询表-| www.tg20.com-亚大彩票-| www.89859.com-七星彩摇奖在那看| www.3022.vip-体彩排列三克皇一胆| www.59583.cc-下载分分中彩| www.702390.com-聚星彩票投资怎么样| www.71kd.com-体彩排列三字迷总汇| www.1905.in-彩票自动报号机器人| www.9041.biz-今天七彩星开什么奖| www.35664.com-全能中彩可靠吗| www.681507.com-辽宁体彩中心在哪里| www.438118.com-打彩票犯法吗| www.531416.com-好看又简单的彩铅画| www.605527.com-手机用彩膜好不好| www.026224.com-快三的走势怎么看| www.111913.com-淘彩app合法的吗| www.199228.com-广西快彩-| www.501052.com-彩色生活照片|