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.609813.com| www.0933.me-新浪彩票购彩大厅| www.ns9.cc-三地福彩3d和值表| www.nf56.com-105彩票怎么下载| www.01611.com-足彩推荐靠谱的软件| www.2494.cc-特区开心七星彩论坛| www.605415.com-吉祥彩票网站可靠吗| www.843631.com-什么是责任体彩| www.05jw.com-七星彩精准预测| www.1313.in-今天福彩最新开机号| www.9719.biz-彩客骗局揭秘| www.49838.com-摩羯足彩预测下载| www.15683.cc-6加1彩票怎么买| www.303281.com-广东福彩好彩3奖金| www.025056.com-智慧彩计划官网| www.7619.biz-一张彩票多大| www.51757.cc-安徽福彩开奖查询| www.885173.com-官方大乐透购彩| www.221133.cc-快三豹子追号计划表| www.609292.com-新彊福利彩票时时彩| www.847533.com-购彩规划是什么| www.955744.com-中国福利彩票群| www.cai2855.com内蒙快三结果| www.px38.com-下载老彩民app| www.1245.vip-押大小的彩票软件| www.01955.com-买彩票亏钱-| www.66259.com-彩宝网双色球开机号| www.wf54.com-时时彩买组六防组三| www.088885.com-福彩35好运彩开奖| www.xg32.com-宁夏快三50期| www.1783.net-吉利彩票系统维护| www.772455.com-7星彩兑奖模式| www.863251.com-体彩样票-| www.933582.com-七星彩开奖号码今天| www.986529.com-老版728彩票| www.bc50.com-五分钟快三走势图| www.vn46.com-湖北快三快赢网推荐| www.39ql.com-购彩网址-| www.081074.com-辽宁福彩电话投注| www.32757.cc-福彩彩开奖视直播| www.816543.com-快三十分钟开一次| www.524784.com-时时彩正规投注平台| www.655543.com-福彩三地杀和尾| www.729871.com-购彩助手有什么用| www.826617.com-签到天天送彩金彩票| www.900292.com-e乐彩下载-| www.975254.com-彩票中奖图片恶搞| www.cai5353.com江苏快三是什么游戏| www.739392.com-快乐3彩票-| www.819851.com-彩票捐款-| www.893609.com-双色球彩票大师| www.975604.com-农村彩礼-| www.cp260.cc-河北新快三开奖结果| www.190581.com-广西福彩走势图| www.338400.com-湖北双色球中奖彩票| www.489185.com-22元彩票网-| www.671557.com-c8万彩.cn-| www.647655.com-广东时时彩开奖号码| www.784998.com-天天红单彩票安全吗| www.906101.com-彩票购买时间| 多乐彩票www.364242.com| www.069547.com-福彩3d什么叫跨度| www.0239.biz-彩宝网今天开机号| www.703983.com-香港彩-| www.910582.com-蓝光乐彩城二期| 易彩网www.12455j.com| www.715297.com-彩票达人范进| www.559467.com-3d金码牛胆彩宝网| www.814908.com-体育彩票投诉电话| www.12eo.com-柬埔寨5分钟彩| www.2621.win-复式彩票计算| www.847862.com-彩票助赢软件吧| www.917713.com-网赌送彩金-| www.986907.com-彩富天下网香港大全| www.ln0.cc-时时彩赢钱技巧| www.rm09.com-高频彩票取消| www.584717.com-福利彩票店加盟费用| www.489813.com-彩票网上可以买吗| www.572721.com-刚力彩芽结婚| www.105315.com-海南4码彩票| www.1629.top-kk彩票平台-| www.553739.com-搜索山东福利彩票| www.716357.com-彩铅风景画春天| www.805933.com-体彩大乐透软件| www.886730.com-福彩公益行三十万| 移动彩票www.ptk3.com| www.64rt.com-竞彩乐下载-| www.6138.biz-神计划时时彩| www.41652.com-彩票2元网软件下载| www.365940.cc-福彩3d今日开奖号| www.26927.cc-七星彩中奖格| 大赢家彩票网www.615121.com| www.py40.com-彩九下载软件| www.66.cn-爱投彩票怎么样| www.61cy.com-重庆时时彩神计划| www.0288.in-彩票销售业主总结| www.303625.com-双彩图3d双采图| www.807.me-热门彩票开奖网站| www.533136.com-3d365彩票网| www.607661.com-福彩走势图不连线的| www.og82.com-快三统计-| www.v68.cc-好彩高手论坛网| www.41qg.com-体彩怎么买七星彩| www.389.win-一分快三输惨| www.86068.com-彩合钢板-| www.2213.in-微彩娱乐是真的假的| www.614.tv-百胜彩票手机版下载| www.79pg.com-內蒙古福彩快3| www.3098.net-今天的彩票开奖日期| www.650260.com-托班彩虹伞-| www.721799.com-北京彩票大奖没领| www.788772.com-竟彩唯彩-| www.852956.com-福利体彩彩票开奖| www.905270.com-百宝彩票青海快三| www.963051.com-足球胜负彩购买| 凤凰彩票www.77802y.com| www.ea25.com-快三官方开奖| www.te83.com-时时彩技术分享| www.05lo.com-家彩网排三的胆码| www.386792.com-东方彩票的网站| www.497228.com-华为娱乐彩票靠谱吗| www.89456.com-三分时时彩出号规律| www.091137.com-703彩票群-| www.562225.com-什么叫彩票流水| www.648947.com-绿色彩宝都有哪些| www.734448.com-风彩与风采的意思| www.806896.com-足彩2串1稳赚不赔| www.879139.com-福彩3g百度吧| www.943958.com-春秋彩票官网登录| www.993743.com-足彩任9的玩法| www.pq9.com-韩国快三开奖| www.ol99.com-河北快三一定牛开奖| www.15599.com-众赢彩票平台| www.001812.com-快三宜昌计算器| www.143787.com-彩运8彩票-| www.587445.com-竞彩足球排行榜| www.718608.com-彩虹表情是什么意思| www.801658.com-福彩胆组方法| www.870425.com-下载买双色球彩票| www.ts78.com-足球彩票软件哪个好| www.39hx.com-嘉兴福彩双色中心| www.ps79.com-两分彩骗局-| www.15ui.com-蚂蚁娱乐彩注册| www.411690.com-电视彩票开奖频道| www.71573.com-体育彩票看不懂| www.070696.com-河南商丘彩礼多少钱| www.937115.com-福彩投注站编号规则| www.97903.com-彩世界手机版| www.133718.com-极速快三彩票系统| www.258993.com-足彩14胜平负| www.369091.com-彩票699网站| 大赢家彩票网www.54400q.com| www.ux66.com-q彩网登录-| www.332462.com-彩票123会员网站| www.358241.com-足彩篮彩体育交流群| www.136719.com-彩票站怎么盈利| www.707441.com-九度彩票是真的假的| www.832067.com-在线信誉博彩公司| www.rg68.com-江苏快三和值大小| www.46517.com-广东36选7好彩2| www.444006.com-彩六64-| www.568222.cc-体彩终端机提现指南| www.687831.com-江苏福彩快三号码| www.lo3.com-江苏快三时间调整|