关闭 HTML <input> 标签问题

Question

为什么 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");，它会自动创建一个关闭标签。我该怎么办？

Answer 1

这些是无效元素。这意味着它们不是为包含文本或其他元素而设计的，因此不需要——事实上，不能有——HTML 中的结束标记。¹

但是，它们可以有一个 <label> 与之关联：

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

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

---

¹_{XHTML 不同；根据 XML 规则，每个标签都必须打开和关闭；这是使用快捷语法而不是 &lt;/input&gt; 标记完成的，尽管后者同样可以接受：}

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

Answer 2

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

这就是为什么 img 和 input 在 HTML 中被声明为空的原因，或者更准确地说，声明为具有 EMPTY 声明的内容（即，没有内容是可能的，与只是随便有空的内容）。更详细的解释见我的页面Empty elements in SGML, HTML, XML, and XHTML。

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

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

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

Answer 3

<input> 是一个空标签，因为它没有设计为包含任何内容或结束标签。为了合规，您可以像这样使用它来表示标签的结束：

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

这是关闭没有内容的标签的 XHTML 兼容方式。 <img> 标签也是如此。

要标记单选按钮，最好使用<label> 标记，如BoltClock's answer 所述。

Answer 4

你可以使用

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

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

Answer 5

使用 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'))
        )
    )
);

上面的sn-p会产生：

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

Answer 6

你可以试试：

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>

这是我通常会做的。