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 Radio
Schaltflächen mit erstellte
var DOM_tag = document.createElement("input");
Dies hat zwar ein Optionsfeld erstellt, aber das habe TextNode
ich mit an das Optionsfeld angehängt
document.createTextNode("Radio Label");
funktioniert nicht. Es zeigt einfach das Optionsfeld mit Nein 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>
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?
<input type="text" />
ist vollkommen gültiges XML.Antworten:
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 einvalue
Attribut, 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>
quelle
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.<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.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
img
undinput
wurden beispielsweise in HTML als leer deklariert, genauer gesagt alsEMPTY
deklarierter 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
,value
oder (in HTML5)placeholder
Attribute 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 einlabel
Element einzufügen und die Zuordnung zuid
undfor
Attribute zu definieren.quelle
EMPTY
(einige formale Syntaxspezifikationen?)?<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.quelle
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.
quelle
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>
quelle
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.
quelle