Html 如果输入标记上没有ID属性，如何使用标签标记的FOR属性
下面代码中说明的问题是否有解决方案？首先在浏览器中打开代码，直截了当地指出问题所在，不必在了解您要查找的内容之前查看所有代码Html 如果输入标记上没有ID属性，如何使用标签标记的FOR属性,html,input,label,for-loop,Html,Input,Label,For Loop,下面代码中说明的问题是否有解决方案？首先在浏览器中打开代码，直截了当地指出问题所在，不必在了解您要查找的内容之前查看所有代码 <html> <head> <title>Input ID creates problems</title> <style type="text/css"> #prologue, #summary { margin: 5em; } </style> </head>
<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>
<label><input type="checkbox" />prologue</label>
</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>
输入ID会产生问题
#序言#摘要{页边：5em；}
输入ID创建了一个bug
在本例中，我创建了一个复选框列表，这些复选框表示可能出现在书中的内容。如果您想在书中找到一些，请检查：
-
开场白
-
章
-
总结
-
等
对于每个复选框，我想分配一个ID，以便单击标签可以选中相应的复选框。当页面中的其他元素已经使用这些ID时，就会出现问题。在这种情况下，CSS声明是为了在ID为“序言”和“摘要”的两个段落中添加页边空白，但由于为复选框提供了ID，因此名为“序言”和“摘要”的复选框也受此声明的影响。下面的链接只是调用一个javascript函数，该函数写出id分别为和的元素。在第一种情况下（序言），脚本写出[object HTMLParagraphElement]，因为找到的第一个id为“序言”的元素是段落。但是在第二种情况下（summary），脚本写出[object HTMLInputElement]，因为找到的第一个id为“summary”的元素是一个输入。在另一个剧本中，这种混乱的后果可能会更加戏剧性。现在尝试单击上面列表中的标签序言。它不会在单击任何其他标签时选中复选框。这是因为它找到ID也是“序言”的段落，并尝试检查该段落。顺便说一下，如果还有另一个id为“序言”的复选框，那么单击标签将选中代码中首先出现的复选框。
解决这个问题的一个简单方法是为复选框选择其他ID，但如果这些ID是动态给定的（例如通过php脚本），则这不适用。
另一个简单的解决方法是这样写标签：
<ul>
<li>
<input type="checkbox" id="input_prologue" />
<label for="input_prologue">prologue</label>
</li>
<li>
<input type="checkbox" id="input_chapter" />
<label for="input_chapter">chapter</label>
</li>
<li>
<input type="checkbox" id="input_summary" />
<label for="input_summary">summary</label>
</li>
<li>
<input type="checkbox" id="input_etc" />
<label for="input_etc">etc</label>
</li>
</ul>
labelinput type=“checkbox”/prologue/label
并且不需要给复选框提供ID。但这仅在标签和复选框相邻时有效。
这就是问题所在。我想理想的解决方案是使用另一种机制（不使用ID）将标签链接到复选框。我认为最好的方法是将标签与输入元素相匹配，输入元素的名称（而不是ID）与标签的FOR属性相同。你怎么认为？
回答问题的其余部分：不，ID属性是标签的“for”属性将看到的唯一对象。您始终可以使用JavaScript onclick事件按名称获取输入并对其进行更改，但如果您只需解决ID问题，这似乎过于复杂，这将更有意义。在我看来，您可以做的最好的事情是重命名所有复选框，在其ID中添加一些前缀，例如
input<form>
<label for="login-validation-form-email">Email Address:</label>
<input type="text" class="login-validation-form-email" />
</form>
-
开场白
-
章
-
总结
-
等
通过这种方式，您将不会与页面上的其他ID发生任何冲突，单击标签将切换复选框，而无需任何特殊的javascript功能。编辑：回顾过去，我的解决方案远远不够理想。我建议您改为利用“隐式标签关联”，如以下答案所示： 我提出的不太理想的解决方案如下： 这个问题可以用一点javascript轻松解决。只需在页面的一个js文件中抛出以下代码，即可为
idforid标签标签类 <ul>
<li>
<input type="checkbox" id="input_prologue" />
<label for="input_prologue">prologue</label>
</li>
<li>
<input type="checkbox" id="input_chapter" />
<label for="input_chapter">chapter</label>
</li>
<li>
<input type="checkbox" id="input_summary" />
<label for="input_summary">summary</label>
</li>
<li>
<input type="checkbox" id="input_etc" />
<label for="input_etc">etc</label>
</li>
</ul>
$(function(){
$('body').on('click', 'label', function(e){
var labelFor = $( this ).attr('for');
if( !document.getElementById(labelFor) ){
e.preventDefault(); e.stopPropagation();
var input = $( this ).siblings('.'+labelFor);
if( input )
input[0].focus();
}
})
});
属性应该在页面上始终具有具有匹配ID的对应元素
希望这有帮助 这里已经解决了这个问题：
就这样做吧
一些文本
也许简单直接的解决方案是使用uniqueid（）php或其他编程语言替代函数。与公认的答案不同，我同意FantomX1提出的解决方案，为每个复选框生成一个随机id，并将此id用于与复选框关联的标签。
但我会使用uuid生成随机id（请参见）+1，以一石二石解决两个问题。仅供参考：for属性的数据类型为IDREF，它查找ID类型的值，ID类型的值必须是唯一的。这些是XML模式可用的遗留数据类型，因此我认为这意味着它们是SGML的常驻数据类型。当我为页面上的其他元素选择ID时，我无法知道它们将是什么，因此我无法确保它们不会重复。正如您所说，javascript解决方案过于复杂（有些人没有javascript）。为ID生成GUI。这只适用于