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.53gb.com-福彩3d口袋布衣图| www.268322.com-福利彩票软件能用吗| www.510494.com-怎么吹彩虹屁| www.543567.cc-中国体彩报彩票推荐| www.bd71.com-韩国快三哪里开奖| www.r49.top-福彩3d今天-| www.93qp.com-一寸彩照是那种| www.8299.org-聚宝盆时时彩安卓版| www.86504.com-查询福彩体彩软件| www.120227.com-宝马彩票案-| www.b87.pw-上海快三爱乐彩下载| www.294191.com-01彩票能提现么| www.226021.com-安全的网上购彩平台| www.2657.cn-好运彩彩票入口| www.152824.com-海南七星彩梦册网| www.279787.com-快三开奖遗漏号| www.00981.com-我要下载彩99旧版| www.659270.com-七乐彩31期开奖| www.067672.com-彩票打印机原理| www.10wj.com-彩票表情图-| www.32tq.com-彩票信用盘开户| www.612346.com-恽煌彩票-| www.711794.com-足彩走势图310| www.gh1.cc-快彩官方网-| www.191779.com-湖北快三走势分布图| www.854.bid-时时彩万位选号技巧| www.006496.com-河南体彩中心地址| www.807883.com-多哚彩票-| www.882650.com-易彩为何不能买彩票| www.13zd.com-七星彩论坛论坛| www.3998.in-七星彩19022期| www.3667.cm-昨晚彩票开奖| www.449778.com-武汉体彩中心在哪里| www.874109.com-福彩3d通选-| www.78bw.com-广东增城私彩黑吃黑| www.724141.com-买彩票是不是赌博| www.873697.com-享彩彩票app| www.983882.com-海南海口七星彩早版| www.az11.com-福利彩票开奖新结果| www.9336.biz-彩票得主中奖秘诀| www.700747.com-彩套印刷-| www.865310.com-福利彩票店利润| www.939422.com-福彩选四-| 500彩票www.602436.com| www.04jt.com-竞彩冷门规律| www.2545.org-六冠彩票是真是假| www.517125.com-柬埔寨博彩客服招聘| www.711383.com-我要天天福彩| www.r34.cc-乐城网购彩-| www.647645.com-吉林快三庄家联系| www.833369.com-中国体育彩票扫码| www.964300.com-绵阳体彩中心在哪| www.iq9.com-内蒙快三和值走势| www.610843.com-如何在杭州开彩票店| www.728330.com-金利彩票大发快三| www.801997.com-江苏快三和值遗漏表| www.874138.com-最新七新彩开奖结果| www.021327.com-湖北体彩网官方网站| www.718.biz-竞彩推荐表格制作| www.668748.com-中国彩票害惨彩民| www.201943.com-内蒙快三一百期| www.1182.love-慱发彩票是哪里的| www.00993.com-福彩3d出什么号码| www.53144.com-m5登录彩票-| www.008134.com-酷彩彩票靠谱吗| www.099041.com-3d彩票太湖图迷| www.170350.com-双彩l论坛-| www.dm7.cc-10分钟一开的彩票| www.969143.com-福彩公益金使用违规| www.r54.com-快三助手安全吗| www.369611.com-一起博彩票官方网站| www.497666.com-想了解一下辉煌彩票| www.575054.com-第37的彩票结果| www.652580.com-福利彩票双色球三d| www.1484.tv-竞彩电脑版-| www.823401.com-附近体育彩票站点| www.918456.cc-u9彩票软件苹果| www.976094.com-结婚彩礼顺口溜词语| www.cp430.cc-快三输了回血找我| www.my38.com-网易快三计划分析| www.t32.net-能合买的彩票| www.39ms.com-东莞市体彩征召| www.089510.com-怎样刷彩票流水| www.933342.com-各省快三走势图| 易彩网www.36166d.com| www.10lq.com-七星彩牛爹-| www.994190.com-时时彩手机做号工具| www.zi54.com-一分快三长龙有规律| www.1946.name-玩彩黑平台-| www.88251.com-提现秒到的彩票平台| www.526466.com-时时彩包胆技巧| www.857908.com-e体彩足球竞猜| www.678825.com-重庆时彩刷量方法| www.779122.com-福彩3d定位杀号| www.309928.com-正规玩快三的app| www.87329.com-手机彩色贴纸| www.711396.com-彩票出票返点| www.798338.com-大彩鲸网页-| www.ej07.com-北京快乐彩开奖记录| www.71665.cc-3d天天彩就业时报| www.pr77.com-湖南的福利彩票| www.162082.com-汇彩网官网-| www.008613.com-彩票走势图怎么下载| www.698553.com-台州体彩网-| www.014773.com-王刚讲故事东北彩王| www.002320.com-香港快三怎么玩| www.9229.biz-众彩彩票靠谱吗| www.34373.com-菠萝彩双色球分析家| www.72795.com-体育彩票站转让出兑| www.025375.com-免费下载爱彩通| www.899311.com-湖北快三分析预测| www.059958.com-全民彩票官方网站| www.168231.com-湖北爱乐彩-| www.8844.net-2588彩票网站| www.077090.com-新彩网字谜-| www.254414.com-亚博彩票官方网站| www.cb3.com-福利彩票快三平台| www.064342.com-快速时时彩是私彩吗| www.432107.com-天空彩票与开奖问行| www.32289.com-彩色包装纸箱厂家| www.201585.com-七星彩预测-| www.031065.com-038彩票下载网站| www.39225.cc-彩票规则和开奖日期| www.92360.com-一定牛足彩下载| www.1400.org-彩宝贝双色球走势图| www.8259.top-聚彩jc-| www.387292.com-iphone彩膜贴| www.499559.com-100万彩票-| www.567782.com-濠江彩票与神童彩开| www.632525.com-五分赛车彩票如何买| www.691013.com-足球竞彩比分360| www.760393.com-彩神人大乐透专栏| www.819852.com-特区彩票平台| www.959401.com-河北快三出号统计图| 网易彩票www.36788r.com| www.dh22.com-彩票达人推荐| www.r78.cn-福彩3的图迷总汇| www.700522.com-玩彩输钱的人怎么办| www.125916.com-预测彩票app下载| www.800461.com-福利彩票怎样中奖| www.863365.com-大智慧彩票下载| www.910193.com-福彩3d今天图吧| www.960842.com-福利彩票6十1| 幸运彩票www.5095n.com| www.39be.com-体彩高频足彩走势图| www.32985.cc-彩票蚂蚁团队| www.91752.cc-五百彩票网开奖| www.13697.com-五分时时彩开奖号码| www.65841.com-七星彩模拟摇号| www.678614.com-安卓精英彩票| www.5862.cc-彩票照片可以兑奖么| www.59dx.com-体育彩票7星彩走势| www.03700.com-买彩票一定会亏吗| www.502567.cc-探探彩票托有回扣吗| www.246776.com-保定彩票站-| www.397164.com-中国福利彩票计算器| www.572693.com-东盛彩报1版| www.696763.com-香港皇家时时彩| www.810789.com-我的彩票在哪里兑奖| www.935223.com-福彩有哪些种类| 发彩www.50732y.com| www.rb73.com-甘肃快三全天计划| www.7386.xyz-色彩斑斓的眼睛画法| www.057222.com-福彩安徽快三网站|