Schließen HTML-Eingabe Tag Problem

Question

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

Ich habe versucht, Google und ich fand den Standard, um ein Eingabe-Tag wie diese <input type="text" name="name"> nicht mit einem </input> zu schließen.

fühlte ich mich persönlich das Problem, wenn ich einen Input-Tag für Radio Tasten erstellt mit

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

Dies obwohl erstellt Radiobutton aber die TextNode ich mit

auf das Optionsfeld angehängt

document.createTextNode("Radio Label"); 

nicht Arbeit. Es zeigt einfach den Radioknopf ohne Radio Label wie in diesem Fall. Obwohl ich den vollständigen Code

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

Kann jemand erklären, sehen Sie?

PS: Das Hauptproblem, das mir aufgefallen ist, ist das automatische Schließen der Eingabe Tag, wie ich in der Frage erwähnt, wie ich var DOM_tag = document.createElement("input"); verwende, die automatisch ein schließendes Tag erstellt. Was soll ich dagegen tun?

Answer 1

Dies sind ungültige Elemente. Dies bedeutet, dass sie nicht dafür ausgelegt sind, Text oder andere Elemente zu enthalten, und als solche nicht benötigen - und in der Tat kann - ein schließendes Tag in HTML nicht haben.

Sie können jedoch ein <label> mit ihnen verbunden haben:

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

Radiobuttons von der Natur können keinen Text enthalten, wie auch immer, so wäre es nicht sinnvoll, für sie Text oder andere akzeptieren Elemente als Inhalt. Ein weiteres Problem mit einem Steuerelement, das Text als Eingabe akzeptiert: sollte sein Textinhalt dann sein Wert oder sein Label sein? Um Mehrdeutigkeiten zu vermeiden, haben wir ein <label> Element, das genau das tut, was es auf der Dose steht, und wir haben ein value Attribut für die Bezeichnung eines Eingabesteuerwertes.

---

_{XHTML unterscheidet; Nach XML-Regeln muss jedes Tag geöffnet und geschlossen werden. Dies wird mit der Abkürzung Syntax anstelle einen </input> Tag durchgeführt, obwohl letztere gleichermaßen akzeptabel ist:}

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

Answer 2

<input> leerer Tag ist, dass es keinen Inhalt oder einen schließenden Tag hat gestaltet. Für die Einhaltung, können Sie das Ende des Tags bedeuten, indem sie es wie folgt aus:

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

die die XHTML-konform Art und Weise ist ein Tag zu schließen, die keinen Inhalt hat. Das gleiche gilt für den Tag.

Um ein Optionsfeld zu beschriften, verwenden Sie am besten das <label>-Tag, wie BoltClocks Antwort beschreibt.

Answer 3

können Sie

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

verwenden das Etikett neben dem Optionsfeld zu setzen.

Answer 4

Der Ursprung ist in dem leeren Element-Konzept in SGML, und die Idee war, dass einige Elemente als Platzhalter für Inhalte dienen, die von einer externen Quelle oder von der Umgebung eingefügt werden. Dies ist der Grund, warum beispielsweise img und input in HTML als leer deklariert wurden, oder, genauer gesagt, als EMPTY deklarierter Inhalt (d. H. Kein Inhalt ist möglicherweise, im Gegensatz zu Elementen, die nur beiläufig leeren Inhalt haben). Für eine längere Erklärung, siehe meine Seite Empty elements in SGML, HTML, XML, and XHTML.

Die Implikation ist, dass das Start-Tag für ein solches Element auch als schließendes Tag fungiert. Von Software, die SGML- oder HMTL-Dokumente verarbeitet, wird erwartet, dass sie aus der Dokumenttypdefinition (DTD) 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 einfach unerkanntes oder falsches End-Tag.

In XML, also in XHTML, sind die Dinge anders, denn XML ist eine stark vereinfachte Variante von SGML, die einfach zu verarbeiten ist. Software, die XML verarbeitet, muss in der Lage sein, das Parsing ohne DTD durchzuführen. Daher benötigt XML abschließende Tags für alle Elemente. Sie können jedoch (und aus Kompatibilitätsgründen sollte <input /> als Kurzform für <input></input> verwenden). Aber XHTML erlaubt weiterhin keinen Inhalt zwischen den Tags.

Sie können also die Beschriftung für ein Eingabeelement nicht 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 in verschiedenen Bedeutungen damit zu verknüpfen, aber um normalen sichtbaren Inhalt als ein Etikett zu haben, muss es sich in einem anderen Element befinden. Wie in anderen Antworten beschrieben, ist es ratsam, es in ein label Element zu setzen und die Assoziation mit den Attributen id und for zu definieren.

Answer 5

Die 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 wird über Schnipsel produzieren:

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

Answer 6

Sie können versuchen:

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

funktionieren könnte, vielleicht nicht. (Es hat nicht für mich funktioniert, aber ich kann nicht herausfinden, WARUM nicht .. Ich dachte, es würde.) Wenn das hilft, großartig. (Ich bin immer noch Javascript zu lernen.)

Ansonsten hält mit der Standardantwort der Verwendung:

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

Das ist, was ich normalerweise tun würde. Prost!