如何在 INPUT 标签上不使用 ID 属性的情况下使用 LABEL 标签的 FOR 属性

2024-01-02

下面代码中所示的问题有解决方案吗?首先在浏览器中打开代码,直入主题,无需在了解您要查找的内容之前查看所有代码。

<html>
 <head>
  <title>Input ID creates problems</title>
  <style type="text/css">
   #prologue, #summary { margin: 5em; }
  </style>
 </head>
 <body>
  <h1>Input ID creates a bug</h1>
  <p id="prologue">
   In this example, I make a list of checkboxes representing things which could appear in a book. If you want some in your book, you check them:
  </p>
  <form>
   <ul>
    <li>
     <input type="checkbox" id="prologue" />
     <label for="prologue">prologue</label>
    </li>
    <li>
     <input type="checkbox" id="chapter" />
     <label for="chapter">chapter</label>
    </li>
    <li>
     <input type="checkbox" id="summary" />
     <label for="summary">summary</label>
    </li>
    <li>
     <input type="checkbox" id="etc" />
     <label for="etc">etc</label>
     <label>
    </li>
   </ul>
  </form>
  <p id="summary">
   For each checkbox, I want to assign an ID so that clicking a label checks the corresponding checkbox. The problems occur when other elements in the page already use those IDs. In this case, a CSS declaration was made to add margins to the two paragraphs which IDs are "prologue" and "summary", but because of the IDs given to the checkboxes, the checkboxes named "prologue" and "summary" are also affected by this declaration. The following links simply call a javascript function which writes out the element whose id is <a href="javascript:alert(document.getElementById('prologue'));">prologue</a> and <a href="javascript:alert(document.getElementById('summary'));">summary</a>, respectively. In the first case (prologue), the script writes out [object HTMLParagraphElement], because the first element found with id "prologue" is a paragraph. But in the second case (summary), the script writes out [object HTMLInputElement] because the first element found with id "summary" is an input. In the case of another script, the consequences of this mix up could have been much more dramatic. Now try clicking on the label prologue in the list above. It does not check the checkbox as clicking on any other label. This is because it finds the paragraph whose ID is also "prologue" and tries to check that instead. By the way, if there were another checkbox whose id was "prologue", then clicking on the label would check the one which appears first in the code.
  </p>
  <p>
   An easy fix for this would be to chose other IDs for the checkboxes, but this doesn't apply if these IDs are given dynamically, by a php script for example.
   Another easy fix for this would be to write labels like this:
   <pre>
    &lt;label&gt;&lt;input type="checkbox" /&gt;prologue&lt;/label&gt;
   </pre>
   and not need to give an ID to the checkboxes. But this only works if the label and checkbox are next to each other.
  </p>
  <p>
   Well, that's the problem. I guess the ideal solution would be to link a label to a checkboxe using another mechanism (not using ID). I think the perfect way to do this would be to match a label to the input element whose NAME (not ID) is the same as the label's FOR attribute. What do you think?
  </p>
 </body>
</html>

已在这里解决:https://stackoverflow.com/a/8537641 https://stackoverflow.com/a/8537641就这样做

