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.785163.com-彩票字谜大全及答案| www.899670.com-福彩销售网点| www.965104.com-传统彩的骗局揭秘| 天下彩www.496689.com| www.74246.com-武大彩虹旗事件| www.31511.cc-米多竞彩app| www.187371.com-彩票万能公式| www.366255.cc-彩票中奖技巧指南| www.85ao.com-足彩任九几点开奖| www.387210.com-好彩店彩票是真的吗| www.556864.com-五分彩算赌博吗| www.678816.com-快购彩票是啥| www.50mw.com-德国鲸彩漆价格| www.rf91.com-贵州快三预测推荐表| www.6772.top-彩色复印机排行榜| www.959391.com-五分时时彩人工计划| www.a16.xyz-新浪爱彩app| www.41025.com-中彩了app-| www.047006.com-51888彩票贴吧| www.998691.com-中国体彩足球竞猜| www.sd75.com-3d福彩天牛图厍| www.331281.com-81彩票官方网站| www.261757.com-c3彩票-| www.330698.com-七天国际时时彩| www.199530.com-河南福彩快三走试图| www.302004.com-海南特区彩票网| www.427960.com-彩53下载网址| www.544586.com-安徽快三遗漏好| www.626240.com-手机上的盈丰彩票| www.696983.cc-新宝彩票下载安装| www.ai62.com-廉江好彩哥规律| www.9376.cn-新快报官方网站福彩| www.337353.com-精彩十分5d直选| www.ag34.cc-彩票开奖源码| www.851021.com-财神时时彩综合工具| www.996900.com-头奖彩票3d-| www.ay07.com-百姓彩票网猜单双| www.sa65.com-时时彩官网啥时候停| www.62ve.com-晋城彩票站转让| www.1966.xyz-易彩娱乐平台怎么样| www.297576.com-快三输了很多钱| www.47di.com-超级大乐体育彩票| www.324813.com-吉隆坡博彩中国人| www.414585.com-彩之云提现提不了| www.526584.com-厦门彩票怎么样| www.594199.com-优乐彩合法吗| www.676308.com-福彩字谜3d-| www.954419.com-1博彩票登录| www.6650.top-彩迅pc开奖-| www.031183.com-致富彩app骗局| www.61527.cc-乐米彩票改名字了| www.039939.com-甘肃快三豹子遗漏| www.357144.com-公司福利发彩票中奖| www.506708.com-新彩吧图谜汇总| www.599248.com-玩彩票亏损-| www.128739.com-福彩3d专家彩友吧| www.209135.com-51彩票下载-| www.274415.com-360快三走势图| www.89dx.com-彩八官方-| www.4321.in-彩票投资公司| www.9590.top-时时彩追冷号多少期| www.39792.cc-福网彩app下载| www.7160.vip-时彩买必出号的技术| www.09ki.com-118彩票下载中心| www.78sl.com-时时彩技巧个人经验| www.802931.com-福彩可以买吗| www.786693.com-网络兼职牛彩| www.344987.com-nba篮彩分析| www.67ki.com-老快三走势图带连线| www.236672.com-比分竞彩-| www.464699.com-查福彩试机号码| www.950692.com-时时彩软件大全| www.596753.com-南阳彩开奖直播现场| www.112076.com-98c彩票登录| www.je23.com-福彩快三怎么算| www.30xp.com-彩虹正版查询| www.798766.com-精彩大片-| www.885655.com-信彩彩票官网地址| www.967784.com-银川彩票转让| www.kb1.com-快三一等奖奖金多少| www.qc41.com-安徽省福彩中心查询| www.51kx.com-福彩投注站查询| www.295595.com-网络彩票计划师套路| www.573929.com-彩生活e师傅app| www.494342.com-辽阳彩票站出兑信息| www.961846.com-买彩票能发财吗| www.5444.net-梦见猪买彩票| www.144163.com-728彩票客户端| www.501083.com-中彩票离婚后兑奖| www.601954.com-梦见中彩票买车| www.980167.com-彩59彩票下载| www.ff43.com-什么彩票网站最安全| www.17rj.com-新浪彩票大厅| www.2747.xyz-七彩彩票网址| www.113453.com-郑州福彩兑奖中心| www.406601.com-巨丰彩票是-| www.65415.com-西宁福彩双色球字迷| www.145883.com-金手指的彩票专栏| www.970753.com-彩票历史开奖最多| www.947838.com-重庆时时彩平台| www.cp8522.com-内蒙古快三百位| www.960812.com-时时彩反倍投怎么玩| www.666943.com-福彩头像图片大全| www.766545.com-彩票站竞猜靠谱吗| www.880049.com-彩票刷流水是犯法嘛| www.950622.com-快三预测软件哪个准| www.998740.com-渔溪体育彩票| www.ed76.com-做彩票代理安全吗| www.r58.bid-快钱彩票是合法的吗| www.366992.com-下载彩票开奖公告| www.61997.com-七星彩什么开奖时间| www.21ww.cc-盈盈彩票官方网址| www.102888.cc-时彩平台网址| www.930220.com-90彩票是骗局吗| 39彩票www.3933m.cc| www.jr52.com-快三有人赢过吗| www.w82.org-神彩奕奕的动物| www.42204.com-hk白彩网兔费大全| 亚洲彩www.68568s.com| www.811110.cc-福彩快3好吗| www.74892.com-彩铅画花简单| www.301768.com-上海快三开奖果查询| www.023268.com-海南4十1彩票预测| www.676146.com-七乐彩怎么兑奖| www.365585.cc-初学彩铅买多少色的| www.816327.com-三分彩靠谱吗| www.ef19.com-500彩票网-| www.595098.com-京东快彩能买吗| www.582630.com-重庆官方有分分彩吗| www.7733.date-腾讯分分彩走势图| www.26055.cc-江苏快三网购| www.72558.com-吉林省打击黑彩培训| www.999786.com-福彩快三多少钱一注| www.ek16.com-布衣彩吧图库| www.235677.com-山东福利彩票官网| www.411559.com-竞彩推荐哪个靠谱| www.528770.com-儿童彩虹画图片大全| www.616606.com-竞彩足球半全场规则| www.874543.com-双色球彩票走势图| www.934880.com-广西快三精准计划| www.980816.com-彩票网站源码一条龙| www.dp89.com-吉林快三遗漏号| www.tm27.com-福彩一句定三码字谜| www.x16.top-学生买彩票输了| www.33sk.com-七星彩能多期买吗| www.071203.com-足彩技巧-| www.205349.com-大发快三和值走势| www.z80.cn-彩福网最新码报结果| www.065239.com-平台买彩-| www.572713.com-天猫快彩是什么意思| www.968243.com-今天的彩票排5| 乐点彩票www.775377.com| www.le85.com-中彩娱乐是真的吗| www.2107.shop-福利彩票42-| www.657071.com-七星彩质合数走势图| www.41.cc-七星彩开奖号号| www.83vu.com-乐彩3d谜语图| www.817125.com-唯彩会彩票开奖直播| www.98807.com-竞彩初赔特点| www.254515.com-爱彩-| www.539643.com-幸运时时彩趋势图| www.608372.com-足球派彩是什么意思| www.692203.com-17彩票网靠谱么| www.759623.com-安徽省福彩领奖地址|