label與input的結合方式

時間 2019-11-21

標籤 label input 結合方式简体版

原文原文鏈接

當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。javascript

綁定方法：經過label標籤的for屬性與相關表單控件的id屬性相同css

eg：html

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

1.label與input(type="text")文本類型的結合

當鼠標點擊姓名是，光標自動定位到input輸入框，以下圖java

2.label與input(type="radio")按鈕類型的結合

與此類型結合，通常用來重置按鈕樣式或解決手機端選項點擊不靈活現象jquery

重置按鈕樣式

<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>