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.518172.com-牛彩彩票软件下载| www.647986.com-体育彩票官方kj| www.825759.com-山西大清快三真假| www.945622.com-拉人玩彩票犯法吗| 天天彩www.87467.com| www.30bm.com-彩铅画多肉植物| www.791963.com-付进彩票站有多远| www.908335.com-七乐彩出球顺序| www.996045.com-北单串子和竞彩串子| www.ju65.com-双色球下期预测颖彩| www.7938.com-色彩雫最热门颜色| www.4424.top-网彩赚钱是真的吗| www.19028.com-皇帝彩票娱乐| www.77579.cc-体彩福彩的开奖结果| www.037499.com-超级彩票助手苹果版| www.130513.com-我中啦彩票网官网| www.39515.cc-怎样登录豪彩| www.203590.com-内苎快三预测| www.321534.com-下彩网触屏版| www.453997.com-什么是彩钢瓦| www.562693.com-这些高频彩真坑人| www.635944.com-七彩印象烟-| www.707739.com-足球胜负彩即时比分| www.789099.com-足彩中奖是否真实| www.885184.com-谁知道传奇彩票网址| www.86012.com-网上彩票带赚| www.9486.cn-彩钢琉璃瓦机报价| www.333089.com-玩彩怎么稳赚| www.439085.com-悠悠小站彩票下载| www.553425.com-时时彩长龙规律总结| www.635456.com-博有彩-| www.708151.com-六彩票53-| www.780933.com-手机彩票幸运28| www.852661.com-中国体彩在线| www.913206.com-怎么注册彩票账号| www.974409.com-28彩票平台注册| www.cp116.com-快三彩票大全| www.866224.com-体彩手机在线被限制| www.974422.com-用手机在哪买彩票| www.lk03.com-豪彩app网站| www.542848.com-彩票怎么中奖几率高| www.1233.tv-高频彩被叫停| www.10152.com-彩神彩票网-| www.75344.com-旺彩双色球升级版| www.a19.bid-荣誉彩票是否安全| www.87fi.com-时时彩退水意思| www.82js.cc-乾特商城彩票平台| www.63gs.com-海南体彩论坛规律| www.028724.com-盛彩-| www.109829.com-红牛快三计划软件| www.014166.com-福利彩app靠谱吗| www.129561.com-七星彩头尾定位| www.266822.com-玩吉林快三能赢钱不| www.396815.com-金钱豹彩票娱乐平台| www.737583.com-手机牛彩首页| www.922255.com-彩票365购彩| www.aq84.com-大发快三下载| www.81dn.com-冮苏体彩7位数| www.339364.com-福彩机器外接显示器| www.005590.com-信搏彩票网址| www.375688.com-彩金宏辉-| www.30535.com-瑞彩祥云苹果下载| www.145817.com-竞彩分析-| www.387263.com-手机彩膜制作| www.897841.com-安徽快三微信群| 非凡彩票www.77210j.com| www.335460.com-购买彩票app| www.ck11.cc-老快三开奖号码遗漏| www.6954.shop-竞彩收米-| www.004861.com-福彩33期开奖号码| www.115382.com-4场进球彩分析| www.339658.com-特吧彩吧高手网| www.663911.com-nba彩票规则| www.868431.com-今天七星彩图纸| www.cp8255.com-福利彩票快3湖北| www.32hw.com-58彩l58开奖| www.260032.com-买体育彩票算赌博吗| www.418722.com-彩票店怎样盈利| www.44014.com-全民中彩-| www.098219.com-百度乐彩3d走势图| www.31zc.com-彩虹画儿童画图片| www.7576.in-华彩生活怎么还款| www.cp2678.com-江苏快三稳赢技巧| www.02pq.com-世界杯彩票能用的| www.4217.com-七彩坊内衣连锁| www.38693.cc-好彩葡萄爆珠| www.767083.com-三d正版藏机图福彩| www.318079.com-江苏快三带线走势图| www.507293.com-彩神提现不到账| www.856840.com-○k彩票-| www.975938.com-日照彩礼一览表| www.b42.cn-江西省福彩发行中心| www.192.com-口袋彩店用不了了| www.671131.com-cb8彩宝安卓| www.6ck.cc-360足彩直播吧| www.32cv.com-彩票开奖是根据什么| www.375244.com-快三输钱太快了| www.615926.com-美狮彩票软件| www.838553.com-竞彩让平负-| www.355468.com-竞彩纳税-| www.3kl.com-彩票14-| www.2261.vip-彩票二维码扫描兑奖| www.38359.cc-北京时彩时彩开奖| www.119061.com-百盈时时彩计划全天| www.1402.xyz-彩运来注册网址| www.119365.cc-彩票ap-| www.111169.com-快三坑人-| www.114443.com-福彩中心窝案| www.860760.com-快三二同号稳赚技巧| www.798914.com-竞彩足球胜平澳客网| www.876878.com-彩票玩法规则软件| www.944816.com-百姓彩坛那个资料网| 8k彩票www.803243.com| www.xe44.com-彩35彩票-| www.2314.biz-惠泽夭下彩票| www.26060.com-关于彩虹的唯美句子| www.82766.com-新浪陆慧明足彩微博| www.138799.com-福彩快3推荐码| www.628785.com-彩票宝最新版本| www.688096.com-金利彩票手机版| www.921008.com-608彩票-| www.637529.com-体彩六加一中奖规则| www.92905.com-3分快彩-| www.51712.cc-彩票倍投表-| www.038380.com-用我ip代玩彩票| www.974468.com-手机福彩小助手| www.469828.com-彩票行业的五行| www.888675.com-七乐彩机选号码特征| www.962633.com-时时彩百变计划在线| www.cai0977.com安徽快三开奖是多少| www.kh29.com-易彩网怎么提现| www.602032.com-买彩票花了十几万| www.421883.com-南宁市体彩中心地址| www.wz38.cc-福彩3地走势图综合| www.159640.com-足彩任九开奖结果| www.1961.org-新乐彩吧图库| www.660996.com-南方彩票手机| www.731877.com-彩色压印混凝土| www.554864.com-那个省份快三| 豪彩VIPwww.808913.com| www.930746.com-中彩网双色球论坛| www.6831.cn-wxing彩票-| www.588.la-陕西福彩中心地址| www.122423.com-彩世界时时彩软件| www.2189.cm-下彩网下载-| www.897096.com-安徽彩票得主房全发| www.777722.com-头彩网登录-| www.48dm.com-福彩3d图谜中龙| www.2666.hk-福彩3d乐采网| www.8598.site-长沙恒大都彩票中奖| www.di10.com-520快三网址| www.376972.com-ll彩票平台-| www.326646.com-乐彩排三论坛| www.424180.com-免费彩票全年资料| www.516035.com-中国体彩篮球结果| www.612677.com-网易足彩网-| www.6ue.com-和彩这个词对吗| www.126648.com-彩票api接口地址| www.695425.com-火星彩票诈骗| www.763234.com-学生中彩票大奖| www.817575.com-褔客来彩票-| www.879491.com-彩票团队计划| www.939937.com-彩神8快三官方| www.981886.com-爱彩人app下载|