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天

知道了
9彩注册 www.954316.com-重庆时时彩软件| GO彩www.gocp2.com| www.841652.com-七乐彩网上怎么买| 福利彩票www.78700m.com| www.7776.in-彩霸王高手坛| www.661143.com-福彩15选五中开奖| www.866979.com-星期日开什么彩票| www.948413.com-江苏体彩竞彩网| www.cp9330.com-中彩啦app安卓| www.77361.cc-体彩奖号-| www.598919.com-福彩双色球第35期| www.905697.com-大发快三和值表| www.997491.com-海口彩票网早版区| www.96ak.com-投投彩是什么| www.017835.com-下载买双色球彩票| www.153717.com-广州福彩3d-| www.274518.com-福彩快三计算方法| www.368785.com-728down彩票| www.492553.com-安徽省福彩中心位置| www.596133.com-福彩天地报pdt| www.703684.com-澳超竞彩资讯| www.795308.com-鸿彩平台-| www.896725.com-手机购彩uu快三| www.969172.com-天天中彩票可靠吗| www.nq31.com-福利彩票在线选号| www.15ow.com-福彩3d奖项设置| www.gm62.com-许昌彩礼-| www.41kh.com-绍兴体彩报-| www.781.net-神牛彩票-| www.4682.biz-稳哥七星彩预测| www.077295.com-打印机彩色打印| www.361908.com-易发彩是不是诈骗| www.41iz.com-川渝竞彩联盟app| www.3197.cc-吉林快三窍门| www.9277.xyz-快三计划彩票公式| www.53528.cc-grt彩票-| www.99338.com-时时彩模拟摇奖机| www.308762.com-中国福利彩票投注站| www.633207.com-属马人今日彩票运| www.947404.com-快三多久开一次新区| 天天彩票www.626747.com| www.726286.com-手机咋买彩票| www.812180.com-竞彩足球实体店返点| www.886467.com-微信彩票购彩大厅| www.f09.com-彩78靠谱吗-| www.53oe.com-福彩时时开奖结果| www.0847.top-优彩环保ipo| www.00092.com-包装纸箱彩色设计| www.54994.com-微彩吧安卓下载| www.98801.com-正规时时彩在哪能买| www.093046.com-彩色水泥道路做法| www.828264.com-河北快三遗漏号码| www.915162.com-湖北快三专业分析| www.968040.com-福彩14人涉贪| www.tn1.com-福彩助手是正规的吗| www.ta44.com-江西省福利彩票| www.7wa.cc-彩票报号机器人| www.71xu.com-1998世界杯彩票| www.2330.shop-皇家彩世界ios| www.9280.org-福乐彩网站-| www.34976.com-开快三犯法-| www.052052.cc-博彩平台出租出售| www.130643.com-重庆市彩后三走势图| www.215790.com-中福彩票坑人| www.868986.com-七星彩在线随机选号| www.979267.com-网上哪能买河北快三| www.fv92.com-彩票群骗局可以| www.aa87.com-时时彩独胆方法大全| www.vz80.com-河北快三和值玩法| www.39so.com-福彩快3的团队不| www.250938.com-豪彩vip首页| www.299.pink-足彩跟单app| www.7558.com-大通彩票路线| www.29839.com-奥客体彩-| www.66151.cc-彩票模拟投注app| www.087010.com-彩福大厦最高是几楼| www.153661.com-彩客比分直播百度| www.370989.com-中彩网址大全| www.036042.com-洪荒之九彩凤凰| www.165316.com-金沙彩票靠谱吗| www.096288.com-众彩网平台-| www.rf57.com-快三高手计划| www.0320.loan-彩票店可以过户吗| www.819478.com-计划彩票网-| www.911992.com-彩票开奖是不是直播| www.970556.com-福彩3b字谜图总汇| www.89532.com-新彩吧手机网分析| www.875936.com-彩票开奖预测分析| www.az44.com-新韩国快三开奖公布| www.46.org-3d彩吧图迷-| www.953526.com-香港正规彩票| www.er88.com-快三拉人的-| www.z28.net-彩票大i赢家| www.79ol.com-江苏快三计划聊天室| www.1669.net-彩坛至尊精品料| www.694421.com-中体彩地址-| www.828393.com-数字彩怎么玩| www.905173.com-合肥体彩店转让信息| www.968490.com-打开易彩堂主页| www.8al.com-深圳好彩平台| www.970.gg-七乐彩复试11中4| www.di88.com-中国福利彩快三开奖| www.273013.com-福彩3d是什么意思| www.456578.com-怎么买国外的彩票| www.557026.com-福利彩票是真实的吗| www.621703.com-700万彩票网登录| www.060569.com-私彩抓到会怎样| www.97fe.com-忍3竞彩票-| www.4163.com-四重彩虹-| www.9029.cm-长春竞足彩销售点| www.51242.com-竞彩足球过关计算器| www.155216.com-姜山最新足彩推荐| www.165729.com-旺彩3d杀号码定胆| www.161415.com-广州市福彩兑奖中心| www.26372.cc-团彩网-| www.66035.com-时时彩机器人价格| www.022915.com-分分快三彩票破解器| www.102306.com-彩票计划网站86| www.nh48.com-旧版彩票365| www.k12.press-旺彩双色球彩票软件| www.31km.com-cf彩虹哥卖号网站| www.94cb.com-易彩云制作彩票平台| www.697507.com-时时彩破解总和单双| www.683888.com-下载新网易彩票| www.777537.com-赚钱彩票网-| www.841908.com-福利彩票是否真实| www.912174.com-海南买私彩-| www.962439.com-贵州福利彩票3d| 虹彩集团www.hcjt2.com| www.358191.com-爱彩彩票无法提现| www.450045.cc-梦到棺材该买彩票不| www.530626.com-时时彩五星提取四星| www.592516.com-珐琅彩瓷器交易价格| www.656888.cc-九彩彩票软件下载| www.736426.com-保定彩票机怎么申领| www.798520.com-彩票中奖人的生活| www.861014.com-爱乐透购彩官方版| www.911405.com-东方三分彩是哪里的| www.961356.com-支付宝里怎样买彩票| 阿里彩票www.al6888.com| www.mk0.com-幸运快三计划app| www.op02.com-街机快三-| www.557144.com-福利彩票副主任| www.613416.com-七星彩有哪些软件| www.652021.com-私彩平台刷流水| www.720066.com-彩乐汇平台登录| www.776063.com-火箭彩票下载安装| www.860240.com-彩61平台下载| www.909265.com-3d彩报第四版| www.958164.com-福彩3d代码应用| JJ彩票www.22030.cc| www.dl78.com-华彩快三网-| www.420466.com-广州市福利彩票地址| www.537922.com-彩色代表什么意思| www.638785.com-常州体育竞彩店转让| www.798531.com-预知百盈快三的软件| www.862103.com-幸运彩票苹果app| www.926781.com-幻彩戒-| www.973474.com-彩虹意境图片| www.cp5565.com-快三合之-| www.lz51.com-老重庆时时彩app| www.ze07.com-亿盈幸运快三| www.20tg.com-微信时时彩二维码| www.59758.com-微彩点播iso|