Schließen des HTML-<input> -Tag-Problems

72

Warum erhalten die HTML- <input>Tags nicht wie andere HTML-Tags ein schließendes Tag und was würde schief gehen, wenn wir das Eingabe-Tag schließen?

Ich habe versucht, Google zu verwenden, und ich habe den Standard gefunden, ein Eingabe-Tag wie dieses zu schreiben, <input type="text" name="name"> ohne es mit einem zu schließen </input>.

Ich persönlich hatte das Problem, als ich ein Eingabe-Tag für RadioSchaltflächen mit erstellte

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

Dies hat zwar ein Optionsfeld erstellt, aber das habe TextNodeich mit an das Optionsfeld angehängt

document.createTextNode("Radio Label");

funktioniert nicht. Es zeigt einfach das Optionsfeld mit Nein Radio Labelwie in diesem Fall.

Obwohl ich den vollständigen Code sehen kann:

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

Was ist eine Erklärung?

PS

Das Hauptproblem, das mir aufgefallen ist, ist das automatische Schließen des Eingabe-Tags, wie ich in der Frage erwähnt habe, während ich es verwende, var DOM_tag = document.createElement("input"); wodurch automatisch ein schließendes Tag erstellt wird. Was soll ich dagegen tun?

Nagri
quelle
Es gibt eine Reihe von Tags, die dies tun (img fällt auch ein), aber Sie können sie schließen, wenn Sie möchten. Sie können Tags auch "selbst schließen", indem Sie einen Schrägstrich vor die schließende Klammer setzen. dh <input type = "text" />. Außerdem schließen einige Browser Tags für Sie (überprüfen Sie Ihren Quellcode in IE vs FF).
Landjea
Wenn Ihr Markup gültiges XML sein soll, müssen Sie dieses Tag schließen. Wenn Sie möchten, dass es sich um gültiges HTML handelt, müssen Sie dieses Tag selbst schließen .
Asad Saeeduddin
@Asad XML enthält auch selbstschließende Tags. <input type="text" />ist vollkommen gültiges XML.
Shadow Wizard impft
1
@ShadowWizard Ich habe nie gesagt, dass dies nicht der Fall ist. Was ich damit sagen möchte, ist, dass das Eingabe-Tag nicht selbstschließend sein muss, um gültiges XML zu sein, obwohl es sich selbst schließen muss, um gültiges HTML zu sein.
Asad Saeeduddin
@Asad Saeeduddin: Es gibt keine "selbstschließenden Tags" in HTML. Ein Element hat entweder ein obligatorisches End-Tag, ein optionales End-Tag oder kann kein End-Tag haben . Leere Elemente sind letztere. (Diese Frage ist mehrere Jahre alt, aber immer noch.)
BoltClock

Antworten:

109

Dies sind leere Elemente. Dies bedeutet, dass sie keinen Text oder andere Elemente enthalten und daher kein schließendes Tag in HTML benötigen und auch nicht haben können . 1

Mit ihnen kann jedoch Folgendes <label>verbunden sein:

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

Optionsfelder können von Natur aus ohnehin keinen Text enthalten, daher wäre es für sie nicht sinnvoll, Text oder andere Elemente als Inhalt zu akzeptieren. Ein weiteres Problem mit einem Steuerelement, das Text als Eingabe akzeptiert: Sollte sein Textinhalt dann sein Wert oder seine Bezeichnung sein? Um Mehrdeutigkeiten zu vermeiden, haben wir ein <label>Element, das genau das tut, was es verspricht, und wir haben ein valueAttribut, um den Wert eines Eingabesteuerelements anzugeben.


1 XHTML ist anders; Nach XML-Regeln muss jedes Tag geöffnet und geschlossen werden. Dies erfolgt mit der Verknüpfungssyntax anstelle eines </input>Tags, obwohl letzteres ebenfalls akzeptabel ist:

