是否有解决下面代码中说明的问题的方法？首先在浏览器中打开代码直接到达关键点,而不必在知道您要查找的内容之前查看所有代码.
<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> …我一直在使用formtastic来在rails应用程序上生成HTML表单.然而,我的问题实际上与HTML有关.
今天我在formtastic生成复选框(:booleanformtastic lingo上的类型字段)的路上发现了一个奇怪的行为.
其余字段(非复选框)以这种方式生成:
<li>
<label for="my_textbox_field">My TextBox</label>
<input id="my_textbox_field" type="text" ... >
</li>
但是,复选框<label>完全包含在其标签内- 如下所示:
<li>
<label for="my_boolean_field">
<input id="my_boolean_field" type="checkbox" ... >
This is my boolean field
</label>
</li>
Formtastic哲学似乎是基于Learning to Love Forms的演示.实际上,在该演示文稿的幻灯片36上,建议使用该结构用于复选框.我想在演示文稿本身中,演示者解释了为什么这样做了,但它没有写在幻灯片上.
任何人都可以告诉我为什么在他们的<label>标签中包含复选框可能是一个好主意,而不是将它们放在外面,就像文本框一样？
在 Blazor 中，我可能经常在页面上呈现相同的组件两次。在这个组件中，我可能会<label for="foo">引用<input id="foo">同一组件中的 an 。
有没有一种方便的方法可以将每个组件的两个 ID 设置为不同的值，但在组件内设置相同的值？如果每个组件都有一个不同的参数，我们可以使用它，但是如果参数值之间没有差异怎么办？
我想我必须声明一个私有实例值，说private Guid ComponentInstanceId {get;} = Guid.NewGuid();并将其与<label for="foo-@ComponentInstanceId">...一起使用<input id="foo-@ComponentInstanceId">，但也许有更好的方法？