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.848038.com-彩票怎么看几等奖| www.954703.com-彩票开奖彩票123| 中彩网www.71233m.com| www.js91.cc-网上买彩票输了几万| www.254049.com-75彩票-| www.275967.com-大发快三怎么作弊| www.0622.top-在线彩票新版| www.20909.com-江西时时彩彩票| www.134812.com-缅甸好彩双爆珠| www.cai3678.com快三中奖规则| www.47vp.com-国家彩票书籍| www.68835.com-双色球彩票幸运选号| www.884183.com-网上彩票能控制吗| www.198407.com-福彩快三怎么了| www.039708.com-快发彩票是啥| www.sf77.com-在网上怎么买彩票| www.88fb.com-私彩平台代理层级| www.9959.pw-体彩利润多少个点| www.2925.shop-甘肃彩票中心电话| www.092573.com-福建体育彩票下载| www.483567.com-点彩-| www.646832.com-稳赚不赔的彩票玩法| www.586486.com-人人中彩票网手机版| www.660444.com-腾讯分分时彩| www.732655.com-彩票三d和尾图| www.186373.com-全天10分快三计划| www.787915.com-各期彩票开奖结果| www.878889.com-彩票玩法技巧| www.964242.com-足球十四场胜负彩| www.464672.com-福彩快3河南| www.599170.com-彩票怎么买能中| www.07523.com-500彩票跟计划| www.377736.com-中华彩票网站是多少| www.656963.com-福彩3d截止时间| www.749524.com-今晚彩票开奖| www.839228.com-75彩app-| www.807913.com-黑桃k时时彩| www.540097.com-最大的彩票网站| www.631617.com-老时时彩软件| www.713169.com-潮信买彩票安全吗| www.789578.com-足彩竞猜什么叫上盘| www.863315.com-16号的体彩开奖号| www.759375.com-体育彩票平台哪个好| www.940331.com-吉林快三全网开放| www.47747.com-韩国足球彩票玩法| www.150133.com-首彩51-| www.761524.com-百度乐和彩登陆| www.865142.com-福彩3d微信讨论群| www.19958.com-彩票app制作成本| www.959732.com-3分彩是什么意思| www.127584.com-彩虹玫瑰存在吗| www.217863.com-云彩厅彩票app| www.288912.com-彩票开奖查询123| www.362981.com-带彩虹图片的成语| www.472485.com-全国有多少专业彩迷| www.575504.com-福利彩票招聘| www.662672.com-彩名堂苹果怎么下载| www.759126.com-彩薇花护肤品| www.872181.com-搜索彩票双色球| www.958783.com-彩票多久一次| www.cp3636.com-河南体彩481| www.sz86.com-六位数彩票有哪些| www.823309.com-博兴彩钢瓦厂| www.423755.com-竞技彩票-| www.820672.com-彩钢瓦厚度规格表| www.949459.com-网赚彩票平台| 福彩网www.60007b.com| www.970827.com-迷彩兔网站下载| www.714932.com-瑞彩网快三-| www.864609.com-快三大师-| 8816彩票www.8816n.com| www.41139.com-体彩大乐透分析软件| www.37594.com-8888彩票官网| www.360189.cc-黑彩的服务器在哪里| www.568021.com-福彩3d两码遗漏表| www.959365.com-御彩轩下载-| www.785044.com-中彩票的几率是多少| www.972533.com-森系星空鹿水彩| www.xs21.com-数字彩票出号规律| www.73yt.com-3d天天彩图片| www.2156.top-彩经网众乐快三| www.578987.cc-体彩3l选7-| www.261822.com-七天彩app苹果| www.631719.com-七星彩抓规神器| www.85454.com-福彩双色球胆拖表| www.35892.com-福彩搞笑宣传语| www.966671.com-彩票手机机选下载| www.sc85.com-官方分分彩网址| www.416641.com-搜索福利彩票双色球| www.524815.com-大数据彩票快三| www.611749.com-附近有没有买彩票| www.692985.com-17彩票绑定安全吗| www.770416.com-六全彩赌博案例| www.830414.com-查看彩票的app| www.731543.com-go彩网官网-| www.381812.com-肥城体彩3亿元| www.621985.com-宝马彩票网是否真实| www.948926.com-彩票内部透码彩图| www.616777.com-福报彩票-| www.776654.com-重庆时时彩停盘通知| www.775030.com-官方腾讯10分彩| www.38kk.com-彩铅颜色调色表图片| www.657.in-特彩吧高手报码| www.109276.com-足彩北单预测| www.177432.com-甘肃快三助手app| www.240551.com-彩票选号摇奖神器| www.401228.com-足球彩哪个网站靠谱| www.191837.com-一分快三怎么看走势| www.615168.com-三彩翡翠值钱吗| www.407998.com-大牌彩妆排行榜| www.125767.com-那些彩票是官方的| www.89dp.com-竞彩足球买几串好| www.1742.vip-鸿彩主播木木| www.501591.com-易彩网是真的赚钱吗| www.308762.com-中国福利彩票投注站| www.15699.cc-一定牛快三预测吉林| www.739384.com-竞彩冠亚军玩法| www.834.date-湖南福彩彩民论坛| www.07054.com-工行彩票定投| www.45mu.com-排三专家杀号彩经网| www.5260.pw-中国体彩七彩星| www.45047.com-盛大彩票555| www.358935.com-微博彩票游戏玩法| www.513014.com-开心网七星彩| www.623032.com-财神8彩票网正规吗| www.787296.com-福建即乐彩十一选五| www.958977.com-福彩3d藏机图| www.jg50.com-分分快三是真的吗| www.110719.com-今晚七星彩出什么| www.519610.com-大乐透彩民乐图迷| www.15qt.com-彩票店幽默对联| www.01yv.com-少儿重彩画-| www.so77.com-台湾时时彩结果| www.617761.com-长春体育彩票店| www.719367.com-彩播app二维码| www.951304.com-李彩桦-| www.bt.com-中国快三投注| www.598609.com-福利彩票3d号码| www.163429.com-靠彩票-| www.253884.com-天津时时彩走势图| www.852691.com-多彩宝-| www.961100.com-彩票内部计划群| www.cl74.com-彩神大发快三攻略| www.02qh.com-惠民彩票的导师号码| www.8879.org-足彩八串八什么意思| www.44655.cc-乐彩合法吗-| www.393251.com-多肉彩铅画入门教程| www.539385.com-釉下彩盖碗鉴定| www.00882.com-福盈门彩票准成么| www.63392.cc-众彩网七星彩顶测| www.180111.cc-快三开奖中奖规则| www.128889.com-彩民在线网站| www.zm42.com-福利彩票咋玩| www.fa73.com-倍投彩票可靠吗| www.sn05.com-私彩报警退钱| www.00957.com-乐彩3d杀码-| www.638853.com-福彩中心会转企么| www.761971.com-竞彩足彩下载| www.855699.cc-彩票头奖命-| www.922535.com-红8彩票app-| www.975404.com-安徽福彩客户端下载| 大赢家彩票平台www.927150.com| www.24288.cc-彩铅如何画苹果| www.080.me-爱心彩官方下载|