Question

我想知道为什么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>

有人可以解释一下吗？

的 P.S。
发生在我身上的主要问题是我在问题中提到的输入标记的自动关闭，因为我正在使用var DOM_tag = document.createElement("input");自动创建结束标记。我该怎么办？

Answer 1

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

但是，他们可以与<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声明的内容（即没有内容可能，因为与偶然有的元素相反）空的内容）。有关详细说明，请参阅我的页面Empty elements in SGML, HTML, XML, and XHTML。

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

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

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

Answer 3

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

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

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

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

Answer 4

您可以使用

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

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

Answer 5

使用createElement / createTextNode组合效果最佳。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="yuvallevy.allyouneedapp" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

以上代码段将产生：

$('#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'))
        )
    )
);

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>

这就是我通常会做的事情。干杯！

关闭HTML <input />标记问题

6 个答案: