phpstudy集成环境

 首页 > JavaScript 的html标签 <label for=""> 怎么用?

JavaScript 的html标签 <label for=""> 怎么用?

我学这个,做个了实验,怎么不管用?
我点了"点我试试",没有发生任何事,怎么改?

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 实验-14</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <style>

        .a
        {
            width: 200px ;
            height: 200px ;  
            background-color:#999999;         
        }


    </style>
</head>

<body>

    <div class="a" id="one"></div>

    <div class="a" id="two"></div>

    <label for="one">点我试试!!</label>

    <script>

        $("#one").on("mouseenter",fff)
        $("#one").on("mouseleave",ggg)


        function fff(){
            $("#two").css("background-color","red");
        }


        function ggg(){
            $("#two").css("background-color","#999999");
        }

    </script>

</body>
</html>

label 标签为 input 定义的标记，其本身没有实际的意义，不会向用户显示任何效果。一般是配合表单使用

<label for="female">Female</label>
<input type="radio" name="sex" id="female" />

当用户点击 label 的文字时，浏览器就会自动将焦点转到和标签相关的表单控件上。 label 的 id 与相关元素的 id 属性相同。

请看如下写法，for 的目标是一个 input 的 id ：

<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">

或一个 select 的 id ：

<label for="pandaroid-select">Select: </label>
<select class="form-control" id="pandaroid-select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

for 也可以用于 radio 、 checkbox 等，写法略有不同，如：

<label>
    <input type="checkbox"> Check me out
</label>

<label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
    Option one
</label>

具体来说，您的代码可以这样改(注意其中 id 为 one 的部分)：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 实验-14</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <style>

        .a
        {
            width: 200px ;
            height: 200px ;  
            background-color:#999999;         
        }


    </style>
</head>

<body>

    <input class="a" id="one" type="text"></input>

    <div class="a" id="two"></div>

    <label for="one">点我试试!!</label>

    <script>

        $("#one").on("mouseenter",fff)
        $("#one").on("mouseleave",ggg)


        function fff(){
            $("#two").css("background-color","red");
        }


        function ggg(){
            $("#two").css("background-color","#999999");
        }

    </script>

</body>
</html>

前端小白

个人见解，如有不对，忘您指正

  1. label 里的那个for属性 是指向input 等表单里的元素，方便 输入框获取焦点
    2.label的for属性的值与 要指向input的id属性一致，就像这样

<label for="one"> </label>
<input type="text" id="one" />
3.你现在的js代码里，就可以用$("#one") 获取到 input了。

水平有限，望指教

div没有长宽，给个大小就能看到结果

label标签就HTML语义来说，应当是input, select, textarea的标签。
因此，for=""中填的应当是相关的input, select, textarea的id。
从实际效果来看，如果for=""填写正确，点击label能够自动聚焦在相关的input, select或textarea上。

尤其在checkbox和radio box上，无论桌面端和移动端都能够有效的提高用户体验。
事实上，如果注意一些大型网站，这些细节都没有得到足够的重视。

【热门文章】
【热门文章】