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.738822.com-正规彩票微信交流群| www.60505.com-关于中彩票的故事| www.86905.com-彩票vlll-| www.219815.com-彩吧论坛首页牛彩| www.658692.com-双彩网官方论坛| www.737172.com-上海体彩七星彩| www.905836.com-亚搏彩票app| 彩民网www.76520m.com| www.607474.com-彩票双色球几点开售| www.1925.vip-规模最大的87彩店| www.557523.com-代理网络体育彩票| www.wz89.com-湖北福彩快三分布图| www.312236.com-彩票33网官网首页| www.648455.com-网上在哪能买彩票| www.771684.com-体育彩票申请流程| www.959741.com-赢彩网app下载| www.b52.in-湖南体彩论坛首页| www.44jw.com-福彩胆拖的玩法介绍| www.7401.com-福彩公益语言| www.ut17.com-快三秒珍珠奶茶加盟| www.02662.cc-玩彩票软件下载| www.222453.com-河北快三多少期| www.023803.com-彩票中了三个| www.182121.com-广西福彩助手| www.679517.com-彩票2000试玩金| www.510352.com-彩票如何平投| www.7074.org-七彩嘟嘟珠心算| www.388506.com-彩票群一直赚钱| www.9437.top-七星彩算法公式| www.926558.com-彩32网站-| www.618212.com-体彩排三走势图综| www.903964.com-专业彩票软件定制| www.649261.com-12580买彩票| www.851893.com-特彩吧app-| www.rg6.com-五福彩票-| www.79155.cc-ns彩贴-| www.76661.com-中国体育彩票赛事| www.822333.com-体彩868出现前后| www.f38.club-彩票大全网址| www.879334.com-真锅彩介绍-| www.986388.com-金手指彩票软件| www.xm39.cc-福利彩票3d牛人| www.189984.com-江苏快三多久一期| www.379.biz-彩票优乐商城| www.7664.cm-福彩logo矢量图| www.37775.com-六喝彩开奖结果香港| www.4074.cc-乐彩33登陆-| www.86691.cc-莱利彩票害死人| www.949771.com-1240中华彩票| www.cp100.cc-彩票快三开奖| www.rg12.com-万彩吧福彩3d预测| www.188511.com-香港优彩社区| www.268106.com-时时采彩走势图| www.352001.com-中国彩票骗局27亿| www.949846.com-网络极速3d彩票| www.ex52.com-彩票追号神器| www.13nr.com-七星彩神算子| www.1764.xyz-万彩影像大师教程| www.090902.com-go彩安卓-| www.nh26.com-购彩xv-| www.711999.com-彩58软件下载| www.865349.com-彩02彩票谁知道| www.993368.com-足彩任九奖金最高| www.m34.org-大发快三刷流水收益| www.761157.com-时时彩怎么玩法| www.787285.com-云南体彩官网| www.130502.com-一定牛彩票足彩| www.563209.com-大正彩翼官方网| www.637337.com-小米彩虹5号电池| www.607911.com-四川福利彩票12| www.nx89.com-福彩快3网上查询| www.975112.com-购彩网用户注册| www.rs06.com-彩票赔钱-| www.613.website免费时时彩预测软件| www.6470.cn-找玩彩票的客户| www.446700.com-竞彩6串1大奖| www.133.in-彩虹马图片大全大图| www.427340.com-足彩14场进球预测| www.bj59.com-乐盈彩票黑平台| www.5392.cc-人物彩铅画教程视频| www.538453.com-大众彩票网骗局揭秘| www.45272.com-顶尖团队彩票计划| www.338403.com-七乐彩开机号| www.114865.com-精英彩票论坛| www.281915.com-体彩竞彩店效果图| www.456531.com-1995年马彩结果| www.547789.cc-福利彩票详细情况| www.728944.com-重庆快三怎么玩稳赚| www.937680.com-彩票中奖故事最新| www.x55.cc-快钱彩票网址入口| www.43110.com-黑彩快三怎么拉人| www.23xh.com-6698彩票app| www.389987.com-彩票奖池排行榜| www.569016.com-时时彩搭建一条龙| www.656731.com-色彩性格测试| www.575617.com-中国竞彩报-| www.822611.com-山东福彩群英会欢迎| www.964475.com-新浪体育足彩频道| www.an26.com-湖北快三奖金对照表| www.cp998.com-北京福彩快3| www.541418.com-竞彩几点可以兑奖| www.548608.com-第九彩票官网下载| PK彩票www.959122.com| www.854635.com-大乐透开门彩杀号| www.560349.cc-澳门快三app| www.0900.top-杏彩彩票提现被黑| www.092950.com-建一个私人彩票网站| www.721753.com-竞彩和单场区别| www.793058.com-绵阳福彩彩票加盟| www.035169.com-七星彩彩票统计器| 大钱庄彩票www.c5986.com| www.447282.com-四川体彩中奖号码| www.147918.com-网络彩票投注员兼职| www.958484.com-七星彩开奖公开结果| www.ee27.com-58彩票平台-| www.325307.com-海南私彩规律| www.997213.com-足彩奖金怎么算| www.by50.com-天天中彩票手机版| www.qm07.com-乐彩33众飞-| www.9973.in-福彩3d马后炮太湖| www.ui31.com-高频彩停止-| www.i95.la-快三公式怎么算的| www.253327.com-吉林快三有假吗| www.456010.com-彩票至尊宝典破解版| www.571400.cc-快三四码红什么意思| www.671427.com-时时彩分析走势图| www.772556.com-时时彩四星开奖结果| www.998661.com-济宁福彩网七乐彩| www.mc20.com-玩彩app-| www.443646.com-体彩千禧试机号| www.01207.com-五亿彩苹果下载| www.947459.com-中国彩票彩吧| www.457185.com-合买彩票中奖几率| www.632372.com-彩店宝倒闭了吗| www.749338.com-七彩网彩票下载| www.843432.com-体育彩票公益口号| www.957275.com-盈宝彩注册-| www.hw28.com-体育彩票管理中心| www.91xy.com-福利彩票中将结里| www.61876.com-双色球彩票兑奖时间| www.77557.cc-竞彩滚球术语对照| www.641666.com-彩票纸长宽是多大| www.715293.com-宝马彩票能提现吗| www.800228.com-大乐透彩票500| www.875892.com-彩票怎样看走势图| www.944987.com-248彩票最新| 彩乐乐www.cll168.com| www.333239.com-中彩网客户端| www.768.me-赢彩王免费软件| www.230703.com-彩71彩票-| www.963400.com-被黑彩票平台骗了| www.dq19.com-省份快三-| www.949996.com-天天彩票-| www.973352.com-冰彩虹-| www.319748.com-欧洲杯彩票怎么买| www.849066.com-时时彩三中三计划| www.970499.com-彩票漏洞吧-| www.gx85.com-体彩助手app| www.7075.pw-玩快三计划群| www.260525.com-体彩微信上的游戏| www.954312.com-星彩3d-| www.187293.com-重庆时时彩致命漏洞| www.00tk.com-为什么没人买彩票了| www.599275.com-福彩今天买什么号好|