关闭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>

有人可以解释一下吗？

PS
我遇到的主要问题是输入标签的自动关闭,就像我在问题中提到的那样,我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规则,每个标签都必须打开和关闭; 这是使用快捷语法而不是</input>标记完成的,尽管后者同样可以接受:}

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

Answer 2

原点在于SGML中的空元素概念,其思想是某些元素充当将从外部源或环境插入的内容的占位符.这就是为什么img与input,例如,进行了(即没有任何内容可能是,作为相反只是随便具有空的内容元素)声明为空以HTML,或者更确切地,作为具有EMPTY声明的内容.有关更长的解释,请参阅我的页面SGML,HTML,XML和XHTML中的空元素.

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

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

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

Answer 3

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

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

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

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