When the user selects the label, the browser will automatically focus on the form control associated with the label.
Binding method: The for attribute of the label tag is the same as the id attribute of the related form control
eg：
<label for="test">姓名</label>
<input type="text" id="test" />1. The combination of label and input(type="text") text type
When the mouse clicks on the name, the cursor is automatically positioned to the input box, as shown below
2. The combination of label and input(type="radio") button type
Combined with this type, it is generally used to reset the button style or solve the inflexible click of mobile phone options.
-
reset button style
<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>
-
Solve the phenomenon of inflexible click on the mobile phone
For example, multiple-choice questions are all radio types. Due to the limited screen width on the mobile phone side, the button click event is not as accurate as on the computer side. If we use the for attribute of the label to bind the id attribute of the input, so , and then click to select, just click the current topic to select it, there is no need to click the button separately.