关闭 HTML <input> 标签问题

Closing HTML <input> tag issue

提问by Nagri

I wonder why does the HTML <input>tags don't get a closing tag like other HTML tags and what would go wrong if we do close input tag ?

我想知道为什么 HTML<input>标签没有像其他 HTML 标签那样获得结束标签，如果我们关闭输入标签会出现什么问题？

I tried to Google and I found the standard to write a input tag like this <input type="text" name="name">not closing it with a </input>.

我试过谷歌，我找到了编写这样的输入标签的标准，<input type="text" name="name">而不是用</input>.

I personally felt the problem when I created a input tag for Radiobuttons using

当我Radio使用

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

This though created radio button but the TextNodeI appended to the radio button with

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

document.createTextNode("Radio Label");

does not work. It simply shows the radio button with no Radio Labelas in this case. Though I can see the complete code:

不起作用。它只是显示单选按钮，Radio Label在这种情况下没有。虽然我可以看到完整的代码：

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

Can anyone explain please ?

P.S.
The main problem that occured to me is the automatically closing of input tag as I mentioned in the question as I am using var DOM_tag = document.createElement("input");which automatically creates a closing tag. What should I do about that ?

谁能解释一下？

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

回答by BoltClock

These are void elements. This means they aren't designed to contain text or other elements, and as such do not need — and in fact, cannot have— a closing tag in HTML.¹

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

However, they can have a <label>associated with them:

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

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

Radio buttons by nature can't contain text anyway, so it wouldn't make sense for them to accept text or other elements as content. Another issue with a control that does accept text as input: should its textual content then be its value, or its label? To avoid ambiguity we have a <label>element that does exactly what it says on the tin, and we have a valueattribute for denoting an input control's value.

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

---

---

¹_{XHTML is different; by XML rules, every tag must be opened and closed; this is done with the shortcut syntax instead of a </input>tag, although the latter is equally acceptable:}

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

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

回答by Jukka K. Korpela

The origin is in the empty element concept in SGML, and the idea was that some elements act as placeholders for content that will be inserted from an external source or by the environment. This is why imgand input, for example, were declared as empty in HTML, or, more exactly, as having EMPTY declared content (i.e. no content is possibly, as opposite to elements that just casually has empty content). For a longer explanation, see my page Empty elements in SGML, HTML, XML, and XHTML.

起源于 SGML 中的空元素概念，其想法是一些元素充当将从外部源或环境插入的内容的占位符。这就是为什么img和input，例如，在 HTML 中被声明为空，或者更确切地说，声明为 EMPTY 的内容（即可能没有内容，与只是随意具有空内容的元素相反）。有关更长的解释，请参阅我的页面SGML、HTML、XML 和 XHTML 中的 Empty 元素。

The implication is that the start tag for such an element acts as closing tag, too. Software that processes SGML or HTML documents is expected to know from the Document Type Definition (DTD) which tags have this property. In practice, such information is built-in in web browsers. Using an end tag like </input>is invalid, but browsers just skip unrecognized or spurious end tag.

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

In XML, hence in XHTML, things are different, because XML is a strongly simplified variant of SGML, intended to be processed simplistically. Software that processes XML must be able to do all the parsing without any DTD, so XML requires closing tags for all elements, though you can (and, for compatibility, mostly should) use special syntax like <input />as shorthand for <input></input>. But XHTML still allows no content between the tags.

在 XML 中，因此在 XHTML 中，情况有所不同，因为 XML 是 SGML 的一个高度简化的变体，旨在进行简单处理。软件过程XML必须能够完成所有的分析没有任何DTD，所以XML需要关闭标签的所有元素，但你可以（而且，为了兼容，大多应该）使用特殊的语法类似<input />的简写<input></input>。但是 XHTML 仍然允许标签之间没有内容。

So you cannot specify the label for an input element inside the element itself, as it cannot have any content. You can use the title, value, or (in HTML5) placeholderattributes to associate texts with it, in different senses, but to have normal visible content as a label, it needs to be in a different element. As described in other answers, it is advisable to put it in a labelelement and define the association with idand forattributes.

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

回答by Xyon

<input>is an empty tag, in that it's not designed to have any content or a closing tag. For compliance, you can signify the end of the tag by using it like this:

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

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

which is the XHTML compliant way to close a tag which has no content. The same goes for the <img>tag.

这是关闭没有内容的标签的 XHTML 兼容方式。这同样适用于该<img>标签。

To label a radio button, you're probably best off using the <label>tag as BoltClock's answer describes.

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

回答by Asad Saeeduddin

You can use

您可以使用

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

to put the label next to the radio button.

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

回答by Richie

Using the createElement/createTextNode combination works best.

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

The above snippet will produce:

上面的代码片段将产生：

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

回答by Sean Tank Garvey

You can try:

你可以试试：

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

might work, might not. (It didn't work for me, but I can't figure out WHY not.. I thought it would.) if that helps, great. (I'm still learning Javascript.)

可能有效，也可能无效。（它对我不起作用，但我不知道为什么不......我认为它会。）如果这有帮助，那就太好了。（我还在学习 Javascript。）

Otherwise stick with the standard answer of using:

否则坚持使用标准答案：

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

That is what I normally would do. Cheers!

这就是我通常会做的。干杯!