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天

知道了
彩01彩票 www.756951.com-体彩排三定胆杀码| www.974663.com-七星彩坛论-| www.jr12.com-快三计划师-| www.s68.me-青海福利彩票招聘| www.65fg.com-双色球说彩-| www.1667.cc-福彩三d九宫选号图| www.04894.com-黑彩网站有哪些| www.57894.com-牛彩纽约是正规吗| www.033053.com-彩票79-| www.121542.com-100585彩专家| www.211765.com-快开彩qq群骗局| www.297896.com-快三稳定心得| www.379729.com-时时彩操盘手骗局| www.556467.com-投注体育彩票软件| www.637598.com-彩虹六号卡盟| www.751294.com-9w彩票app-| www.832479.com-七彩云app官网| www.912393.com-附近体彩实体店| www.982022.com-买彩票的技巧3d| www.tv01.com-华夏彩票线路| www.13zz.com-五分⑥和彩怎么玩| www.93eo.com-彩色胶片发明时间| www.3625.net-正规篮彩app| www.9731.top-全民彩票安卓下载| www.77080.com-刷彩票贴吧-| www.034941.com-彩44平台-| www.137218.com-网易红彩app| www.221437.com-01彩票破解器| www.303362.com-七彩网络下载| www.381934.com-彩票挂机软件彩仙阁| www.550049.com-三度手机博彩论坛| www.640321.com-荣耀彩票可靠吗| www.738414.com-沈阳快三查询| www.819827.com-关于彩票的英语作文| www.899811.com-彩83app苹果| www.970774.com-购彩票app-| www.br00.com-超级彩票缩水专家| www.vn80.com-上海福彩网资讥| www.16mx.com-uk彩-| www.687.me-福彩3d心得-| www.5253.in-体彩七位数和七星彩| www.11693.com-移动积分怎么换彩票| www.60021.cc-66微彩登陆-| www.052327.com-网上彩票如何代理| www.139023.cc-福彩头奖多少钱| www.222203.com-彩票几天开一次| www.301745.com-上海快三官方版| www.376520.com-福彩3d彩票过客| www.536943.com-双色球彩票黑点分析| www.627076.com-香港红财神报彩图| www.707344.com-彩票谁在控制| www.788153.com-特彩吧高手网齐中网| www.869179.com-七星彩奇偶-| www.974340.com-蓝精灵彩吧b| www.cp5738.com-安徽省福彩中心| www.nq81.com-赌博买彩票-| www.8no.cc-买彩票为啥不中奖| www.73iz.com-cf炫彩背包-| www.1514.net-彩c16官网下载| www.00635.com-北京快三导师微信号| www.58856.com-王者彩票苹果| www.020492.com-体育彩票篮球玩法| www.096632.com-福彩公益行-| www.166459.com-快三开奖结果吉林| www.277811.com-天齐彩票网彩吧论坛| www.368765.com-哆力七星彩表下载| www.467346.com-彩票投注计算| www.559035.com-福彩通可靠吗| www.631765.com-湖北快3彩票| www.706810.com-时时彩预测下期号码| www.787411.com-彩客比分直播| www.866329.com-体彩有多少种玩法| www.936273.com-福彩网怎么注册| www.994320.com-尊彩网邀请码在哪里| www.fp6.com-时时彩漏洞教程| www.pp58.com-百度体育彩-| www.02vw.com-菲律宾福彩合法化| www.75fj.com-故宫彩绘图片大全| www.1600.vip-体彩3d的试机号| www.9679.cc-3d图谜彩票| www.52381.com-天猫彩票正规的吗| www.97081.com-竞彩网单场推荐| www.062634.com-彩票破解版-| www.167776.com-快3彩票开奖号码| www.254781.com-老时时彩图-| www.329338.com-彩票软件中了二等奖| www.403366.com-安阳各地彩礼一览表| www.512579.com-简笔画彩铅动物组合| www.582870.com-投彩网app-| www.657346.com-彩票306官方| www.903881.com-app彩票租赁| www.967767.com-彩票历史开奖查询| www.eq44.com-炫乐彩票登录| www.vl48.com-大发快三和值根据| www.08uk.com-分分快三什么看赔率| www.76er.com-彩票售票几点结束| www.2014.site-福彩幸运二玩法| www.29691.cc-中彩网3d论坛区| www.85958.com-纳米彩铝板-| www.062373.com-数据分析快三计划| www.261707.com-关于福彩三地网站| www.356234.com-1688时时彩网| www.444003.com-亚搏彩票口啤怎么样| www.539160.com-快三和值是-| www.654652.com-132彩票网站| www.750068.com-七星彩精准号码预测| www.822595.com-福彩app能买彩票| www.894935.com-彩票行家-| www.963502.com-怎么做时时彩平台| www.cai2229.com河北快三跨度走势| www.uh74.com-网上购彩合法网站| www.18ps.com-亿米彩软件怎么样| www.525.me-重庆时时彩在哪下载| www.4152.cn-彩虹6号重下| www.9540.xyz-七星彩几位数算中奖| www.61053.com-深圳福彩五分钟开奖| www.019056.com-中国福利彩票时时彩| www.086263.com-福彩网app骗局| www.137712.com-福彩3d计算神器| www.212193.com-中国体彩上海快三| www.281689.com-六壬测彩票怎么取数| www.654063.com-乐彩写真机-| www.723209.com-时彩倍投技巧| www.783200.com-陕西彩旗快三开奖| www.855443.com-广西快乐双彩玩法| www.915821.com-中国体育彩票加盟费| www.967709.com-买彩票输最惨的人| www.of83.com-福利彩票预测官方网| www.r77.space-广西快三大小计划| www.44eo.com-天天福彩开奖结果| www.371.cm-福利彩票3d迷彩图| www.3426.cm-好彩票网址是多少| www.8726.vip-吉林省11选5彩票| www.62662.com-彩票豫测-| www.016393.com-广西福彩官网结果| www.078967.com-七星彩计算机公式| www.133457.com-易彩快3必中法| www.200276.com-彩票分析预测| www.265871.com-宁夏彩票网-| www.382023.com-彩仙阁挂机软件教程| www.496170.com-足彩西西-| www.563063.com-春节彩票小卖场分享| www.629565.com-彩色复印机排行榜| www.691401.com-手机买足球彩票| www.761640.com-广州福彩快十走势图| www.881487.com-彩票论坛首页| www.954726.com-彩票77官网怎么样| 亚投彩票www.ya044.com| www.tg77.com-快彩中奖助手漏洞号| www.20bp.com-足彩19051预测| www.491.com-时时彩杀一码计划| www.123096.com-酷彩中国-| www.220390.com-福彩了山论坛| www.306381.com-怎样才能刮彩票中奖| www.380685.com-七彩网一分快三| www.551993.com-星期一三五开的彩票| www.627233.com-如何购买nba体彩| www.688590.com-北京体彩电话投注| www.759572.com-彩票赛车哪个平台好| www.862333.cc-兰州红古区体育彩票| www.919694.com-博彩刷流水-| www.972016.com-王者彩票是正规的吗| www.bd29.cc-安徽快三夸度走示图| www.qp12.cc-江苏快三有哪些规律|