关闭 HTML < input > 标记问题

为什么 HTML <input>标签不能像其他 HTML 标签一样得到一个结束标签，如果我们关闭输入标签会出什么问题呢？

我试图谷歌和我发现的标准写一个输入标签像这样的 <input type="text" name="name">不关闭它与 </input>。

当我使用以下命令为 Radio按钮创建输入标记时，我个人感觉到了问题

var DOM_tag = document.createElement("input");

这虽然创建了一个单选按钮，但是我附加到单选按钮的 TextNode

document.createTextNode("Radio Label");

不工作。它只是显示单选按钮没有 Radio Label在这种情况下。

虽然我能看到完整的代码:

<input id="my_id" type="radio" name="radio_name">Radio Label</input>

什么是解释？

附言。

我遇到的主要问题是自动关闭输入标记，正如我在问题中提到的，因为我使用的是自动创建关闭标记的 var DOM_tag = document.createElement("input");。我该怎么办？

111210 次浏览
小开
最佳答案

这些是空元素。这意味着它们不包含文本或其他元素，因此不需要ーー实际上也不需要ーー HTML1中的结束标记 不可能

然而，它们应该有一个 <label>相关联:

<input id="my_id" type="radio" name="radio_name">
<label for="my_id">Radio Label</label>

无论如何，单选按钮本质上不能包含文本，因此它们接受文本或其他元素作为内容是没有意义的。接受文本作为输入的控件的另一个问题是: 它的文本内容是它的值还是它的标签？为了避免模棱两可，我们有一个 <label>元素，它完全按照锡上说的那样做，我们还有一个 value属性来表示输入控件的值。

1 < sub > XHTML 是不同的; 根据 XML 规则，每个标记都必须打开和关闭; 这是使用快捷语法而不是 </input>标记完成的，尽管后者同样可以接受:

<input id="my_id" type="radio" name="radio_name" />
<label for="my_id">Radio Label</label>
小开

<input>是一个空标记，因为它的设计不包含任何内容或结束标记。为了符合要求，您可以像下面这样使用标记来表示标记的结束:

<input type="text" value="blah" />

这是一种符合 XHTML 的方式来关闭一个没有内容的标记。<img>标签也是如此。

要标记单选按钮，最好使用 BoltClock 的回答所描述的 <label>标记。

小开

你可以用

var label = document.createTextNode("Radio Label");
DOM_tag.parentElement.insertBefore(label,DOM_tag);

把标签放在单选按钮旁边。

小开

起源于 SGML 中的空元素概念，其思想是某些元素充当将从外部源或环境插入的内容的占位符。

这就是为什么例如 img和 input在 HTML 中被声明为空，或者更确切地说，被声明为具有 EMPTY声明的内容(也就是说，没有内容是可能的，因为相反的元素只是偶尔有空的内容)。有关详细说明，请参阅我的页面 SGML、 HTML、 XML 和 XHTML 中的空元素。

这意味着这种元素的开始标记也充当结束标记。处理 SGML 或 HTML 文档的软件需要从文档类型定义(DocumentTypeDefinition，DTD)中知道哪些标记具有此属性。实际上，这些信息是内置在网络浏览器中的。使用像 </input>这样的结束标记是无效的，但浏览器只是跳过无法识别的或伪造的结束标记。

在 XML 中，因此在 XHTML 中，情况是不同的，因为 XML 是 SGML 的一个强烈简化的变体，旨在简化处理。处理 XML 的软件必须能够在没有任何 DTD 的情况下完成所有的解析，所以 XML 需要所有元素的结束标记，尽管您可以(并且为了兼容性，主要是 应该)使用特殊语法(如 <input />)作为 <input></input>的简写。但是 XHTML 仍然不允许标记之间的内容。

因此，不能为元素本身内的输入元素指定标签，因为它不能包含任何内容。您可以使用 title、 value或(在 HTML5中) placeholder属性将文本关联到它，在不同的意义上，但是要将普通的可见内容作为标签，它需要位于不同的元素中。正如在其他答案中所描述的，最好将其放在 label元素中，并定义与 id和 for属性的关联。

小开

使用 createElement/createTextNode 组合效果最好。

$('#list-consultant').append(
$(document.createElement('div')).addClass('checkbox').append(
$(document.createElement('label')).append(
$(document.createElement('input')).prop({
type: 'checkbox',
checked: 'checked'
}),
$(document.createTextNode('Ron Jeremy'))
)
)
);

上面的代码片段将产生:

<div id='list-consultant'>
<div class='checkbox'>
<label><input type='checkbox' checked='checked'/>Ron Jeremy</label>
</div>
</div>
小开

你可以试试:

var label = document.createTextNode("Radio Label");
document.createElement("input").prop({type="text"});
document.write(input.append(label));

可能有用，也可能没用。(这对我来说不起作用，但我不能算出 为什么不... 我以为它会。)如果有帮助的话，很好。(我还在学习 JavaScript。)

否则，坚持使用标准答案:

<input id="my_id" type="radio" name="radio_name" />
<label for="my_id">Radio Label</label>

这是我通常会做的。


提交答案