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.52cf.cc-简单水彩画入门风景| www.33751.cc-乐成网彩票可靠吗| www.724018.com-cc彩球网注册| www.825968.com-七乐彩数据分析| www.920013.com-手机智能彩票摇号器| www.977141.com-彩礼返还的司法解释| www.cp374.com-福彩5d规则-| www.010395.com-彩票怎么中大奖呢| www.829974.com-o1彩票官方-| www.959509.com-彩吧图库彩吧图库| www.cp6979.com-彩票快三玩法技巧| www.qd94.com-爱彩彩票093| www.362561.com-关于描写彩虹的作文| www.566931.com-牛彩神网-| www.ip55.com-彩鲸快3下载| www.067467.com-3d中彩网走势图表| www.279661.com-山东彩票玩转双色球| www.144206.com-澳洲时时彩官方开奖| www.307410.com-韩国快三开奖查询| www.247559.com-福利彩票快3app| www.326176.com-p3走势图彩宝网| www.400618.com-七星彩第一位走势| www.515539.com-网上买彩票赔了咋办| www.zw67.com-最大的时时彩平台| www.43om.com-劈波挂彩-| www.921.cm-彩虹颜色排列| www.5511.live-m5彩票是骗局吗| www.528365.com-最准彩票预测网| www.599807.com-彩票店代销证| www.978866.com-好彩无嘴哪里买| www.fy54.com-彩53-| www.vl82.com-体育彩票快三奖励| www.097908.com-福彩3的d走势图| www.71574.com-网站彩票正规网站| www.953651.com-福彩主任冯亚平| www.552636.com-彩票导师怎么骗人| www.287854.com-cp544购彩大厅| www.038768.com-彩票中奖号码图| www.115920.com-足球彩票这么玩| www.198404.com-大发快三先赢后输| www.280008.com-有五分时时彩吗| www.fj55.com-国家认可购彩票软件| www.1jw.cc-周一销售什么彩票| www.759011.com-彩8万是真的假的| www.20561.com-签到赚钱娱乐彩票| www.677229.com-全国彩票app| www.384908.com-9d彩票是正规的吗| www.340156.com-竞技足彩-| www.9029.org-今天竞彩比赛结果| www.hr04.com-好彩客下载-| www.38dp.com-广西结婚彩礼多少钱| www.1524.cm-福利彩票号码有几种| www.8325.top-彩票平台打差价| www.2264.biz-天天送彩票平台| www.7402.cc-上海竞彩网点查询| www.550063.com-网上可以足彩吗| www.221648.com-彩票开挂平台| www.2888.xyz-天吉双色球电子彩报| www.224140.com-福彩玩法规则和玩法| www.311101.com-旧版特彩吧-| www.44191.com-彩票刷打码量是什么| www.87588.cc-98098彩票导航| www.034945.com-71彩票首页| www.03tn.com-长春黑彩庄家稳赢吗| www.121120.com-彩票qq群-| www.202389.com-遵义福彩兑奖中心| www.411540.com-体彩是不是骗局视频| www.521874.com-省彩票中心在哪里| www.599477.com-彩民信息出售| www.16kw.com-温州彩票店转让| www.9277.cm-福彩网站提现不到账| www.il4.com-內蒙快三-| www.563762.com-彩46下载-| www.0377.cc-休闲快三表演| www.5693.com-辽三彩开片特征| www.026857.com-辉煌彩票h-| www.172819.com-快三贵州快三走势图| www.521891.com-五分时时彩分析软件| www.590785.com-全球足球竞彩分布| www.662387.com-七星彩到几点结束| www.879880.com-百事彩票app| www.132923.com-竞彩足球赔率怎么算| www.622410.com-甘肃彩票领奖在哪里| www.775816.com-盈发彩票网址| www.873250.com-老赖中彩票可以领吗| www.945234.com-今天的湖北快三| www.cu84.com-买黑彩的app平台| www.te08.com-时时彩快乐十分| www.670498.com-今天七星彩预测号码| www.756185.com-彩宝苹果版-| www.845816.com-彩票是事业单位吗| www.909684.com-体育彩票销售提成| www.970160.com-福彩3d秘密通道一| 大赢家彩票网www.178993.com| 凤凰彩票www.www.fh1188.com| www.406668.com-彩乐乐好彩一预测| www.86375.cc-三彩服饰加盟| www.vu85.com-一分快三怎么能回本| www.168313.com-河北快三遗漏| www.255699.com-彩票快三是正规的吗| www.8351.cn-霞光异彩是成语吗| www.026863.com-辉煌彩是正规彩店吗| www.43219.com-中彩网受骗-| www.4004.vip-澳门彩票博彩公司| www.279507.com-极速时时彩那里的| www.819805.com-代理彩票站多少钱| www.671338.com-乐彩双色球字谜图迷| www.797351.com-98彩票网正规吗| www.950540.com-乐彩客官方下载| www.999846.com-福彩定胆杀号| www.df01.com-福利彩票是6位数吗| www.yb83.com-派彩采集器-| www.99445.cc-体育彩票排列5玩法| www.b92.me-易彩怎么注册| www.71zo.com-网上买彩票兑奖| www.236735.com-体彩app停了| www.760318.com-三星彩走势图| www.035918.com-时彩彩助手-| www.118901.com-福利彩票北京pk拾| www.698482.com-海宁体育彩票| www.5999.cc-体彩19045-| www.42804.com-彩票中数字规律题| www.254451.com-福彩3d跨度走势表| www.841064.com-中国福利彩票发展| www.vf81.com-网易彩票官方下载| www.93qi.com-免冠彩色是什么底| www.666125.com-众彩网投注安全吗| www.761598.com-一分快三的开奖规律| www.842168.com-体育彩票基金用途| www.893385.com-快三专业走势图| www.957735.com-七星彩随机选号5注| www.997221.com-彩票大厅app| www.cb8.com-广西快三推测| www.910255.com-彩第一版-| www.027545.com-可靠的高频彩种| www.176845.com-时时彩报警后果| www.18oj.com-什么的彩云填空词语| www.5829.wang-亚上彩官网-| www.988590.com-好运彩票网-| www.qt88.cc-福彩今天开奖信息| www.62ax.com-ai计算彩票-| www.v77.vip-拉萨福利彩票中心| www.045332.com-神彩通免费版| www.65ar.com-时彩个位准的计划| www.358279.com-体彩竞彩跟单技巧| www.484098.com-旭彩网的法人是谁| www.110187.com-海南七星彩九组头尾| www.667.biz-时时彩网投注平台| www.4499.hk-彩票怎么完税| www.9116.net-福利彩票第39期| www.52az.com-江苏利彩玩法| www.720.la-竞彩足球最稳推荐| www.1678.bid-玩足彩票心得体会| www.96sz.com-表演节目彩排的说说| www.648865.com-彩墨染卡-| www.022415.com-说买彩票的幽默话| www.237405.com-体彩开奖今日| www.368517.com-体彩最新开奖查询| www.508000.com-手机兼职彩票代玩| www.621393.com-体彩怎么选号码| www.061538.com-彩客网怎样-| www.949669.com-福彩三天投资计划| www.dk04.com-跟着老师买彩票| www.ht34.com-江苏快三计划大小|