Bootstrap

前端 - 基础 表单标签 - label 标签

#  label 标签 其实不属于 表单标签名单经常和 表单标签 搭配使用。 

#  <label> 标签 为 input 元素 定义 标注( 标签 ) 

使用场景  

#  其实说白,<label> 标签就是为了方便用户体验的,举例说明 

      

        就是说,如上示,我们在进行选项的选择操作时( 比如,男,女 ) 

        我们一般是直接点击 那个 圆圈,选中就代表了,选的男还是女了,选男就点击男前面的圆圈

        选女就点击 女前面的圆圈; 

        但是呢,那个小圆圈就又有点小,不太方便操作,所以,就想着,要是直接点击男或女

        那就更方便了,下面的 未婚,离异,丧偶也是如此~!! 

        所以,就是方便用户体验的操作~!! 

#   <label> 标签用于绑定一个 表单元素,当点击<label> 标签内的文本时,浏览器就会自动将

     焦点(光标) 转到或者选择对应的表单元素上,用来增加用户体验~!!

语法规范  

<label   for="sex">男</label>

<input   type="radio"   name="sex"   id="sex" /> 

 这是牵扯两方面的事情 

     因为点击的是 label 标签 里的文字,但是受益的是 表单 

     所以  label 里 写了一个 for 属性 =   一个名字 ; 

     相对应的  input 表单 有一个 id 属性,也有一个名字;

     并且 要求 这两个名字 必须 保持一致,是相同的; 这样 两方面 就建立连接了,就对上暗号

      

     核心 : <label>  标签的 for 属性 应与 相关元素的   id  属性相同 。 ( 里面的值要一样 ) 

示例 : 

            

             for 里的值和 id 里的值 要保持一致,在上示中,我们写的是  text ,你也可以提写其它的,

             只要保持一致即可 ~!! 

             ===>>>

            

            点击 用户名,即可在 方框里 直接输入 ~!!! 

           

           ===>>>

           

            直接点击 “男”  这个文字,就勾选上了 ~!!! 

;