Label标签的使用

Label标签

for属性的介绍

• <label>专为input元素服务, 为其定义标记

• for属性规定label与哪个表单元素绑定

label和表单控件绑定方式

• 隐式绑定 : 将表单控件作为label的内容

<label>username:<input type='text' id='un'></label>

• 显示绑定 :

<label for='un'>username:</label> <input type='text' >id='un'>

为啥要添加for属性呢?

• 提高鼠标用户的体验

• 在label元素内点击文本,会触发此控件.

Label-for的具体应用

简单应用

   <form>
       <label for="male">Male</label>
       <input type="radio" name="sex" id="male" />
       <br />
       <label for="female">Female</label>
       <input type="radio" name="sex" id="female" />
   </form>

   <form>
       <label for="jk">计科 : </label>
       <input type="checkbox" name="major" id="jk" />
       <br />
       <label for="rg">软工 : </label>
       <input type="checkbox" name="major" id="rg" />
   </form>

纯CSS实现幻灯片

• CSS代码

       img {
           width: 200px;
           height: 150px;
           display: none;
       }
       
       input[name='pic'] {
           position: absolute;
           left: -999px;
       }
       
       input:checked+img {
           display: block;
       }
  

• HTML代码

    <div>

        <input type="radio" name='pic' checked id='pic1'>
        <img src="./pic1.jpg" alt="pic1">
        <input type="radio" name='pic' id='pic2'>
        <img src="./pic2.jpg" alt="pic2">

        <div>
            <label for="pic1">图片1</label>
            <label for="pic2">图片2</label>
        </div>

    </div>