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

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?

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 . ¹

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.

¹ _{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>

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.

<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.

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.

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>

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.