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.xu47.com-有人想玩彩票吗| www.811593.com-彩票接口调用失败| www.928992.com-众盈彩票真能挣钱吗| 8816彩票www.8816f.com| www.947651.com-怎么推销彩票| www.578592.com-体彩店名称-| www.705987.com-608万彩票-| www.840126.com-广东竞彩-| www.962022.com-正宇火箭彩票| www.an32.com-大发快三下载安装| www.k28.com-哪些是官方彩票网| www.82zk.com-彩票分析选号下载| www.cp461.com-1分快三开奖记录| www.td66.com-网彩是什么-| www.804343.com-极速时时彩是哪里的| www.892769.com-购彩助手下载| www.75ba.cc-新加坡福彩开奖记录| www.578713.com-新疆肘时彩开奖记录| www.w57.club-购彩下载-| www.6369.net-sk国际网络彩票| www.608945.com-腾讯分分彩杀号教程| www.347142.com-数字彩彩票软件下载| www.607977.com-天津体彩即开型彩票| www.863676.com-好赢国际彩票网站| www.033.org-怎样申请体彩投注站| www.5970.me-我要看体彩排列三| www.38397.com-505彩票网站多少| www.021680.com-河南福利彩票微官网| www.802591.com-中彩彩票怎么销户| www.71eu.com-时时彩的牛牛是什么| www.3575.biz-南方双彩官网下载| www.223578.com-快三必中技巧443| www.888532.com-108彩票下载| www.59uq.com-世界杯竞彩赔率| www.4887.hk-最新足彩预测软件| www.36335.com-新彩彩票网址| www.022681.com-今天湖北快三开奖结| www.293020.com-易彩娱乐官方下载| www.394149.com-今天福彩什么好| www.937552.com-辽宁福彩禁止充值| www.991740.com-中国体彩生肖| www.fv24.com-宝马彩登录-| www.zk74.com-快三和值几率| www.30sb.com-快三怎么玩能| www.83ov.com-买彩票选号分析| www.9443.me-新乡农村彩礼法| www.018405.com-快三模拟器-| www.168948.com-江苏e球彩开奖号码| www.388835.com-足彩完场比分结果| www.599785.com-花一万元买彩票| www.744765.com-神马六?彩-| www.885061.com-51彩票苹果版| www.38.bid-体彩11选五5| www.1396.top-简单水彩画星空入门| www.10930.com-手机彩票网投平台| www.719235.com-描写彩虹的好词| www.847700.com-玩竞彩足球的危害| www.933482.com-福彩app靠谱吗| 网易彩票www.084wy.com| www.33807.com-彩票分析师是干嘛的| www.048446.com-彩吧p3图谜第四版| www.40659.com-亚彩会账号注册| www.892065.com-快彩app有哪些| www.984300.com-彩票逻辑-| www.xs50.com-买彩票中奖-| www.807345.com-那个网站可以买彩票| www.358144.com-谁有博友彩邀请码| www.607016.com-福彩控主任诗| www.760637.com-重庆时时彩个位胆码| www.875433.com-江苏快三最新开奖号| www.985251.com-728彩票登陆| www.hs36.com-乐彩网走势图专业| www.1100.com-上海福彩客户端| www.9871.in-连云港体彩中心在哪| www.75933.com-出售中奖彩票| www.es76.com-立彩彩票官方网站| www.e25.com-正确的彩票倍投方案| www.44rl.com-中国福彩刮刮乐语音| www.0789.pw-苹果屏幕原彩是什么| www.6006.net-明天3d彩票开结果| www.80803.cc-下载旺彩大乐透| www.073476.com-体彩排列三独胆王| www.155375.com-上海快三共有多少期| www.842358.com-福彩公益金项目| www.953724.com-彩票牛材网-| www.dn65.com-彩票群靠谱吗| www.0508.org-今天福彩3d开奖号| www.60925.com-保定福彩管理中心| www.058658.com-福彩3d怪字图谜| www.193795.com-湖北今天快三结果| www.311977.com-统一彩票平台| www.532761.com-星彩网站-| www.762165.com-足彩滚球正规app| www.938932.com-澳客体彩app| 网易彩票www.26163n.com| www.391589.com-幸运十分彩开奖官方| www.002614.cc-关于福利彩票的文章| www.123070.com-福彩3d跨度判断| www.862130.com-彩客彩票网官方端口| www.45lb.com-金线苏式彩画| www.564808.com-竞彩彩票店怎么申请| www.685909.com-七星彩最新开奖| www.774748.com-七乐彩3胆6拖| www.868948.com-七星彩是怎么买的| www.950481.com-手机乐彩论坛网| C9999www.318548.com| www.173817.com-快三网app-| www.354043.com-中福彩票讨论群| www.504318.com-奔驰彩票网站多少| www.581397.com-体彩7星彩今天开奖| www.657573.com-彩票网易专家杀号| www.721206.com-新2彩票公式| www.792172.com-怎么进福彩中心工作| www.876393.com-怎么看快三彩票规律| www.971128.com-乐彩字谜图迷论坛| www.bq37.com-官方彩票网站| www.y22.top-奥客彩票排列五开奖| www.43tx.com-人生出彩是啥意思| www.0294.cn-彩票站转让费| www.809328.com-体彩哪种中奖率高| www.908316.com-快三和值表图| www.967143.com-福彩3d藏机图正版| www.yg9.com-开奖结果大发快三| www.00mm.com-七星彩报码图片| www.783078.com-搜索彩票中奖查询| www.870448.com-福彩门户彩图诗句有| www.925101.com-福彩数字3组六玩法| www.973351.com-[彩虹-| 大赢家彩票www.578411.com| www.pe97.com-河北快三吧-| www.10be.com-中博彩票下载安装| www.73oe.com-禁止出售世界杯彩票| www.0544.net-f彩网在哪里下载| www.5567.top-d8彩娱乐-| www.9791.biz-爱赢球彩票靠谱吗| www.832832.com-福彩太湖藏机图| www.906327.com-彩票种类ig-| 幸运众彩www.151376.com| www.kd61.com-体育彩票中亿元大奖| www.y56.vip-彩票与易经-| www.330653.com-上海快三软件真的吗| www.441819.com-购彩网是干嘛的| www.537132.com-168手机彩票下载| www.644501.com-华亿彩票网站是多少| www.700037.cc-五分时时彩有托吗| www.772255.com-正规的篮球博彩| www.839799.com-体育彩票社会责任| www.899997.com-福利彩票转让| www.963966.com-彩票保本翻倍模式| 500万彩票www.35155n.com| www.eq50.com-快三秒奶茶店加盟| www.84.cc-易发彩9780-| www.656052.com-星彩新星彩福| www.730820.com-和彩印基础包| www.813383.com-彩票巫师双色球预测| www.881900.com-大乐透牛彩网| www.949054.com-双彩网手机版| www.994249.com-微彩是正规的吗| www.tj0.cc-快三跨度算法预测| www.nn56.com-体彩竞彩网app| www.g45.top-万彩吧c8cn合| www.35or.com-重庆市彩是官方的吗| www.4474.vip-最新海南七星彩论坛| www.9888.live-福彩归什么部门管辖|