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.500557.cc-随机彩票中奖率对比| www.622920.com-红牛彩票官方| www.701407.com-20选5彩票网| www.778336.com-福彩三d字图迷汇总| www.925279.com-体彩排三杀号定毒胆| www.977583.com-江苏快三购彩平台| www.qm90.com-时时彩买大小规律| www.1uj.com-加拿大三分彩| www.52cs.com-利彩是怎样的骗局| www.638.me-福利彩票3b字迷| www.4214.biz-19022体彩-| www.9380.net-tt彩票是正规网站| www.62178.com-彩票大赢家首页| www.015680.com-体彩七星彩规则| www.079813.com-杭州福彩快三| www.138316.com-日本彩票广告| www.211722.com-请问福彩快三是什么| www.276489.com-湖北快三牛定一| www.384871.com-彩状元app-| www.497995.com-博彩在线骗局| www.563840.com-新生彩票平台登| www.626364.com-深圳市鑫彩晨科技| www.688999.com-彩81平台-| www.761742.com-彩票之家下载链接| www.871320.com-彩71彩票网-| www.948243.com-体彩的走势号试机号| www.996777.cc-福利彩票字谜总汇| www.cp7892.com-易彩票一分快三| www.lw80.com-青海福彩app下载| www.d95.com-熊猫彩票安全吗| www.26yz.com-彩票大奖得主的星盘| www.742.cc-香港财神彩神特网| www.4300.tv-鑫彩公司-| www.9311.online7乐彩免费网推荐| www.51423.com-k彩线路测速中心| www.91315.cc-炫彩浮屏什么意思| www.040901.com-盁彩网-| www.130204.com-时时彩下期杀号技巧| www.196981.com-彩票计划网站| www.261852.com-网上还能买快三吗| www.355841.com-买足彩看什么最准确| www.429827.com-日本彩票中奖率高| www.517976.com-彩票提前晒-| www.579132.com-福彩有人中过吗| www.641088.com-一生荣耀彩票| www.753281.com-澳发彩票手机版下载| www.827955.com-投诉app彩票网站| www.888778.cc-078彩票-| www.956173.com-速盈彩官网app| www.992163.com-重庆时时彩包胆技巧| www.cp117.com-快三开奖结果北京| www.jn26.com-彩票帮投兼职可靠| www.yu96.com-用手机买彩票| www.13bv.com-鼎盛彩票手机版| www.73xs.cc-福彩3d黑龙赌王| www.0763.wang-幸运28彩票怎么玩| www.8690.in-开奖频率最快的彩票| www.33109.com-烟台快三开奖结果| www.71539.com-体育彩票3d试机号| www.028184.com-奔驰彩票网址下载| www.096608.com-彩票到底是真是假| www.151912.com-江苏快3彩票网| www.239691.com-七天彩网址-| www.303001.com-广东好彩36开奖| www.362263.com-福利彩票3d图子| www.440803.com-319彩票-| www.520957.com-欢腾彩票投注网址| www.581563.com-七彩几位数-| www.640880.com-今天彩民乐图是什么| www.768508.com-黑彩平台会有漏洞吗| www.840683.com-足彩缩水公式| www.899209.com-福彩3d专家买票| www.957888.com-北京爱彩乐快3| www.990005.com-彩漂和漂白水区别| www.cai663.cc-北京体彩十一选5| www.hk11.com-快三精准预测号码| www.wl93.com-吉林快三直播| www.01ow.com-满堂彩登录网址| www.63qp.com-爱乐逶彩票网| www.802.website外围体彩哪个好中奖| www.3936.win-幸运彩网址多少| www.8578.top-腾讯彩票是什么| www.89092.com-彩壹万下载-| www.033056.com-下载最新网易彩票| www.100076.com-抢红包彩票网| www.154051.com-快三开奖走势图图片| www.250626.com-豪彩vip官网| www.308342.com-四川体彩怎样才中奖| www.365464.cc-城市风景彩铅画| www.440560.com-体育彩票摇奖有假吗| www.519046.com-腾讯彩票竞猜退市| www.578883.com-体育彩票主题装修| www.632637.com-七彩视界软件| www.688011.com-克拉克博彩-| www.754047.com-分分彩挂机论坛| www.875469.com-乐博彩票-| www.939175.com-手机足彩比分直播| www.982757.com-共享彩票盈利| www.aw09.com-3d彩票的玩法| www.uo93.com-体育彩票分分快3| www.12gy.com-欢腾彩票害人| www.71zv.com-今日福彩三的字谜| www.0327.cc-826cc彩票下载| www.7564.cn-重庆时时彩平刷漏洞| www.16756.cc-辽宁省体彩中心位置| www.52565.com-好彩捕鱼-| www.88164.com-彩票网提现不到账| www.028532.com-乐彩网10-| www.091588.com-春秋彩票登录地址| www.140095.com-彩票店兑奖有返点么| www.204972.com-陕西福彩电话号码| www.261631.com-江苏福彩快三直播| www.390309.com-向日葵团队彩票真的| www.495701.com-3d通博彩免费版| www.554434.com-福利彩票广告语| www.605232.com-梦见自己彩票中奖了| www.662720.com-第17054体彩| www.715323.com-竞彩足球比分任9| www.775626.com-众彩生活骗局| www.880044.com-彩票时间修改通告| www.949307.com-北京五分彩官网| www.987730.com-下载彩乐彩票网| 众乐彩票www.589044.com| www.en88.cc-国彩网官方网站| www.sl91.com-新时时彩开奖走势图| www.01ej.com-描写彩虹的成语| www.53ia.com-850彩票-| www.235.in-55彩票官方app| www.2352.biz-3cp上彩票app| www.6806.com-福利彩票数字规律| www.07933.com-u九彩票-| www.39636.cc-兴博彩票-| www.71922.cc-懂彩帝彩民彩票| www.074338.com-旭彩美缝剂厂家| www.130588.com-霍华德彩票选号方法| www.184934.com-彩神官网邀请码| www.237511.com-福彩有几种玩法介绍| www.295589.com-彩票开奖查1询| www.348329.com-彩票走势图大全首页| www.399376.com-买彩票算违法吗| www.590064.com-福彩快三一共多少注| www.642863.com-幸福彩票是合法的吗| www.717091.com-顶级水彩颜料品牌| www.773112.com-天际彩-| www.844829.com-十堰彩票中奖| www.896393.com-最新彩票套利方法| www.949702.com-休育彩票开奖| www.978218.com-单层彩钢瓦围挡| www.li1.com-内蒙快三新规定| www.kq82.com-彩票分析师收入| www.xb78.com-开心彩票论坛交流区| www.8pi.cc-228彩票网站| www.44yk.com-河南福彩网开奖| www.93yh.com-希腊彩开奖时间分别| www.1300.pw-彩票3d最好的书籍| www.9098.loan-中国便民懂你彩吧| www.31829.com-网易彩票论坛社区| www.63332.cc-足彩19039推荐| www.008452.com-胜负彩19022| www.056730.com-七乐彩杀号公式方法| www.126157.com-彩票带人回血靠谱吗| www.179226.com-天天福彩是骗局吗| www.231175.com-百胜快三app| www.282468.com-时时彩9码注码法|