问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
多菲
    49955162

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

    <!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>
    javascripthtml5html
    阅读 7.5k
    5 个回答
    得票最新
    头像
    pandaroid
      36
      ✓ 已被采纳

      请看如下写法，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>
      头像
      crossgate9
        1391

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

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

        头像
        janmi
          611125

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

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

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

          头像
          Yangfan2016
            1801016

            前端小白

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

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

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

            水平有限，望指教

            头像
            爪哇大法师
              4612

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

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题