关闭HTML <input>标记问题

为什么HTML<input>标签没有像其他HTML标签那样获得结束标签，如果我们确实关闭了输入标签，怎么办？

我尝试使用Google，但发现写这样的输入标签的标准没有用来将其<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"); 它会自动创建一个关闭标签。我该怎么办？

这些是无效元素。这意味着它们并非旨在包含文本或其他元素，因此不需要-实际上也不能包含HTML中的结束标记。^1个

但是，它们可以<label>与它们关联：

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

本质上，单选按钮无论如何都不能包含文本，因此单选按钮接受文本或其他元素作为内容是没有意义的。确实接受文本作为输入的控件的另一个问题：那么文本内容应该是它的值还是它的标签？为避免含糊不清，我们有一个<label>元素可以完全按照其在锡盒上所说的进行操作，并且我们有一个value属性来表示输入控件的值。

¹ _{XHTML是不同的；根据XML规则，每个标签都必须打开和关闭；这是通过快捷方式语法而不是</input>标签完成的，尽管后者同样可以接受：}

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

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

这就是为什么imgandinput例如在HTML中被声明为空，或更确切地说，在已EMPTY声明内容的情况下被声明为空（即，没有内容是可能的，与只是随便具有空内容的元素相反）。有关详细说明，请参见我的页面SGML，HTML，XML和XHTML中的Empty元素。

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

在XML中，因此在XHTML中，情况有所不同，因为XML是SGML的简化版本，旨在简单地进行处理。处理XML的软件必须能够在没有任何DTD的情况下进行所有解析，因此XML要求关闭所有元素的标记，尽管您可以（并且出于兼容性的考虑，多数情况下也应使用）的特殊语法（例如<input />的简写）<input></input>。但是XHTML仍然不允许标记之间包含任何内容。

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

<input>是一个空标签，因为它没有任何内容或结束标签。为了符合规定，您可以通过如下方式使用标签来表示标签的结尾：

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

这是XHTML兼容的方法，用于关闭不包含任何内容的标签。这同样适用于该<img>标签。

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

您可以使用

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

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

最好使用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>

那就是我通常会做的。