<label><input type="checkbox">Some text</label>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 INPUT 标签上不使用 ID 属性的情况下使用 LABEL 标签的 FOR 属性 的相关文章

  • 添加不同的标签以在 ggplot R 中的堆积条形图中显示总计?

    我的问题有点类似 如何添加文本标签以显示ggplot中堆叠比例条的每个条中的总数n https stackoverflow com questions 65201095 how to add text label to show total
  • 在 Bootstrap 按钮下拉列表标题/占位符文本中显示所选项目

    这个问题已经在 Stackoverflow 上被问过几次了 但是我仍然无法弄清楚它的真相 而且我的查询正在抛出更多的下拉菜单 所以我有两个下拉菜单和一个搜索 我想从下拉列表和 选定 中进行选择以替换下拉占位符文本 但我还需要记住 点击搜索后
  • 如何在CSS中嵌套多个计数器?

    我想用 CSS 嵌套两个不同的编号 以获得如下所示的自动编号 1 第 1 节 1 1 小节1 1 2 小节1 2 第 2 节 2 1 小节2 2 2 小节2 这是我实现这一目标的尝试
  • 如何在标签中制作文字自动换行

    我想在其中添加文字 a 标签适合固定的 div 但它会破坏 div 并且显示得很丑 CSS3 有一个属性 word wrap break word 看看MDN 自动换行文档 https developer mozilla org en CS
  • Chrome 不渲染
    标签,FF 渲染

    我有一个非常烦人的问题 我的网站有一个表单 可以在 Firefox 中运行 但不能在 IE 或 Chrome 中运行 它是用 WordPress 的 Gravity Forms 制作的 但这可能与该问题无关 因为另一个表单插件也出现了同样的
  • 关闭 Bootstrap 模式 onclick

    我使用 Bootstrap 模式让用户在将商品添加到购物车之前选择产品选项 我之前在这种情况下使用过它们 没有任何问题 但这个没有按预期关闭 当用户单击 添加到购物车 按钮时 会发生一些事情 我认为问题就在那里 首先 一些脚本检查某些字段是
  • 可编辑的 Div 插入位置

    我有一个可编辑的 div 我正在使用一个按钮将图像插入到该 div 中 现在 我只是在做 document getElementById elementid innerHTML 为了将图像添加到 div 的末尾 我想输入插入符号所在的图像
  • Bootstrap 4 行布局没有响应

    我正在使用 Bootstrap 4 在 MEAN 堆栈上为新闻文章布局创建一个 html 模板 但这应该不重要 对于这种总体布局的要求是 一篇 特色 文章位于其自己的列中 而其他 8 篇文章位于另一列中的两行中 当在较小的屏幕或移动设备上查
  • 将 html 源拆分为多个文件

    HTML 是否支持将源代码拆分为多个文件 我正在寻找 C 的等价物 include 或者也许是类似 C 的东西partial 可以采用源路径并在该位置注入文件内容的元素 如果之前有人问过这个问题 我们深表歉意 Google 和 SO 搜索没
  • 在占位符中添加 HTML

    我喜欢使用 HTML 占位符 因为它有助于向用户描述他们需要输入的内容类型 但是 有时您需要为用户提供更多信息 而不仅仅是简单的句子 基本上我希望能够在我的文本区域占位符中添加换行符 制表符等 我听说过使用特殊编码来做到这一点 并且已经使用
  • 从提交的表单中转义字符串中的字符

    每次发布帖子时 我都会得到转义字符 gt gt gt 我有一个多步骤表单 它将数据从一种表单传输到另一种表单 我将这些值与准备好的语句一起保存在数据库中 数据库中的值当前看起来像Paul s House 用户应该可以在字符串中使用单引号和双
  • javascript获取网页中选定文本的段落

    突出显示文本后 我想获取所选文本所在的段落 var select window content document getSelection 请问有什么指点吗 这实际上很难做到 因为你必须考虑六种情况 所选内容不在一个段落内 简单 整个选择都
  • 如何使链接悬停时的背景图像模糊?

    当您用鼠标光标悬停链接时 我想让我的背景图像模糊 5 像素 有什么简单的方法可以实现这一点吗 我有点纠结于类和 id 在这里 pic background url http www metalinjection net wp content
  • 如何创建环境变量来保护我的网站的 Google 地图 API 密钥(或任何其他秘密值)?

    我正在学习使用 Bootstrap 编写自己的网站 并使用 Google 地图 API 密钥和 Google Developers 的脚本轻松地将地图放置在我的页面上 理想情况下 我会有类似的东西 即我已经尝试过这个 Html PHP
  • html5 vs flash - 完整的比较图表在哪里? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 因此 自从史蒂夫 乔布斯说 Flash 很糟糕并暗示 HTML5 可以完成 Flash 可以做的所有事情
  • 输入元素可滚动并启用文本溢出省略号

    当我添加text overflow ellipsis对于输入元素 该元素是可滚动的 当我将光标放在元素上时 我可以左右滚动 就好像文本是全宽并且没有被截断一样 尽管后面没有文本 我该如何阻止这种行为 input width 180px te
  • 透明、无边框文本输入

    如何删除周围的边框
  • 创建响应式眼睛焦点图标

    我一直在尝试制作响应式彩色眼睛焦点图标 但到目前为止我所尝试的一切均不成功 我试图在某种程度上复制真眼的颜色 我使用边框 框阴影来获取颜色 但该部分没有缩放 也尝试过轮廓 但也失败了 那个甚至不是圆的 div 的高度当前是静态的 但我希望它
  • 只返回 $.ajax 传递的 JSON 数据的前 20 个结果?

    我有以下简单的 jquery 片段 document ready function ajax url myjson json dataType json success function json each json function al
  • 使用带有箭头的 MaterializeCSS 轮播 - 如何使用普通 javascript 进行初始化

    我正在尝试使用 MaterializeCSS 创建带有箭头的轮播 我正在尝试使用这个代码笔 https codepen io Paco Cervantes pen ZLxKpj取得有限的成功 我想使用普通的 javascript 而不是 j

