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.897698.com-多彩贵州网怎么样| www.36796.cc-福利彩票幸运28| www.238828.com-探探彩票托相片| www.947056.com-福彩高频要取消吗| www.ri5.cc-福彩三d走势图| www.52011.cc-中彩注册-| www.043360.com-彩票刷流水靠谱吗| www.163692.com-竞彩足球分析软件| www.954240.com-彩票助赢官网论坛| www.xl7.cc-快三坑死人-| www.zi83.com-淅江福彩-| www.76tz.com-杭州福彩网公示| www.2107.shop-福利彩票42-| www.9169.loan-3b家彩开奖-| www.512705.com-大星彩票走势图官网| www.601533.com-彩漂怎么样-| www.672399.com-瑞彩祥云app安卓| www.761514.com-贵州福利彩票下载| www.132502.com-下载天天种彩票| www.78676.cc-中国体育彩票福建| www.115272.com-体彩顶呱刮新票| www.280291.com-浙江省福彩-| www.308.site-彩票纠分案-| www.252576.com-彩票刷水套利方法| www.461680.com-彩票3d号码分布图| www.619078.com-足彩19045终极| www.979572.com-一品彩票平台| www.yf46.com-高频彩票电子走势图| www.4983.vip-七乐彩与七星彩| www.63357.cc-足彩任九一注多少钱| www.067110.com-大地彩票好不好提现| www.208562.com-七星彩票术语大全| www.79894.com-海南快三真的假的| www.306382.com-刷彩app-| www.490510.com-天猫国际城彩票平台| www.648269.com-中奖的彩票公式| www.815881.com-皇冠彩票外围| www.935321.com-网络彩票不能买了| www.ez3.cc-快三怎么杀号| www.ed76.com-做彩票代理安全吗| www.63876.cc-退还彩礼的三个条件| www.138576.com-竞彩实体店兑奖| www.269218.com-彩票砍龙是什么| www.463955.com-免费港彩资料中心| www.622132.com-彩票刮刮卡软件| www.838211.com-竞彩二串一打水软件| www.965915.com-51彩票网手机登录| www.vk51.com-快三平台系统搭建| www.789.gg-海南彩票规律福连得| www.15649.com-河北快三奖金| www.616256.com-竞彩篮球赛果| www.713958.com-旭彩彩票在线平台| www.807752.com-陈赫彩票-| www.876369.com-今日彩票运势| www.jk68.com-快三自己-| www.c49.cn-江苏快三跨走势图表| www.0730.me-大庄家彩票平台| www.00983.com-五选三彩票下载安装| www.77784.com-88好运彩彩票网| www.044593.com-快彩王app-| www.133038.com-彩钢道路围挡| www.215791.com-中国福利彩快三开奖| www.632.cn-77彩票网官方网站| www.7094.cc-银川银燕七彩| www.8614.cn-华夏彩票用户注册| www.66634.cc-福彩数字三开奖号码| www.sr83.com-官网吉林快三开奖网| www.568773.com-m8彩票一彩种| www.929342.com-盈彩在线下载安装| www.986553.com-567彩票安卓版| www.07614.com-体彩大乐乐秀| www.2286.vip-哪些平台上能买体彩| www.20217.com-彩票是人为的吗| www.69224.com-500竞彩历史数据| www.cai2444.com湖北快三预测| www.518801.com-发彩网是合法的吗| www.704546.com-私彩黑客-| www.806583.com-32期福彩-| www.885463.com-2118彩票软件| www.967232.com-体彩排列五选号法| www.dj77.cc-中福彩票坑人| www.5340.cc-1号彩票注册平台| www.42316.com-修改彩票网站余额| www.001535.com-天天爱彩票提现| www.915836.com-全国彩票店-| 七乐彩票www.qilc9.com| www.ro15.com-彩之源app快三| www.973648.com-19033体彩-| www.hj12.cc-江苏快三二期计划| www.zb99.cc-甘肃省福彩领奖地址| www.ij62.com-广东福彩短信投注| www.x73.net-恢复网站彩票投注| www.77ez.com-彩票指南报纸风采网| www.378648.com-幸运彩网福-| www.768404.com-免费彩铃-| www.867950.com-喜中特彩-| www.964284.com-竞彩足球开奖全结果| 彩天下www.196909.com| www.yg84.com-分分彩后二怎么杀号| www.333740.com-微彩是啥-| www.407423.com-中国全民彩票可靠吗| www.651506.com-彩票棋牌一体源码| www.758941.com-福彩选大小-| www.848016.com-聚财神m8彩票| www.902512.com-亚朵网国彩票合法吗| www.970245.com-福彩双色球开奖信息| 双彩网www.656650.com| www.jd41.com-浙江福彩快三| www.8754.cn-彩票查看双色球| www.122318.com-一分彩要怎样才算中| www.216387.com-大发快三能赚钱吗| www.290380.com-内蒙古彩票开奖结果| www.902345.com-重庆时时彩5分| www.835961.com-今晚体彩排列五开奖| www.976278.com-红彩网客户端下载| www.cp3819.com-福利快三是真的吗| www.rf56.com-快三高手大小单双| www.3460.cm-有大学生中彩票吗| www.27921.cc-新利快三最大遗漏| www.386613.com-台湾威力彩-| www.503391.com-福彩3d老北第版| www.568491.com-新浪爱彩是什么意思| www.44439.com-购彩启明团队| www.630223.com-日本化妆品四季彩| www.742881.com-棋牌游戏注册送彩金| www.520404.com-喜欢彩票-| www.687459.com-福彩3d模拟投注| www.809049.com-排列三开机号彩吧| www.232032.com-9188彩票-| www.379311.com-新葡萄金彩票| www.699806.com-7星彩杀号-| www.848221.com-彩票快三秘密| www.9286.xyz-时时彩四星小概率| www.092244.com-重庆时时采彩开奖号| www.613102.com-福彩l开奖-| www.ae53.com-体彩19032期| www.25507.com-安徽省彩票中心领奖| www.803532.com-网上买彩票犯法嘛| www.919332.com-中彩网北斗3d推荐| 500万彩票www.35155w.com| www.933780.com-我被别人拉到彩票群| 500彩票www.303481.com| www.kq29.com-全民中彩票-| www.880723.com-淘宝彩票官网首页| www.953042.com-鸿运彩票官方| www.998202.com-神州五分彩-| www.oi36.com-宁夏快三走势图电子| www.36679.cc-三千万彩票app| www.325760.com-好彩门户免费资料大| www.71954.com-富民彩票破解软件| www.249044.com-6234彩票-| www.101163.com-山东省福彩中心地址| www.530064.com-重庆时时彩中奖查询| www.665490.com-七乐彩去哪里领奖| www.030721.com-手机微信里的中国彩| www.880815.com-搜福利彩票双色球| www.45nj.com-鼎盛买彩票正规吗| www.4455.net-必发彩票官网登录| www.288937.com-彩票123安卓下载| www.523120.com-内蒙古福利彩票中心| www.654983.com-红辣椒够七星彩安装| www.i59.club-南方双彩票-| www.405.net-来自旺彩社区字谜| www.46196.com-时时彩预测计划在线|