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.27736.com-立体彩铅画树图| www.023139.com-彩票提现冻结怎么办| www.117289.com-安卓体育彩票下载| www.206740.com-大小单双彩票| www.296519.com-吉林快三遗漏走势图| www.380774.com-天天开彩-| www.601050.com-双色球彩票烂了一点| www.689295.com-齐鲁风采七彩乐单式| www.779851.com-中彩易软件哪里下载| www.858711.com-福建省体彩中心地址| www.924991.com-豹赢彩票ios| www.978341.com-彩钢围-| www.6934.xyz-七彩背景-| www.28818.cc-台湾福星彩现场直播| www.82426.com-福彩千禧开机号| www.052061.com-大发快三下载苹果版| www.173227.com-甘肃快三对子预测号| www.272747.com-中国福利彩票有几种| www.368766.com-长城彩票是合法的吗| www.496501.com-金鹰团队时时彩| www.580085.com-澳彩风情开奖记录| www.664373.com-网上售彩-| www.752329.com-中彩吧平台-| www.887952.com-彩票代理推广| www.974790.com-彩票开奖查询44期| www.qg.cc-快三如何赚钱| www.388857.com-彩票大管家站长版| www.563058.com-爱彩网官网下载| www.661027.com-55彩票计划网| www.805875.com-体育彩票几天开一次| www.899216.com-七星彩票彩种| www.978571.com-粤淘彩票怎么注册| www.is79.com-体育彩票兑奖期限| www.r65.net-9万彩票官网| www.87nz.com-怎样通过淘宝买彩票| www.5790.org-体彩扑克三玩法| www.23373.cc-彩票资讯大全| www.78600.com-苏州竞彩店地址查询| www.071163.com-体彩代销证到期了| www.850769.com-足彩比赛结果查询| www.971123.com-彩票有哪些类型| www.jw52.com-彩库宝典最快开奖| www.06ni.com-彩铅唇怎么调色| www.93vu.com-老公买彩票上瘾离婚| www.3745.cn-全部七星彩准确资料| www.9740.in-彩宝彩票可以买吗| www.065810.com-必赢彩票提现不到账| www.249294.com-天天中奖彩票软件| www.428425.com-正好彩票网胆码| www.551775.com-周一彩票-| www.798388.com-宁夏快三推荐| www.871292.com-彩73官方-| www.932037.com-犀牛彩票8-| www.981605.com-中国福彩真实性| www.qh5.cc-福彩快三长买必输| www.ww39.com-微彩吧是真的| www.23vr.com-牛彩网彩票网站| www.97dh.com-75秒时时彩规律| www.3620.cc-昨天的彩票号码| www.115212.com-足球竞彩比分新浪| www.242577.com-168彩票网站下载| www.689719.com-卖一张彩票能赚钱吗| www.793235.com-亚博体育彩票下载| www.876834.com-幸运五星彩中奖规则| www.948945.com-福利彩票内部数据| www.998640.com-老谢说彩头条号| www.wl9.cc-澳洲5分彩走势图| www.qv66.com-福彩十三五规划| www.91os.com-金利彩票手机版官网| www.3659.in-快乐彩票下载软件| www.9898.in-澳洲彩票大奖| www.48511.com-足彩滚球正规app| www.96361.com-福利彩票知识| www.068815.com-977彩票注册| www.130427.com-如何下载彩票走势图| www.220285.com-22彩票网站-| www.306076.com-最好彩票软件app| www.371253.com-彩500苹果下载| www.670074.com-彩票多少个号| www.777453.com-皇冠彩票有人用么| www.866472.com-昨天开奖的体彩| www.939625.com-中国福利彩票一分钟| www.993546.com-足彩购买时间| www.fr9.com-159彩票app-| www.ws37.com-网易彩票时时彩| www.25qp.cc-67彩网赚团-| www.520.me-世界杯彩票玩法介绍| www.4852.me-山西彩票纠纷| www.739544.com-福彩三地独胆计划王| www.864526.com-50倍彩票-| www.963501.com-彩铅颜色搭配表大全| www.fv6.cc-彩票大发快三技巧| www.216605.com-恒博快三-| www.376769.com-彩票机致万人中奖| www.526796.com-澳客竞彩比分| www.645755.com-新星彩手机版网址| 天天彩票www.7782u.com| www.us74.com-上海时时乐彩控| www.003.bid-乐彩网大乐透净版| www.5738.cm-乐彩网胆码排序图| www.50685.com-众发彩票违法吗| www.050921.com-彩票网站诈骗任务| www.182888.com-一分快三网站下载| www.303849.com-鑫彩网是正规吗| www.397078.com-赛狗pk8彩票平台| www.501732.com-093彩票几时出的| www.563570.com-新天地彩票注册| www.622050.com-时时采彩走势图算号| www.685853.com-帮我下载个福利彩票| www.752299.com-淘彩平台-| www.882039.com-彩票工资车怎么做| www.937521.com-极速3d彩票-| www.980832.com-彩票源码搭建教程| 凤凰彩票网www.855765.com| www.302256.com-七星彩冷热号| www.qc68.com-十大正规的彩票| www.787776.com-财经网时时彩走势图| www.900206.com-乐彩购彩票app| www.hh49.cc-彩票51中彩app| www.019.in-香港hk百彩网站| www.9707.org-转让福彩机怎么过户| www.013640.com-五分彩计算公式| www.130661.com-火箭彩票安卓apk| www.258213.com-挂机彩票软件手机版| www.379510.com-天天益彩官网| www.95zh.com-彩友多店主微信| www.7352.wang-彩虹六号新手| www.68770.com-享彩直播-| www.061223.com-好彩客是非法| www.210769.com-银川快三开奖| www.362392.com-七星彩百位杀号| www.508243.com-1396彩库宝典| www.612903.com-附近彩票店预约平台| www.1441.me-彩票大赢家主页| www.9956.loan-体彩开奖彩票开奖| www.65695.com-大乐透彩票模拟器| www.057508.com-900彩票app-| www.132459.com-彩妆门头-| www.234619.com-彩票o2o平台| www.318879.com-上饶市福彩发行中心| www.398997.com-中国体彩实体店| www.519326.com-pc快三规律-| www.815308.com-发彩网账号-| www.922173.com-竞彩分析师怎么考| www.985098.com-红彩会登录手机版| www.97st.com-今日体彩排3开奖号| www.6775.top-怎么下载赢彩吧| www.23235.com-彩票购买截止时间| www.61175.com-旧版爱乐透彩票图表| www.030901.com-福利彩票双色球对奖| www.097776.com-微信带玩快三| www.172691.com-至尊快三彩票| www.234318.com-彩票新政策-| www.316210.com-旺彩31-| www.421671.com-南宁体育彩票销售点| www.526117.com-竞彩足彩推荐310| www.696310.com-足彩19030期| www.797666.cc-99彩票登录地址| www.885366.com-时时彩租号工具| www.3246.cc-足彩彩客网-| www.8937.loan-彩店宝彩官方| www.28628.cc-佛教讲中彩票因果| www.63698.com-竞猜唯彩-| www.888892.com-快三怎样砍龙|