如何在 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 属性 的相关文章

  • Bootstrap 将图像与文本对齐

    我正在尝试使用引导程序将左侧的图像与文本对齐 并且当在移动设备上查看页面时 图像将居中于文本顶部 div class container div class row h1 About Me h1 div class col md 4 div
  • 如何使绘图的 xtick 标签成为简单的绘图?

    我不想用单词或数字作为 x 轴的刻度标签 而是想绘制一个简单的绘图 由直线和圆圈组成 作为每个 x 刻度的标签 这可能吗 如果是这样 在 matplotlib 中处理它的最佳方法是什么 我会删除刻度标签并将文本替换为patches http
  • 内联块元素和块元素之间的空间

    这两个 div 之间的空间是多少 我什至删除了 html 中的空白 div div div div http jsfiddle net 9thpuvwa http jsfiddle net 9thpuvwa 现在 如果第一个 div asd
  • 如何使用 CSS3 更改图像的颜色?

    这有效 a color hsla 0 100 50 0 2 这并不 img color hsla 0 100 50 0 2 有没有类似的东西img opacity 1 允许定义图像的 hsl 值 文本和图像是两个不同的东西 文本由浏览器根据
  • 设置 HTML 表格的最大显示行数

    具有动态生成的 HTML 表 行数未知 的 JSP 页面 在后端有属性 设置最大行数 例如 最大行数 15 如何将 HTML 表格的行数限制为max rows价值 表的其他部分应该可以通过垂直滚动访问 这意味着用户可以看到 15 行 如果向
  • 是否可以将图像放入输入类型=“复选框”?

    我想在我的 html 代码中的复选框和单选框的背景上放置一个图像 但它不起作用 但它可以在其他表单属性上工作 我找到了如何将图像提供给checkbox radio带有纯CSS的按钮 HTML
  • 响应式 CSS 圆圈

    Goal 响应式 CSS 圈子 具有相等半径的刻度 半径可以按百分比计算 半径可以通过媒体查询来控制 如果解决方案是javascript 我仍然需要模拟媒体查询触发器 我不需要媒体查询 但我确实希望能够在某些宽度下按百分比控制半径 medi
  • HTML、溢出:滚动和浮动

    我有一个 div 封装了许多无序列表 ul 我将每个 ul 设置为 float left 我还将包含它们的父 div 设置为 overflow x scroll 发生的情况是 ul 在到达页面边缘时会换行 而不是并排放置以利用父 div 的
  • 如何使用 Jspdf 将 Html 表数据导出为 PDF

    如何将 HTML 页面中的表格导出为 PDF 我已经完成了一些示例数据 但无法将 HTML 表格列表加载到 PDF 中 请任何人帮助我将表格加载到 PDF 中
  • 单击锚标记添加一个类

    假设我有以下 HTML a class active href section1 Link 1 a a href section2 Link 2 a 单击链接 2 时 我希望它接收活动类并从链接 1 本身中删除该类 这样它实际上会变成 a
  • 如何以编程方式将图片上传到 Facebook?

    好的 这是我的第一个问题 如何允许我网站上的访问者在他们的 Facebook 新闻源上分享我的照片 https webapps stackexchange com questions 10140 how do i allow visitor
  • 关闭引导选项卡中的按钮 - 不将

    这个问题Twitter Bootstrap3 选项卡的关闭按钮 https stackoverflow com questions 23211290 close button for twitter bootstrap3 tabs展示了如何
  • 当出现 2 位数字时删除椭圆形边框半径

    我试图设置一个完美的圆圈 并在必须显示 1 到 9 的数字时设法做到这一点 但当显示两位数字时 它会变得混乱 我似乎想不出办法 这是 HTML span 8 span span 9 span span 10 span The CSS spa
  • 我怎样才能将图像逐像素绘制到jframe

    我是java的初学者 直到今天我尝试做我自己认为的事情 所以这一天就在这里 我已经将图像的所有像素排列为 RGB 我想单击一个按钮并制作逐像素创建的类似动画的图像 这就是我所做的 但不起作用 import java awt BorderLa
  • WPF WebBrowser (3.5 SP1) 始终位于顶部 - 在 WPF 中显示 HTML 的其他建议

    我一直在拼命寻找一种在 WPF 应用程序中显示 HTML 的简单方法 有一些选项 1 使用WPF Web浏览器控件2 使用帧控制3 使用第三方控件 但是 我遇到了以下问题 1 WPF WebBrowser Control不是真正的WPF 它
  • 左侧为文字,右侧为图像

    我正在尝试使 div 中的文本位于左侧 图像位于右侧 我在 Stackoverflow 中发现了很多例子 其中图像在左 文本在右 然后我尝试切换它们 但无法使其工作 我发现堆栈溢出上的那个 https stackoverflow com q
  • 阻止 Android WebView 尝试在 loadData() 上加载/捕获 CSS 等资源

    背景 这似乎与许多其他问题重复 相信我 事实并非如此 我正在尝试将 html 数据加载到WebView https developer android com reference android webkit WebView html 能够
  • CSS 样式的段落,带有段落编号和旁注

    我想在网上发布一段带有段落编号和旁注的文本 我正在使用 哈克贝利 费恩历险记 作为测试 参见http jsfiddle net 29Mdt http jsfiddle net 29Mdt 我希望将段落编号放在左侧边距中 将旁注放在右侧边距中
  • 当父窗口关闭时关闭子窗口(弹出窗口)

    我有一个简单的示例页面 当您单击链接时 我正在使用弹出子弹出窗口进行处理 我一直在尝试各种卸载事件来在父窗口关闭时关闭子窗口 但似乎无法弄清楚我错过了与简单编码相关的内容 弹出窗口工作完美 但是关闭父窗口会使弹出窗口保持打开状态
  • 通过innerHTML输入时span不应用css样式

    我有 Angular 应用程序 作为它的一部分 我在 div 中显示查询结果 具有 JSONContainer 的 ID 我想突出显示结果中的特定查询 因此我使用了一个管道来搜索结果 并将文本中的 FIELD VALUE 替换为 span

随机推荐

  • 绑定 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