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天

知道了
58福彩 www.220232.com-北京快三到几点封盘| www.05908.cc-彩票走势图首页全国| www.741982.com-湖南彩体育彩票| www.702620.com-天天中彩票客服电话| www.792596.com-福彩中心冯-| www.871236.com-彩71官方下载| www.938348.com-买彩票下水-| www.985759.com-福彩3d图库总汇| www.fa1.cc-湖北湖北快三走势图| www.qx08.com-分分彩五星必出一码| www.201313.com-福彩3d2000-| www.501331.com-天下彩l-| www.615150.com-央视报道彩票新闻| www.7749.org-风彩彩票可靠吗| www.49112.com-时时彩那个最正规| www.730022.com-福彩3d选号软件| www.864658.com-凤彩网彩票官网网站| www.946721.com-如何处理问题彩民| www.997998.com-双色球筱杉众彩网| www.br08.com-彩票基本走势图大全| www.xz12.com-比较靠谱的彩票平台| www.580976.com-省体彩中心电话| www.688281.com-七天彩主页快3| www.765467.com-彩票网赚平台| www.837539.com-立彩助手安卓| www.902571.com-幸运彩票打不开| www.973177.com-彩虹哥可靠吗| www.hb1.cc-福彩一句定三码| www.818437.com-福彩到杭州哪里领奖| www.904220.com-网上彩票如何代理| www.971457.com-88彩网站-| www.cai9986.com精彩十分走势| www.po96.com-福利彩票号码怎么选| www.6ln.com-彩票数学概率论| www.69wc.com-赌高频彩输的原因| www.3142.xyz-体彩中心举报电话| www.8821.vip-陕西十一选五彩票| www.7025.cm-如何买篮球彩票| www.76755.cc-体彩任选九开奖时间| www.983259.com-足球竞彩下载| www.tp60.com-足球彩票开奖情况| www.3468.vip-澳客彩双色-| www.9948.biz-57期福彩-| www.205576.com-黑彩票-| www.590538.com-七星彩抓奖图| www.550471.com-乐发平台彩票| www.r79.xyz-上海福彩选四预测| www.81se.com-彩188平台app| www.279317.com-黑彩破解器-| www.978195.com-富民彩票属于犯法| www.ko2.cc-快三吉林技巧| www.369491.com-体彩聊天室叶随风| www.539084.com-彩神一号彩票选号机| www.314342.com-今日竞彩足球预测| www.32rh.com-体彩3地-| www.26664.cc-七星彩可以打复式吗| www.67624.com-福彩赌钱机器| www.881054.com-开私彩怎么判刑| www.958890.com-武汉福利彩票在哪里| 天天彩票www.215880.com| www.kf24.com-体彩网app-| www.6ip.com-彩票中了一个数| www.713069.com-广东福彩微信号| www.804696.com-管家婆彩图更新| www.888183.com-爱乐彩票-| www.954707.com-掌上彩票pro| 爱上彩票www.ascp0.com| www.753591.com-足彩中奖彩票图片| www.860896.com-新江福彩-| www.937764.com-云彩厅app推荐| www.985312.com-安徽快三群-| www.au19.com-竞彩app排行榜| www.vy32.com-彩票app停了| www.611557.com-腾讯彩虹六号手游| www.730502.com-海南快2彩票| www.e53.cc-乐和彩票app| www.78qb.com-彩票站卖私彩| www.3784.xyz-福彩3d单双玩法| www.00946.com-发财体彩店app| www.46095.com-最老版时时彩宝典| www.ht43.com-广东体彩快中彩开奖| www.786355.com-体彩大赢家安卓版| www.890730.com-腾讯官网竞彩足球| www.959157.com-下载深圳福彩网| 福彩网www.5522p.cc| www.089356.com-彩神ix靠谱吗| www.160605.com-彩票反水高平台| www.311768.com-买快三彩票是赌博吗| www.406864.com-七星彩走势近30期| www.9878.biz-苏州体彩在哪儿兑奖| www.67816.com-党员买彩票的规定| www.032293.com-彩票代理如何推广| www.22932.com-咋样计算下期彩票| www.3713.com-福彩3d黑牛图| www.6211.pw-福利福彩连连看| www.14213.cc-金华体彩申请| www.89nd.com-速8彩票网站| www.5047.cc-旺彩十一选五推荐号| www.60430.com-凤凰彩票能提现吗| www.023023.com-福彩小图-| www.09616.com-广东体彩订票网| www.49557.com-中国福彩36选7| www.84114.cc-彩礼新规-| www.029189.com-神洲彩票网-| www.01284.com-欧冠足彩攻略| www.41kh.com-绍兴体彩报-| www.0432.in-爱购彩登录-| www.253327.com-吉林快三有假吗| www.272812.com-体彩公益金比例| www.875476.com-c45彩票网站维护| www.951867.com-官方幸运快三| www.cp4858.com-福利彩票的玩法介绍| www.793702.com-公职人员中彩票| www.899745.com-彩81网站-| www.92wm.com-七乐彩百科-| www.56739.com-唐龙说彩3d关注| www.615795.com-游戏厅的彩票机| www.683021.com-义乌福彩开店申请| www.759572.com-彩票赛车哪个平台好| www.822511.com-爱博彩票222| www.878693.com-福彩积分商城| www.933390.com-快三56注号码| www.976346.com-河南体彩4-| www.cai3177.com江苏快3爱彩乐| www.jt05.com-彩神外挂-| www.zm40.com-数字彩票开奖结果| www.89fi.com-网上博彩app| www.181988.com-河南快三推荐预测| www.051504.com-高频彩平台推荐| www.126143.com-彩8彩票网站| www.184528.com-彩票秘诀计算公式| www.246876.com-武汉快三遗漏| www.313085.com-体彩nba篮球竞猜| www.311.biz-较好的足彩跟单软件| www.5577.hk-福彩3d新会员布衣| www.393643.com-体彩顶呱呱怎么纳税| www.503519.com-高频彩吧登陆| www.562773.com-新加坡时时彩玩法| www.616747.com-体彩排3跨度振幅表| www.682245.com-足彩手机怎么买| www.12mi.com-九州彩票怎么样| www.287227.com-足彩网上可以买吗| www.359342.com-排三彩票微博| www.440111.com-江苏七位休育彩票| www.561701.com-山东体彩山东福彩| www.671462.com-彩九平台下载| www.781851.com-八字看彩票号码| www.875631.com-重庆时彩时彩图| www.963309.com-手机彩宝网彩票助手| www.cp3235.com-福彩快三代理是什么| www.rx18.com-福彩旺彩下载| www.eb.com-vip彩票网站| www.659274.com-辽宁省福彩快乐12| www.306246.com-下載即時開彩| www.510538.com-体育彩票放几天| www.735676.com-互联网彩票开售消息| www.895271.com-华彩彩票是怎么事| www.232936.com-五百万彩票软件| www.339566.com-爱彩乐是什么平台| www.249260.com-112彩票-| www.258908.com-足球体彩计算器| www.691261.com-76c彩票下载| www.627486.com-8888彩票网站| www.729888.com-彩票小助手官网|