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.701242.com-彩票的彩什么意思| www.1852.vip-福彩官方网址| www.62qw.com-福利彩快乐十分奖金| www.1249.xyz-k彩一彩民福地客服| www.524425.com-福利彩票3b字迷| www.lc1.cc-今日安徽快三预测| www.ys18.cc-体彩去哪里兑奖| www.302743.com-掌上中彩是真的吗| www.89hs.com-京彩挂机app下载| www.4705.com-买彩票花了十几万| www.15022.com-连中彩票最新版| www.79oc.com-今晚彩票奖号| www.4264.cn-维彩会-| www.798356.com-有盈彩票官网app| www.405711.com-神彩争霸邀请码最新| www.560253.com-非凡彩票3d-| www.8436.cn-买彩票快3输| www.1225.wang-万豪国际博彩邀请码| www.6496.net-七乐彩专家汇总| www.973995.com-132.com彩票| www.ze2.com-彩票本钱少很难赢的| www.xl22.cc-鑫彩彩票正规吗| www.57pz.com-时时彩五星直选组合| www.0514.pro-彩客彩票37旧版| www.8452.top-博友彩是怎么运行的| www.em59.com-体彩排列五开奖时间| www.n48.net-手机新浪彩票网| www.71co.com-搜索118彩票网| www.789257.com-福彩双色球中奖真假| www.925608.com-金彩100是传销吗| www.984098.com-75彩票下载-| www.iy30.com-申国竞彩网首页| www.337358.com-广西福利彩票网| www.033.win-竞彩篮球哪里看结果| www.5867.xyz-彩票3d带线走势图| www.16199.com-网络彩票超稳计划| www.079044.com-大玩家彩票平台被黑| www.234573.com-彩票软件哪个正规| www.122009.com-马云买的彩票| www.210801.com-分分快三能赢吗| www.293122.com-太湖字谜多彩网| www.376929.com-517菠菜网彩票| www.113118.com-彩票数字五行属什么| www.df71.com-万博彩票彩种| www.0418.cn-山东彩票客户端下载| www.827363.com-华阳彩票app| www.918822.com-彩票走势模拟投注| www.974211.com-福彩中几个号有奖| www.cai8155.com贵州省福彩兑奖中心| www.173357.com-玩福彩快三能赚钱嘛| www.31235.cc-易彩快3开奖查询| www.mj66.cc-分分时时彩是真的吗| www.3256.org-头头奖彩票-| www.175090.com-中国快三人人网| www.562907.com-彩伞-| www.32535.cc-河南人彩礼最低多少| www.081045.com-大乐透彩研师| www.670566.com-法国时时彩资料| www.522075.com-旭彩彩票网站| www.1376.vip-九龙彩票论坛| www.cai3733.com醒快汇内蒙古快三| www.54315.com-彩票帮投是什么| www.553669.com-竞彩5000万中奖| www.669567.com-上海彩钢房| www.451551.com-福利彩票中奖得主| www.864928.com-下彩网安卓彩网| www.3aj.com-福彩时时乐开奖官网| www.6219.biz-网络兼职买彩票| www.65422.cc-青海体彩开奖| www.084568.com-彩70网址-| www.51383.cc-福满天体彩店下载| www.090550.com-体彩排三走势图表| www.88974.com-广州福利彩票店转让| www.41hg.com-体育彩票有节假日吗| www.un06.com-分分快3是什么彩票| www.376723.com-iso七星彩软件| www.517558.com-6688彩票-| www.820756.com-彩钢瓦单价-| www.687601.com-陕西福利彩票| www.833539.com-3d福彩计划网| www.967824.com-谁有彩票交流群| www.nq77.com-中彩网彩票选号助手| www.375620.com-群英会彩票玩法| www.918036.com-送彩金网大全| www.979513.com-龙彩科技-| www.yy.com-中国福彩开奖信息| www.zz15.com-体育彩票图标| www.47fi.com-体彩店装修风格图片| www.270298.com-查彩票app-| www.525584.com-极速75时时彩| www.983503.com-福彩赌博微信群| www.ay09.com-1分快三稳定计划| www.yb34.com-快三13点和值| www.683483.com-彩票过滤-| www.774551.com-手机彩票网站建设| www.890731.com-彩票亏的倾家荡产| www.953739.com-买足彩看什么最准| 500彩票www.50064v.com| www.4sz.com-武汉开彩票店挣钱吗| www.388064.com-华彩的成语-| www.618655.com-足彩19040大势| www.721236.com-新宝彩票网-| www.804343.com-极速时时彩是哪里的| www.875111.com-258竞彩足球官方| www.956074.com-快三彩票辅助器| 爱购彩票www.335284.com| www.u78.me-贵州多彩网众望| www.42ba.com-体彩开奖查看软件| www.657502.com-今晚体彩开奖| www.45702.com-彩票的可以筛号| www.007051.com-今天3d彩报第三版| www.i61.bid-安装南方双彩网| www.295521.com-下载上海福彩网| www.788732.com-竞彩篮球分析软件| www.6178.me-惠民乐彩票是真的吗| www.009045.com-黑客更改彩票余额| www.374854.com-七星彩中几个数有钱| www.523950.com-手机淘宝在哪买彩票| www.791542.com-体育彩票竞彩店图片| www.870262.com-广西快乐双彩走势图| www.949173.com-五福彩下载-| 彩票500万www.cp500.in| www.99755.com-巨人彩票app| www.575783.com-福彩电子投注| www.629830.com-唯彩会官网下载苹果| www.693278.com-万彩吧彩票彩票开奖| www.762075.com-竞彩推单app| www.862013.com-今日体彩出奖号| www.916089.com-彩票平台主管的返点| www.969616.com-足球竞彩比赛结果| 500彩票www.50051w.com| www.013809.com-七星彩图纸开奖| www.071305.com-彩票店能否转让| www.127462.com-彩厍宝典-| www.712782.com-福彩迷语-| www.788160.com-365足彩软件| www.861331.com-福彩三d预测总汇| www.919147.com-真假彩票-| www.972433.com-菠萝彩官方软件下载| www.en14.com-福彩好运三开奖结果| www.xa53.com-5分快三怎么看走势| www.11vd.com-怎样投诉彩票平台| www.70zd.com-马彩号码图-| www.0423.net-彩票助赢软件设置| www.501791.com-全民赚套利彩票| www.805168.com-足彩新浪比分直播网| www.737426.com-快三注册下载送彩金| www.913068.com-彩票中奖网站预测| www.j38.net-七星彩开奖号码公告| www.322362.com-最稳的彩票计划软件| www.bw10.com-江苏快三助手下| www.610206.com-古风彩铅画教程图解| www.8166.cc-澳门博彩32-| www.144833.com-竞彩足球交易量| www.cm62.com-中国快三计划软件| www.95le.com-在武汉哪里买彩票| www.yc69.com-北京快三派彩网址| www.29gr.com-搜狐彩票安全吗| www.87ry.com-时时彩兼职网站| www.1312.tv-国乐彩网址-| www.593234.com-彩虹六号墨冰图鉴| www.318047.com-幸运彩票成立多久了| www.33vy.com-有中七星彩的人吗| www.1816.cm-三分彩官方下载|