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.8fg.com-网上彩票破解方法| www.0917.space-时时彩追号稳赢技术| www.32921.com-e彩在线手机版| www.89058.com-分分时时彩玩法| www.063065.com-创彩彩票app| www.214600.com-彩票坐庄一定赢钱吗| www.303914.com-鑫彩网买彩票| www.387101.com-球球大作战七彩月饼| www.550451.com-极速时彩开奖记录| www.647722.com-五分彩玩法介绍| www.750116.com-掌上彩票苹果| www.835122.com-炫彩手机壁纸大全| www.919516.com-自己怎么搭彩票网站| www.986349.com-中国彩吧走势图| www.qy4.cc-怎么看快三要出豹子| www.tx72.com-爱彩乐福彩即开| www.18ib.com-天天首充彩票彩金| www.0076.loan-福彩宣传标语| www.7725.space-致富彩票下载安装| www.33342.cc-福利彩票隔奖| www.84881.com-福彩刷靠谱吗| www.055320.com-吉林快三网络盘代理| www.182296.com-内蒙快三跨度| www.264848.com-河北福彩快乐3| www.369902.com-彩票机造假视频| www.484099.com-彩票不让提款| www.572517.com-足彩外围网站| www.657022.com-彩票二维码怎么扫| www.777810.com-京彩app是真的吗| www.889253.com-七乐彩下载-| www.982660.com-天天彩票助手推荐| www.bz07.com-福彩快三今天预测| www.ww79.com-南方双彩网主页| www.25od.com-太平哨华彩学校全景| www.0251.xyz-中彩票破产-| www.7515.pw-体彩旗舰店-| www.30850.com-彩16官网安卓| www.80048.cc-邯郸彩票案宣判| www.039584.com-广州东方快三正规吗| www.171001.com-长春快三开奖直播| www.271137.com-76c彩票网站| www.365846.com-彩铅画渐变教程图解| www.472578.com-福彩太湖谜语| www.562957.com-3四彩票-| www.642172.com-时时采彩宝典安卓版| www.834142.com-开幕式彩烟贵吗| www.911216.com-我的k彩-| www.978586.com-天天福彩资讯搜索| www.ec88.com-彩票刷水怎么赚钱| www.xt88.cc-买彩票不给钱跑了| www.25ld.com-华彩置业谢茂权| www.0095.xyz-好的彩票名字| www.7136.cm-佛山快三彩票| www.24682.cc-彩铅上色技法| www.83930.com-下载购买福彩票| www.068116.com-送18app彩-| www.140016.com-彩16网址-| www.221810.com-彩票害人-| www.307185.com-韩国彩票吧-| www.384558.com-省体彩中心主任级别| www.588697.com-七星彩金钱头尾册子| www.668539.com-马来西亚博彩骗局| www.753573.com-排五中奖彩票图片| www.871623.com-超级彩票助手安卓版| www.954842.com-瑞彩祥云下载网址| 购彩在线www.66332o.com| www.ha10.com-9彩票-| www.zo89.com-赢钱彩-| www.30vg.com-彩虹玫瑰花图片大全| www.1169.org-体彩术语砍-| www.8221.loan-今天澳门彩票| www.32772.com-汇彩网怎么登陆不了| www.80077.com-福彩快开调整详情| www.037156.com-快三的玩法和规则| www.162625.com-福彩3d组三走式图| www.254982.com-时时彩作弊软件| www.332495.com-十大黑彩-| www.413880.com-倒喝彩的意思| www.519252.com-竞彩职业大神| www.591597.com-彩票组号器-| www.669027.com-海南什么私彩天天开| www.751845.com-五号彩票app| www.901989.com-正彩彩票网页版| www.970233.com-彩票大赢家任九场| www.af77.com-星期五什么彩票开奖| www.sd64.com-竞彩500比分直播| www.12jy.com-用彩色跟白云造句| www.83fq.com-浙江福彩彩票| www.2002.cc-宏发彩票app| www.7911.cc-云利来彩票-| www.30411.com-体彩排列三图谜| www.75544.cc-甘肃快三开奖公告| www.027092.com-345彩票网登录| www.100988.cc-彩票模拟器-| www.171399.com-我要福利彩票开奖| www.342422.com-期期743好彩| www.424340.com-海南私彩开奖查询| www.525433.com-时时彩最新开奖软件| www.632108.com-竞彩赚金怎么没有了| www.705749.com-福彩三的魔鬼图| www.779944.com-福彩3d视频教程| www.856818.com-福彩十五选五跨度| www.922672.com-人人中彩票跑路了| www.981640.com-体育彩票世界杯奖金| www.jm31.com-中国竞彩网首页官网| www.d60.net-天天彩票网站大全| www.34pj.cc-大成彩票可信吗| www.0360.in-彩票怎么杀号| www.6839.biz-即开型彩票中奖率高| www.20374.com-凤凰彩票时时彩平台| www.61650.com-飞天彩票app| www.099177.com-福彩三d八卦图查表| www.168297.com-彩神争8手机版| www.263862.com-彩票老师带赚| www.352513.com-天天彩票黑平台| www.434193.com-中奖吧彩票靠谱吗| www.532965.com-7星彩怎么中奖呢| www.637447.com-小米彩虹电量| www.722539.com-足彩胜负彩任九规则| www.797373.cc-98彩娱乐-| www.870520.com-福利彩票店几点关门| www.964931.com-欧冠彩票预测| 幸运众彩www.108129.com| www.ft82.com-宝马彩票app| www.wr94.com-彩票贵宾会-| www.10ua.com-彩铅樱花树图片| www.79js.cc-彩票开信息-| www.1292.win-七乐彩奖池哪里查| www.05886.com-福彩3d预测方法| www.49649.cc-商丘足彩高手哥| www.90674.com-3d通福彩app| www.050108.com-购买黑彩是什么罪名| www.206326.com-博友彩票下载网址| www.277128.com-彩民之星光盘骗局| www.400014.com-每周三什么彩票开奖| www.536665.com-最新福彩九宫寻宝图| www.635544.com-博彩公司看哪家| www.733580.com-2345彩票计划| www.810814.com-玄学买彩票-| www.882543.com-重庆五分彩合法吗| www.985955.com-福利彩票提点| www.cai907.cc-内蒙快三走势图| www.lh56.com-彩票全能中彩可靠吗| www.36yl.com-彩九官网-| www.0577.org-福彩3d陈华论坛| www.7616.net-彩票标志-| www.25609.com-彩票平台套利| www.66252.cc-福彩自助机挣钱吗| www.060545.com-青海如何开体彩店| www.129705.com-七乐彩走势中彩网| www.200612.com-幸运五星彩开奖| www.403398.com-ios大公鸡七星彩| www.507218.com-五彩滩-| www.572933.com-绿播与彩播的区别| www.636488.com-基督教儿歌彩虹| www.799090.com-奔驰彩票网站| www.871482.com-福彩红五布衣图库| www.957935.com-足球彩票兑奖中心| www.996198.com-足彩十四场即时比分| www.kr.com-皇都彩票一分快三| www.mm95.com-正规的网络彩票平台| www.01ue.com-点石成金彩票大奖图| www.70zs.com-bb梯子游戏彩票| www.2716.wang-彩票的基础知识|