label与input的结合方式

最新推荐文章于 2022-08-05 20:08:49 发布

ducode

最新推荐文章于 2022-08-05 20:08:49 发布

阅读量3.2k

点赞数 2

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/3680343/blog/1614951

版权

2019独角兽企业重金招聘Python工程师标准>>>

当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

绑定方法：通过label标签的for属性与相关表单控件的id属性相同

eg：

<label for="test">姓名</label>
<input type="text" id="test" />

1.label与input(type="text")文本类型的结合

当鼠标点击姓名是，光标自动定位到input输入框，如下图

2.label与input(type="radio")按钮类型的结合

与此类型结合，一般用来重置按钮样式或解决手机端选项点击不灵活现象

重置按钮样式

<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>按钮列表</title>
	<style type="text/css">
		body{
			margin:0;
			padding:0;
		}
		#container{
			width:500px;
			margin: 0 auto;
			height:500px;
		}
		.radio-item{
			position:relative;
		}
		.radio-item .radio-text{
			position:relative;
			top:-6px;
			display: inline-block;
		}
		input{
			width:20px;
			height: 20px;
			opacity: 0;
		}
		input+label{
			position:absolute;
			left:4px;
			top:2px;
		    width: 20px;
		    height: 20px;
		    /*border-radius: 50%;*/
		    border: 1px solid #f2f2f2;
		}
		input:checked+label{
			background:#999;
			border:1px solid #999;
		}
		input:checked+label:after{
			position: absolute;
		    left: 7px;
		    top: 2px;
		    content: "";
		    width: 5px;
		    height: 12px;
		    border: 2px solid #fff;
		    border-left: none;
		    border-top: none;
		    transform: rotate(45deg);
		}
	</style>
	<script type="text/javascript" src="../vendor/jquery-1.11.3.min.js" ></script>
</head>
<body>
	<div id="container">
		<div class="radio-item">
			<input type="checkbox" id="item1" name="item1" checked/>
			<label for="item1"></label>
			<label for="item1" class="radio-text">选项一</label>
		</div>
		<div class="radio-item">
			<input type="checkbox" id="item2" name="item1"/>
			<label for="item2"></label>
			<label for="item2" class="radio-text">选项二</label>
		</div>
		<div class="radio-item">
			<input type="checkbox" id="item3" name="item1" checked/>
			<label for="item3"></label>
			<label for="item3" class="radio-text">选项三</label>
		</div>
		<div class="radio-item">
			<input type="checkbox" id="item4" name="item1"/>
			<label for="item4"></label>
			<label for="item4" class="radio-text">选项四</label>
		</div>
	</div>
	<script>
		$(document).ready(function(){
			
		});
	</script>
</body>
</html>