it-swarm.com.de

Schließen des HTML-Tags <input> -Tags

Ich frage mich, warum die HTML <input>-Tags nicht wie andere HTML-Tags ein schließendes Tag erhalten, und was würde schief gehen, wenn wir das input-Tag schließen.

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

Ich persönlich habe das Problem gespürt, als ich ein Eingabe-Tag für Radio-Schaltflächen mit erstellt habe

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

Dieser erstellte Radioknopf hat aber die TextNode an den Radioknopf angehängt 

document.createTextNode("Radio Label");

funktioniert nicht. Es zeigt einfach das Optionsfeld ohne Radio Label wie in diesem Fall . Obwohl ich den vollständigen Code sehen kann:

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

Kann mir jemand bitte erklären?

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

54
Nagri

Dies sind leere Elemente. Dies bedeutet, dass sie keinen Text oder andere Elemente enthalten und als solche kein schließendes Tag in HTML benötigen - und in der Tat kann es nicht haben.1

Sie können jedoch einen <label> haben:

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

Optionsfelder dürfen von Natur aus keinen Text enthalten, daher ist es 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 value -Attribut, um den Wert eines Eingabesteuerelements anzugeben.


1XHTML ist anders; Nach XML-Regeln muss jedes Tag geöffnet und geschlossen werden. Dies geschieht mit der Shortcut-Syntax 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>
85
BoltClock

Der Ursprung befindet sich im leeren Elementkonzept in SGML, und die Idee war, dass einige Elemente als Platzhalter für Inhalt fungieren, der aus einer externen Quelle oder von der Umgebung eingefügt wird. Deshalb wurden zum Beispiel img und input in HTML als leer deklariert oder genauer als mit EMPTY deklarierter Inhalt (d. H. Kein Inhalt ist möglich, im Gegensatz zu Elementen, die nur gelegentlich leeren Inhalt haben). Eine ausführlichere Erklärung finden Sie unter Meine Seite Leere Elemente in SGML, HTML, XML und XHTML .

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

In XML, also in XHTML, sieht die Sache anders aus, weil XML eine stark vereinfachte Variante von SGML ist, die einfach zu verarbeiten ist. Software, die XML verarbeitet, muss in der Lage sein, die Analyse ohne DTD durchzuführen. XML erfordert daher das Schließen von Tags für alle Elemente. Sie können jedoch (und aus Kompatibilitätsgründen meistens sollte) eine spezielle Syntax wie <input /> als Kurzform für <input></input> verwenden. . XHTML erlaubt jedoch immer noch keinen Inhalt zwischen den Tags.

Sie können also keine Bezeichnung für ein Eingabeelement innerhalb des Elements selbst angeben, da es keinen Inhalt haben kann. Sie können die Attribute title, value oder (in HTML5) placeholder verwenden, um Texte auf unterschiedliche Weise mit diesem zu verknüpfen. Damit normaler sichtbarer Inhalt als Beschriftung verwendet werden kann, muss er sich in einem anderen Element befinden. Wie in anderen Antworten beschrieben, ist es ratsam, es in ein label-Element zu legen und die Zuordnung zu den id- und for-Attributen zu definieren.

6

<input> ist ein leeres Tag, da es keinen Inhalt oder ein schließendes Tag enthält. Für die Konformität können Sie das Ende des Tags angeben, indem Sie es wie folgt verwenden:

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

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

Um ein Optionsfeld zu beschriften, sollten Sie wahrscheinlich den <label>-Tag verwenden, wie es die Antwort von BoltClock beschreibt.

3
Xyon

Sie können verwenden 

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

um das Etikett neben das Optionsfeld zu setzen.

0
Asad Saeeduddin

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 Folgendes:

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

Du kannst es versuchen:

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

könnte funktionieren, vielleicht nicht. (Es hat für mich nicht funktioniert, aber ich kann nicht herausfinden, warum nicht ... ich dachte, es würde es tun.) (Ich lerne immer noch Javascript.)

Ansonsten bleib bei der Standardantwort:

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

Das würde ich normalerweise tun. Prost!

0