<input id="my_id" type="radio" name="radio_name" />
<label for="my_id">Radio Label</label>
BoltClock
quelle
4
Nett! Und hier ist eine offizielle Referenz, obwohl ich keinen offiziellen Grund dafür finden konnte, warum solche Elemente existieren.
Shadow Wizard impft
@ BoltClock Ich versuche, was Sie gesagt haben, aber immer noch wegen </ input> -Tag. Das Label kann auch den Text für das Optionsfeld nicht anzeigen
Nagri
Ich verstehe deine Frage nicht wirklich. document.createElement()Erstellt Elemente, keine Tags. </input>Was hat das mit einem Label zu tun, auch wenn es irgendwie ein schließendes Tag erzeugt, wie Sie es sagen? Wenn Sie eine Beschriftung erstellen müssen, document.createElement('label')fügen Sie der Beschriftung Text hinzu.
BoltClock
Ja, ich habe das Gleiche getan und die gesamte Zeile wurde wie folgt angezeigt. <input id="my_id" type="radio" name="radio_name"> <label for="my_id">Radio Label</label> </input>Dies zeigt ein Optionsfeld ohne Text, aber wenn ich es entferne </input>, wird das Etikett "Radio Label" angezeigt.
Nagri
@Quasarthespacething - Hängt das Beschriftungselement neben dem Eingabeelement an, nicht darin.
Alohci
11

Der Ursprung liegt im Konzept der leeren Elemente in SGML, und die Idee war, dass einige Elemente als Platzhalter für Inhalte fungieren, die von einer externen Quelle oder von der Umgebung eingefügt werden.

Dies ist der Grund , warum imgund inputwurden beispielsweise in HTML als leer deklariert, genauer gesagt als EMPTYdeklarierter Inhalt (dh es ist kein Inhalt möglich, im Gegensatz zu Elementen, die nur beiläufig leeren Inhalt haben). Eine längere Erklärung finden Sie auf meiner Seite Leere Elemente in SGML, HTML, XML und XHTML .

Die Implikation ist, dass das Start-Tag für ein solches Element auch als Abschluss-Tag fungiert. Von Software, die SGML- oder HTML-Dokumente verarbeitet, wird erwartet, dass sie anhand der DTD (Document Type Definition) weiß, welche Tags diese Eigenschaft haben. In der Praxis sind solche Informationen in Webbrowsern integriert. Die Verwendung eines End-Tags wie </input>ist ungültig, aber Browser überspringen nur nicht erkannte oder falsche End-Tags.

In XML, also in XHTML, sieht es anders aus, da XML eine stark vereinfachte Variante von SGML ist, die einfach verarbeitet werden soll. Software , die Prozesse XML muss in der Lage sein , alle die Analyse zu tun , ohne DTD, also XML - Tags erfordert für alle Elemente zu schließen, wenn Sie können (und für die Kompatibilität, meist sollten ) verwenden spezielle Syntax wie <input />als Abkürzung für <input></input>. XHTML erlaubt jedoch immer noch keinen Inhalt zwischen den Tags.

Sie können also die Bezeichnung für ein Eingabeelement nicht innerhalb des Elements selbst angeben, da es keinen Inhalt haben kann. Sie können die Verwendung title, valueoder (in HTML5) placeholderAttribute zu assoziieren Texte mit ihm in verschiedenen Sinne, aber normal sichtbaren Inhalt haben , wie ein Etikett, das in einem anderen Element sein muss. Wie in anderen Antworten beschrieben, ist es ratsam, es in ein labelElement einzufügen und die Zuordnung zu idund forAttribute zu definieren.

Jukka K. Korpela
quelle
Können Sie einen Verweis auf das Literal geben EMPTY(einige formale Syntaxspezifikationen?)?
Peter Mortensen
In der XML-Spezifikation wird die Verwendung von LEER in Dokumenttypdefinitionen zu Beginn von Abschnitt
Jukka K. Korpela,
5

<input>ist ein leeres Tag, da es keinen Inhalt oder ein schließendes Tag enthält. Aus Gründen der Konformität können Sie das Ende des Tags folgendermaßen kennzeichnen:

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

Dies ist die XHTML-kompatible Methode zum Schließen eines Tags ohne Inhalt. Gleiches gilt für das <img>Tag.

Um ein Optionsfeld zu kennzeichnen , verwenden Sie wahrscheinlich am besten das <label>Tag, wie in der Antwort von BoltClock beschrieben.

Xyon
quelle
1

Sie können verwenden

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

um das Etikett neben dem Optionsfeld zu platzieren.

Asad Saeeduddin
quelle
0

Die Verwendung der Kombination createElement / createTextNode funktioniert am besten.

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

Das obige Snippet erzeugt:

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

Du kannst es versuchen:

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

könnte funktionieren, könnte nicht. (Es hat bei mir nicht funktioniert, aber ich kann nicht herausfinden, warum nicht ... ich dachte es würde.) Wenn das hilft, großartig. (Ich lerne immer noch JavaScript.)

Ansonsten bleiben Sie bei der Standardantwort der Verwendung von:

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

Das würde ich normalerweise tun.

Sean Tank Garvey
quelle