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.9950.cc-彩票图纸怎么看| www.992635.com-七星彩往期中奖查询| www.lz75.com-哪个竞彩app靠谱| www.32fq.com-周四有什么彩票开奖| www.381580.com-正规体彩店买私彩| www.183667.com-北京快三专家预测| www.296539.com-360彩票开奖查询| www.ua41.com-熊猫竞彩是骗局| www.139174.com-福彩3d输惨了| www.244494.com-新浪爱彩双色| www.355945.com-彩票系统源码免费| www.500256.com-彩票发app-| www.998636.com-江苏体育彩票7位数| www.pg83.com-江苏快三预测号码| www.nq37.com-福彩体彩软件| www.9006.cc-ha0手机彩票| www.962606.com-彩票网页计划| www.cp234.com-全天一分快三计划| www.nm61.com-足彩19050任九| www.864188.com-体彩任选14场胜负| www.969912.com-福利彩票停售了吗| www.2gw.com-怎么中500万彩票| www.5470.net-长春文彩-| www.716772.com-彩铅色彩搭配口诀| www.801923.com-体彩顶呱刮中奖编号| www.881100.com-500彩票被黑| www.952359.cc-彩票店电视买怎样的| www.cai33.com-分分快三怎么玩| www.jj44.com-2020彩票-| www.255033.com-新疆时时彩96| www.899.website技术型彩民中奖技巧| www.606203.com-彩界精英独胆| www.705005.com-下载体彩3d-| www.802026.com-精彩大片视频播放| www.885245.com-新彩宝彩票官网| www.964154.com-江苏快三彩乐乐遗漏| www.cp703.com-玩快三哪个平台好| www.5443.in-梦见彩票号码能守吗| www.383530.com-会员登陆乐彩| www.168746.com-安快三开奖结果查| www.813143.com-快三最多买多少倍| www.908255.com-大发快三的玩法| www.223070.com-分分快三有假吗| www.81911.cc-彩票周六开什么奖| www.055146.com-看东西有彩色光环| www.164004.com-彩票容错预测| www.243229.com-买体彩的app| www.488636.com-3d联盟好彩乐4版| www.3082.cn-众发彩票app| www.07996.com-长沙福彩-| www.014033.com-七星彩和值尾走势图| www.277437.com-彩票规律破解公式| www.1238.top-彩票豹子怎样的| www.967173.com-彩吧助手带线走势图| www.xv3.cc-有靠玩彩票生活的么| www.22zz.cc-快三输了十几万| www.92491.com-湖北省福彩网| www.225620.com-彩民堂app-| www.843388.com-公益彩票怎么玩| www.966508.com-彩票福彩怎样玩| www.299826.com-彩票贷款-| www.94910.com-卡姿兰彩妆广告语| www.7928.cn-网易彩票是-| www.jl33.cc-江苏快三输了几十万| www.078926.com-体彩七星彩中奖说明| www.181377.com-彩票app哪个好| www.261631.com-江苏福彩快三直播| www.160742.com-福彩分析软件| www.288086.com-高频彩合买骗局| www.355980.com-银川仟彩摸吧流程| www.482825.com-5188彩票登录| www.554968.com-彩票号码7位数| www.612582.com-d8彩票下-| www.373068.com-彩票cp-| www.797175.com-98彩票合法吗| www.865746.com-o1彩票app-| www.929773.com-北京全民星彩科技| www.977521.com-彩米彩票官网| www.rl21.com-深圳福彩22选1| www.4st.com-彩票中奖发现金还是| www.58qb.com-福彩网购-| www.39782.cc-对彩票上瘾怎么办| www.469341.com-七星彩版区全版| www.557372.com-幸运快三回血| www.636376.com-彩虹r台分享码| www.699861.com-彩客网正规么| www.774143.com-彩虹伞亲子游戏教案| www.881039.com-500go彩注册| www.977541.com-冠军彩票下载| www.51st.cc-瑞彩祥云是什么| www.437299.com-陕西彩票中奖的地区| www.390902.com-泰安体彩中奖规则| www.451775.com-星彩网短信点播费| www.536341.com-福彩1d多少钱| www.60hu.com-728彩票安卓版| www.1223.in-必红彩票下载| www.667408.com-马来西亚时时彩案件| www.734830.com-新浪竞技足彩风暴| www.825887.com-吉林快三10中开奖| www.886257.com-数字彩票的原理| www.11vq.com-体彩今天可能出的好| www.661.mobi-时时彩平台最好| www.5775.cn-美狮彩票安全吗| www.16237.cc-时时彩群里面有托吗| www.71186.cc-福彩开奖结果与查询| www.477011.com-福彩湖北3o选5| www.556819.com-竞彩篮彩-| www.620191.com-骨瓷釉上彩有毒吗| www.680975.com-兴盈快三-| www.762763.com-红旗卖彩票官方网站| www.828637.com-大树彩票-| www.896212.com-彩票双色球合买大厅| www.7ys.com-大红鹰彩票登录地址| www.83xp.com-福彩太湖脑筋急转弯| www.968188.com-宁夏体育彩票排列五| www.062495.com-553彩票app-| www.66132.cc-江苏快三破解程序| www.983403.com-ee彩骗局-| www.1124.net-足球竞彩延期怎么算| www.581563.com-七彩几位数-| www.673900.com-连云港体彩中心在哪| www.755011.com-1068彩票官网| www.821786.com-蓝球杀号彩乐乐| www.879611.com-易彩一彩民福地登录| www.933902.com-彩之源彩票合法么| www.976463.com-太原彩礼-| 彩票5www.541638.com| www.026021.com-想找个靠谱私彩| www.127407.com-完全比分彩客网| www.044833.com-足彩sp-| www.96226.cc-互娱彩票作弊器| www.50kv.com-苏州市体彩中心| www.39197.com-罗彩韫-| www.123579.com-乐彩网排三排五论坛| www.995200.com-中福快三彩票| www.ak49.com-七星彩特区论坛| www.vl14.com-江苏福彩快三口诀| www.16dy.cc-山东体彩申请| www.79kj.com-福彩东方六十一开奖| www.1092.cn-快三群里面有没有托| www.969341.com-i8彩票计划稳| www.dl65.com-福彩快三官方网投| www.74542.com-奥客彩票双色球| www.999197.com-红8彩票网址| www.as35.com-上海市快三走势图| www.qj57.com-好彩2开奖结果今天| www.vq50.com-一分快三骗局过程| www.062695.com-河内彩最新开奖号码| www.739140.com-香港正规彩票有几种| www.798589.com-中彩网专家杀号定胆| www.865811.com-熊猫彩票是什么| www.929695.com-七星彩1976期百| www.978640.com-c彩61软件-| 中华彩票www.914983.com| www.78782.com-体彩竞彩店转让设备| www.6849.xyz-今日的彩报图| www.65602.com-广东好彩一开什么| www.060040.com-福彩3d怎么玩的| www.115960.com-能买彩票的软件| www.3846.cm-大乐透预测彩宝贝| www.8921.cn-竞彩可以全国兑奖吗| www.890800.com-彩票快三破解公式| www.950441.com-乐彩客苹果版怎么下| www.992458.com-旺彩号码库-|