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.650791.com-儿童水彩创意| www.784682.com-众彩手机下载| www.70td.com-兖州福彩中心民政局| www.oj26.com-吉林市福彩上哪兑奖| www.421725.com-夭下彩网高手网| www.621605.com-网上买彩票500万| www.24684.cc-唯美彩铅花鹿| www.007844.com-腾讯彩票手机客户端| www.990279.com-多乐彩票平台| www.lz36.com-彩票77软件-| www.25bv.com-人民网彩票-| www.987.tv-九彩霸王花-| www.111385.com-腾讯5分彩人工计划| www.165382.com-安徽福彩网几点开奖| www.086859.com-今晚体彩奖号| www.221656.com-瑞彩祥云快三技巧| www.375938.com-牛旺庄彩票店| www.798236.com-易彩补漆笔好吗| www.895889.com-永诚中彩票安全吗| www.974340.com-蓝精灵彩吧b| www.048040.com-粤淘彩票下载| www.513531.com-重庆时时彩五分| www.eg5.cc-快三彩票是坑人的吗| www.62.win-官方高频彩开奖号码| www.9105.com-彩铅画入门教程的书| www.005115.com-刚力彩芽高清| www.59256.cc-长沙快三-| www.791746.com-北京时时彩平台| www.898171.com-推广彩票技巧| www.974962.com-七星彩走势连线图| www.cp119.com-吉林快三平台搭建| www.tr88.cc-网上刷彩票犯法吗| www.04oy.com-大众彩票手机客户端| www.53593.cc-彩票真有人中大奖吗| www.049692.com-彩票算法大揭密| www.151211.com-彩票大同平台登录| www.404818.com-福利彩票6加1玩法| www.514224.com-上海快三结果| www.588858.cc-卓越幸运8彩票平台| www.662923.com-重庆福彩12生肖| www.737157.com-凤凰玩彩平台| www.810113.com-好彩堂资料中心| www.912962.com-体彩三等奖-| www.976486.com-云南省福利彩票中奖| www.yk0.com-福利彩票快三单式| www.r28.bid-天津体彩11选五组| www.0479.cc-东森彩票客户端| www.08633.com-彩票梦想站官方网站| www.698365.com-独角兽彩虹什么寓意| www.09mf.com-彩票中奖了有坏处吗| www.4369.biz-全民彩票计划分析| www.36956.com-竞彩2窜1技巧| www.65qs.com-重庆14彩合法吗| www.093508.com-北京体彩店联系方式| www.178203.com-快三游戏下载| www.259750.com-京东彩票怎么停售了| www.341748.com-qq赌快三的群| www.436492.com-陕西体育彩票app| www.539661.com-儿歌彩虹的约定简谱| www.684068.com-福彩快三杀号| www.773591.com-彩票秘籍中奖宝典| www.852988.com-本期体彩开奖情况| www.934254.com-反套路彩票女| www.990406.com-彩票软件大红鹰下载| www.128741.com-体彩包括哪些种类| www.217363.com-彩70app官网| www.301067.com-棋牌游戏送彩金| www.383545.com-keystr彩票-| www.879769.com-888彩票平台| www.ce40.com-青海快三走势图图| www.i52.cc-银川体彩地址| www.wx57.com-彩鸿彩票不能提现| www.89rx.com-竞彩篮球一定牛| www.20108.com-大奖三分彩计划| www.181078.com-app彩票2元网| www.270323.com-九龙彩票-| www.445394.com-德惠彩票销售电话| www.548917.com-澳门快三彩票| www.557280.com-彩宝贝彩票专家预测| www.631371.com-七彩阳光慢动作视频| www.702183.com-胜负彩十四开奖结果| www.779581.com-彩吧学堂-| 幸运彩票www.852699.com| www.80ju.com-星期五彩票什么开奖| www.385664.com-福利彩票彩宝贝| www.566184.com-足彩害人-| www.676251.com-焦作结婚彩礼十一万| www.794177.com-福彩3d跨度算法| www.988091.com-彩民乐大乐透| www.be32.com-内蒙古福彩管理中心| www.1uh.com-湖北体彩中心在哪里| www.308.org-彩票奖券纠纷| www.9127.biz-彩虹岛app-| www.71370.com-中国体彩网开奖| www.044551.com-湖北快三难度| www.2340.tv-谁有3分彩计划| www.8371.wang-福星七星彩手机软件| www.725708.com-彩票兑奖多长时间| www.854349.com-华夏彩票骗人| www.926962.com-韩国金山快三走势图| www.981252.com-排列三新彩网预测| www.69hw.com-彩票访官方平台好吗| www.037068.com-大羸家彩票-| www.325196.com-海南有什么彩| www.137265.com-七彩冰淇淋做法| www.217189.com-新浪数字彩票汇总| www.289708.com-大乐透凤彩网杀号| www.379968.com-玩黑彩违法吗| www.478900.com-郑州体彩网点申请| www.168081.com-福彩快三彩票| www.455688.com-凤凰彩票有没有风险| www.529727.com-哪里可以看体彩直播| www.587857.com-香港6万彩资料| www.645933.com-足彩研究心得| www.943605.com-百福彩软件-| www.94nm.com-基诺彩票开奖| www.2803.in-七星彩直播开奖在线| www.15080.com-彩票导航天下彩| www.78208.com-足球彩票的优服务| www.77632.cc-全民彩票手机版下载| www.cp8108.com-下载易彩网-| www.z35.club-广西福彩3快| www.83ms.com-体育彩票游戏规则| www.1853.top-广西快三提示| www.6925.xyz-49彩票网-| www.14300.com-体育彩票36选七| www.88239.cc-lg传统彩-| www.072568.com-九号彩票秒速快三| www.341881.com-诺亚网彩平台| www.805119.com-能买七乐彩的网站| www.890883.com-中国彩票哪个靠谱| www.954719.com-排三走势图彩宝网| 彩客网www.535059.com| www.969184.com-福彩基金效益如何写| www.87yk.com-福彩3d精华布衣5| www.3789.net-七星彩票海南论坛| www.9824.cn-彩票开奖査询| www.280003.com-彩199彩票-| www.05508.com-代买幸运快三| www.60263.com-大乐透走势图彩元网| www.410482.com-福彩开奖怎么看| www.529640.com-体育彩票浙江6+1| www.605548.com-什么彩票平台最好| www.872914.com-福彩加盟电话多少| www.397926.com-昨天开奖的七星彩| www.597557.com-必发彩票网址app| www.845885.com-有钱人会买彩票吗| www.836246.com-湖北快三彩票| www.9391.cn-独中彩票101亿| www.36161.cc-快乐十分彩票官方| www.73340.com-彩圣网免费五肖资料| www.854091.com-蚂蚁积分买彩票| www.976601.com-山西结婚彩礼多少钱| www.hl69.com-上海快三中奖金额| www.c89.com-国民彩票下载| www.29ta.com-福利彩星期几开奖的| www.94we.com-500彩怎么买彩票| www.1914.vip-中昂彩云台地址| 天天彩票www.106356.com| www.qg53.com-买快三和值大小单双| www.7sb.com-送彩票中了算谁的| www.73cz.com-微彩彩票是什么意思| www.1369.cc-vr彩票太假-| www.7062.pw-百度天下彩-|