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.038104.com-犀牛彩票邀请码| www.532901.com-福彩了d预测| www.699004.com-彩票41多少钱| www.818553.com-新浪彩票_彩票网| www.2585.cm-彩票中奖与数学| www.9591.wang-七星彩南国彩票| www.311827.com-福彩3d图库-| www.763833.com-足彩下载什么软件| www.083630.com-贵州快3彩票下载| www.36mh.com-2月7号七星彩| www.86bx.com-福彩3d村杀码| www.49885.com-神计划人工时时彩| www.749599.com-体彩app购彩| www.363208.com-羽泉彩虹吉他谱g调| www.04rx.com-初学者买什么彩铅笔| www.0639.xyz-彩票任选5结果| www.644470.com-体彩千万大奖得主| www.039772.com-多乐彩app-| www.141131.com-3d老猫出彩的快讯| www.281686.com-重庆老时彩开奖| www.440119.com-镇江中彩票-| www.632989.com-加拿大三分彩走势图| www.791457.com-内蒙古快三和值| www.881900.com-大乐透牛彩网| www.995480.com-好彩店彩票可靠吗| www.mo34.com-彩票预测最准的方法| www.022349.com-恒彩首页登录平台| www.083349.com-东彩娱乐平台可靠吗| www.445456.com-长春彩票-| www.31776.cc-中国足彩必发指数| www.7361.shop-11选5爱彩乐山东| www.rn43.com-快三三不同全包| www.21lo.com-体彩开业条幅| www.4446.com-满堂彩彩票平台网址| www.145813.com-中国足彩网官方客服| www.810836.com-彩票走势图规律| www.uk67.com-地方彩票开奖| www.026897.com-微信彩票计划群和买| www.604496.com-彩票打码量是什么| www.038185.com-彩牛彩票是真是假| www.019153.com-彩票宿水专家| www.099833.com-五分快三玩法| www.596256.com-云彩在线彩票app| www.lr54.com-大中华彩票手机版| www.22pa.com-彩票怎么买新手| www.026250.com-广西体彩中奖规则| www.292971.com-彩票3d预测推荐| www.311858.com-彩票推荐最好的办法| www.198639.com-福利彩票快三单式| QQ彩票www.89894n.com| www.be22.com-五分彩是骗局吗| www.543238.com-nncny牛彩纽约| www.496801.com-六爻测3d彩票方法| www.447661.com-足彩牛人微信公众号| www.js61.com-彩神x下载网址| www.7033.biz-幸运彩平台怎么样| www.760843.com-腾讯3分彩计划全天| www.07md.com-玉无心彩铅画| www.887.cc-艾彩女女-| www.075001.com-深圳区块链彩票| www.5369.cm-在淘宝怎么买彩票| www.92885.cc-九亿彩票下载| www.193631.com-快三怎么算中奖| www.467605.com-几点后不能买彩票| www.962874.com-广东十一选主彩乐乐| www.1913.top-时时彩组六胆拖技巧| www.062683.com-大发彩票登录不了了| www.115094.com-彩乐乐专家细雨杀号| www.88319.cc-春天彩票下载| www.115930.com-淘必中这么玩彩票| www.ob28.com-彩票源码搭建一条龙| www.229359.com-一定牛彩票网骗子| www.783846.com-金柯福彩3d-| www.77ax.com-体育彩票刮刮乐兑奖| www.ez43.com-彩90彩票登录| www.yy49.cc-红旗彩票39957| www.369091.com-彩票699网站| www.513930.com-彩票什么时候上班| www.829992.com-娱乐游戏首存送彩金| www.an91.com-江西快三怎么开奖| www.087661.com-体彩云彩店app| www.84eq.com-彩票亭-| www.2455.cn-743好彩软件下载| www.893332.com-彩票筛选安卓| www.911689.com-快开彩qq群-| www.cp9949.com-福彩网app怏三| www.du07.com-精准彩票中奖软件| www.798657.com-彩票平台线路导航| www.284550.com-江西彩票时时彩| www.529969.com-彩库宝典旧版旧| www.29qo.com-彩票网站推广联盟| www.153023.com-够力七星彩奖表官网| www.011025.com-易迅彩票是真的吗| www.50158.com-最好用的彩票app| www.903577.com-福彩3d投注方法| www.1855.club-福利彩票站长服务| www.150776.com-彩票号码过滤器| www.600268.cc-长春彩溢洗浴| www.112702.com-彩票刷反水-| www.he00.com-福彩3d赵公明| www.739082.com-彩神通破解版| www.603690.com-物超所值的彩票程序| www.775300.com-8炫彩彩票规则介绍| www.374904.com-七星彩头尾规律软件| www.36200.com-炫乐彩票注册| www.un04.com-百姓百姓彩坛| www.677350.com-给推荐彩票号| www.1545.com-包头福利彩票| www.028693.com-江苏快三下-| www.62651.cc-彩先知开奖-| www.268880.cc-快三什么是全骰| www.886241.com-vba编写彩票程序| www.826090.com-33彩票登录-| www.963045.com-宝鸡体彩-| www.21bd.com-高频彩数字规律技巧| www.51zi.cc-福彩东方六加一开奖| www.982647.com-彩之星彩票-| www.3131.net-河北快三骗局| www.254892.com-彩票开奖结果梦册| www.568828.com-梦见别人买彩票中奖| www.22928.cc-3d彩票守号三年了| www.182838.com-彩票选号神器| www.7481.cn-彩02软件正规吗| www.002387.com-吉林快三怎么玩儿| www.976304.com-云南昆明彩票中奖| www.7626.wang-k彩平台是黑台吗| www.899613.com-c81彩票下载安装| www.1495.cc-彩虹照片唯美| www.132404.com-河南开封的彩礼| www.cp0528.com-安徽省快三跨度| www.751463.com-2020网络彩票| www.jt97.com-河北保定快三走势| www.506543.com-五行花甲预测彩票| www.643007.com-kk彩票网下载安装| www.gs49.com-好彩烟价格-| www.559646.com-陇彩宝-| www.727911.com-福彩p62图表| www.862251.com-腾讯彩票安卓版下载| www.536.date-福体彩开奖公告查询| www.930724.com-大发快三豹子是什么| www.64018.cc-足彩什么是深盘| www.539222.com-彩票销售-| www.s77.tv-桐梓彩票-| www.537.net-腾讯分分彩有暗箱吗| www.121762.com-宁夏中卫福彩中心| www.022349.com-恒彩首页登录平台| www.8038.top-水彩森系少女| www.123371.com-彩票追号盈利计划| www.551056.com-足球彩票合买合买| www.l11.com-0234彩票-| www.3210.mobi-河北福利彩票中奖| www.156424.com-好彩堂经典三肖| www.s13.biz-中彩网与500| www.813928.com-快三446-| www.478314.com-彩312-| www.qy41.com-腾讯分分彩计划软件| www.8755.org-怎样组选双色球彩票| www.065666.com-胜利彩-| www.376635.com-关于结婚要不要彩礼| www.784.in-复式彩票什么意思| www.9879.top-竞彩被禁止了吗| www.312205.com-春秋彩票苹果版下载| www.168710.com-内蒙古快三遗漏| www.26336.com-人人中彩票ios|