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天

知道了
北京快乐8 www.45li.com-广州体彩网唯一官网| www.5338.biz-福彩十五选五怎么玩| www.07422.com-全民娱乐彩票官网| www.63280.com-足彩彩客网310| www.027591.com-166彩票网登录| www.871464.com-福利彩票三d开机号| www.ic44.com-体彩11选五宁夏| www.25qm.com-华彩联合支付宝团队| www.049511.com-牛彩官网手机版下载| www.87be.com-湖北体彩中心| www.8149.cm-贵州快三跨度分布图| www.39159.cc-那个彩票软件安全| www.177911.com-上海快三技巧| www.91815.com-福彩双色球迷会总图| www.051955.com-万豪彩票app| www.132484.com-潘多拉彩妆怎么样| www.23711.com-福利彩票四等奖| www.504124.com-体彩限号-| www.607989.com-新彩吧手机板| www.488877.com-七级彩票-| www.739503.com-萬博彩票-| www.838583.com-百家欧赔澳彩指数| www.913807.com-万彩吧是不是正规| www.977417.com-河南彩礼什么时候给| www.jy69.com-168手机彩票| www.163831.com-秒秒彩程序破解| www.235905.com-竞彩足球让球胜平负| www.02197.com-私营彩票-| www.89221.cc-pk567彩票-| www.39388.com-鑫彩网app主页| www.201826.com-5分快三全天计划网| www.iv09.com-竞彩足球买量分布| www.380448.com-送彩金移花接木| www.5253.cc-彩宝贝彩票下载安装| www.15005.com-彩报图库布衣老汉| www.79971.com-爱彩人江苏11| www.046601.com-福彩彩票机换纸视频| www.193883.com-湖北快三和尾走势| www.751367.com-重庆时时彩500| www.829194.com-害人彩票-| www.893313.com-免费彩票过滤软件| www.960513.com-乐亿彩票下载安装| www.348321.com-玩彩票客户端下载| www.869469.com-查看彩票开奖的软件| www.994853.com-随机彩票号码生成器| www.23832.com-七星彩怎么玩法赚钱| www.181678.com-快三走势图安徽| www.330543.com-七天彩历史邀请码| www.528144.com-研究彩票的规律| www.639483.com-最豪华体育彩票店| www.815285.com-彩票排列七-| www.884645.com-体彩鳄鱼篮球单| www.680239.com-彩票应用软件哪个好| www.881694.com-6188彩票-| www.cp3807.com-快三计划网页版| www.673107.com-七星彩19014期| www.5927.pw-亿网彩票是不是黑网| www.155721.com-微彩在线是骗局吗| www.014866.com-彩王-| www.873841.com-旺彩开奖结果查询| www.990438.com-红中彩票那个有网站| www.do64.com-彩宝网首页-| www.wh62.com-彩票走势怎么看| www.14rj.com-网上玩大彩票输钱了| www.702010.cc-老彩民足彩篮彩| www.792581.com-福彩兑奖怎么验奖| www.869783.com-唯彩会官网-| www.950086.com-百乐彩客服-| 3G彩票www.c189.vip| www.022141.com-河南体彩481走势| www.pe83.com-河北快三套选规则| www.178996.com-河南快三网站| www.625652.cc-彩票创业-| www.702995.com-发短信送彩金38| www.779016.com-3d今天银海彩票图| www.846002.com-彩彩票网彩神通| www.905432.com-丹麦足球竞彩| www.963613.com-彩铅风景画教程| www.cai628.com-彩票计划群赚钱套路| www.nv03.com-玩彩票是赌博吗| www.r87.cc-乐彩网骗钱-| www.71sc.com-浙江大彩鲸11选五| 500彩票www.50051hh.com| www.282572.com-老彩民怎么选号的| www.328906.com-双色球彩摘网| www.392203.com-彩票不见了有照片| www.799833.com-体彩微博31选7| www.893781.com-49官方网站彩票| www.89qe.com-陕西彩运宝-| www.760995.com-足彩十四场新浪爱彩| www.dd28.com-网络竞彩-| www.zz79.com-竞彩店难不难申请| www.68tn.com-全球50大博彩公司| www.012571.com-廉江七星彩高手论坛| www.8620.wang-电视福彩怎么回事| www.062685.com-优信乐彩-| www.60984.com-保定彩票站怎么申请| www.xh3.com-湖北日报网福彩3d| www.wg27.com-广西快三二同号推荐| www.71203.com-找黑客修改博彩数据| www.872705.com-福彩网站下载| www.991965.com-宜昌市体彩兑奖地址| www.ca51.com-甘肃快三遗漏统计| www.05588.com-505彩票是假的吧| www.658.website速8彩票平台客户端| www.6571.com-三的组六走势图福彩| www.16840.cc-福彩3b字谜僵局| 凤凰彩票www.77803f.com| www.960962.com-儿童立体彩铅画| 凤凰彩票www.88266h.com| www.525543.com-体彩中几个才有奖| www.652033.cc-周一哪个彩票开奖| www.726482.com-彩票倍投赚钱| www.810707.com-彩衣娱亲-| www.918757.com-博彩app推荐下| www.205320.com-内蒙古福利彩票快三| www.325823.com-彩经网时时彩走势| www.401296.cc-彩百万娱乐app| www.520962.com-福利彩票百度百科| www.591727.com-香港博彩11码| www.665544.cc-彩虹岛app-| www.739413.com-合买体彩骗局| www.801971.com-福利彩票小助手官网| www.868872.com-海南七星彩预测专家| www.925536.com-旭彩美缝剂是品牌吗| www.975153.com-彩票网赚团队| www.cp0908.com-一分快三走势图| www.176946.com-河南彩礼-| www.3628.cc-彩播app有病毒吗| www.8878.red-竞彩会不会爆| www.195365.com-江西快三推荐一定牛| www.318490.com-福彩排列3奖金| www.414900.com-天天福彩开奖结果| www.581658.com-凤凰快三靠谱吗| www.661012.com-九宫格怎么计算彩票| www.795729.com-聊城竞彩店-| www.868431.com-今天七星彩图纸| www.936050.com-靠彩票能发财| www.990413.com-网上购彩哪个靠谱点| www.298049.com-人人竞彩网站| www.672687.com-19035七星彩| www.751905.com-彩票10-| www.840126.com-广东竞彩-| www.905173.com-合肥体彩店转让信息| www.997649.com-快中彩找不到开奖| www.rx4.com-河北福彩快三玩法| www.oy92.com-银川市福利彩票中心| www.01dr.com-赌彩票靠谱不| www.356105.com-完美娱乐香港分分彩| www.620167.com-釉上彩颜料-| www.685675.com-彩票中奖计算器软件| www.778340.com-体育彩票快三官网| www.907178.com-彩票站有哪些彩种| www.968365.com-足彩胜负彩开奖| 网易彩票www.332071.com| www.52791.cc-福彩兼营店是真的吗| www.032229.com-11选5爱彩乐广东| www.138877.com-西安竞彩快3有假吧| www.837111.cc-下载福彩一定牛彩票| www.25rm.com-天然华彩-| www.585.red-银彩娱乐-| www.52fj.cc-新江时时彩开奖号码| www.0685.xyz-体育彩票销售申请| www.375991.com-欢乐彩app苹果|