随机推荐

  • 绑定 postgres-xl 协调器以仅侦听特定接口

    我试图将协调器绑定为仅侦听特定接口 在协调器的 postgresql conf 中指定时 listen addressses 选项似乎被忽略 协调器数据目录中还有另一个名为 postmaster opts 的文件 每次 pgxc ctl 连
  • 如何删除 tkinter 中的小部件? [复制]

    这个问题在这里已经有答案了 我需要删除一个小部件 例如 button1 Button root text start command self cc pack 如何制作另一个具有删除button1命令的小部件 或者甚至只是一个在调用时删除b
  • 设置中的“editor.insertSpaces”和“editor.tabSize”有什么区别?

    它们有何不同的解释 我只能看到 editor tabSize 的作用 即制表符占用的空格数 谢谢 从配置文件 Controls the rendering size of tabs in characters If set to auto
  • Android TableLayout 内的 ScrollView

    我希望 ScrollView TableLayout 与屏幕具有相同的高度 但为什么表只占据屏幕的一半 而 ScrollView 则按预期占据全屏 我尝试将表和行的高度更改为wrap content 但显示相同的结果 另外 将桌子的高度更改
  • 如何使用 Angular 实现多个视图以支持标题和侧边栏?

    我是第一次使用 AngularJS 我已经成功实现了一个ng view in my index html页面包含一个header html模板 所以看起来像下面这样 但现在我正在创建一个仪表板 dashboard html 所以 我还有一个
  • Google Vision API指定JSON文件

    我正在尝试使用 JSON 文件对 Google Vision API 进行身份验证 通常 我使用GOOGLE APPLICATION CREDENTIALS环境变量 指定 JSON 文件本身的路径 但是 我需要在应用程序本身中指定这一点并使
  • PyCharm:远程开发

    如何将 PyCharm 连接到远程服务器以进行远程开发 所有文件 代码和数据 都位于远程服务器上 开发 添加 编辑文件 将在远程服务器上进行 该程序将在远程服务器上运行 我希望 PyCharm 充当该远程系统的可视界面 类似终端 gt ss
  • Powershell 中的 vimdiff E97

    我无法获取vimdiff在 Windows 10 计算机上工作 我正在从 Powershell 运行 vim Powershell 还声明于 myvimrc作为我选择的外壳 set shell C WINDOWS system32 Wind
  • CodeIgniter 和 Javascript/Jquery 库

    正如标题所说 我试图弄清楚如何在 CI 上使用 javascript 和 jquery 库 遵循以下指令the docs http codeigniter com user guide libraries javascript html 我
  • Cassandra 非柜台系列

    我尝试执行以下 CQL 3 语句 CREATE TABLE summary id uuid client bigint campaign text unit bigint view counter PRIMARY KEY client ca
  • 调试 ASPNET WebAPI 项目时出现“线程被中止”错误

    我最近在我的开发机器上调试 VS 2012 更新 2 中的 WEBAPI 项目 C 时开始收到此错误 该应用程序托管在 IIS Express 中 在我的开发盒上本地运行 威胁已经被清除了 奇怪的是 这个错误只有在调试时才会发生 当调试器分
  • HTTP 状态 404 Eclipse Tomcat 7

    我在尝试运行我的应用程序时收到错误 404 Tomcat服务器 启动并同步 动态模块版本为2 5 以前我使用动态模块版本3 o 但它不起作用 我读到 更好的帖子之一是使用 2 5 所以我创建了新项目并且 仍然收到此 4044 错误 我认为这
  • Excel 互操作:使用 Task.Run 创建实例会导致异常 System.EntryPointNotFoundException

    这是我产生问题的最小示例 using System Runtime InteropServices using System Threading Tasks using Excel Microsoft Office Interop Exce
  • 无法在 iPhone 上使用阿拉伯语键盘搜索波斯语文本

    我最近为iPhone开发了一本书 并在这个应用程序中实现了搜索功能 但在真正的 iPhone 上测试该应用程序后 我想知道它无法找到所有搜索词 在我的 Mac 上使用波斯语键盘 例如 它无法找到包含 字符的单词 因为搜索词包含从 iPhon
  • 在react-native-video中播放youtube视频

    我如何在react native video上播放youtube视频 我不想在react native youtube或webview中播放视频 我检查并使用的另一个选项是 WebView 要使用它 请确保将组件放入带有 Flex 的视图中
  • 编码 UTF8 C# 过程

    我有一个处理 vbscript 并生成输出的应用程序 private static string processVB string command string arguments Process Proc new Process Proc
  • 神经网络的显着图(使用 Keras)

    我有一个在 Keras 中训练的完全连接的多层感知器 我向它提供一个 N 维特征向量 它会预测输入向量的 M 个类别中的一个 训练和预测运行良好 现在我想分析输入特征向量的哪一部分实际上负责特定的类 例如 假设有两个类A and B 和一个
  • 按字母顺序对内容进行排序

    因此 我在 AJAX 调用之后附加以下内容 并且此 AJAX 调用可能会发生多次 并返回多个数据项 我正在尝试使用 Tinysort http plugins jquery com project TinySort http plugins
  • 如何在 Angular 4 中禁用 ngbDatepicker 中的前一个日期?

    我想禁用所有先前 过去的日期ngbDatepicker 我用过ngbDatepicker 我的 HTML 是
  • 如何在 INPUT 标签上不使用 ID 属性的情况下使用 LABEL 标签的 FOR 属性

    下面代码中所示的问题有解决方案吗 首先在浏览器中打开代码 直入主题 无需在了解您要查找的内容之前查看所有代码 h1 Input ID creates a bug h1 p In this example I make a list of c