81

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

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

Radio当我使用为按钮创建输入标签时，我个人感觉到了这个问题

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

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

document.createTextNode("Radio Label");

不起作用。Radio Label在这种情况下，它只是显示带有 no 的单选按钮。

虽然我可以看到完整的代码：

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

什么是解释？

附言

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

4

6 回答 6

121

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

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

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

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

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

<input id="my_id" type="radio" name="radio_name" />
<label for="my_id">Radio Label</label>
于 2012-11-05T12:30:30.783 回答
16

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

这就是为什么imgand input，例如，在 HTML 中被声明为空，或者更准确地说，EMPTY声明为内容（即，没有内容是可能的，这与只是随便有空内容的元素相反）。有关详细说明，请参阅我的页面Empty elements in SGML、HTML、XML 和 XHTML。

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

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

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

于 2012-11-05T13:10:17.927 回答
7

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

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

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

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

于 2012-11-05T12:30:56.327 回答
0

您可以使用

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

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

于 2012-11-05T12:34:50.953 回答
0

使用 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>
于 2015-10-20T22:50:20.517 回答
-1

你可以试试：

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>

这就是我通常会做的。

于 2017-07-05T22:41:38.810 回答