chiusura tag HTML input issue

Question

Mi chiedo perché i tag HTML <input> non ottengono un tag di chiusura come altri tag HTML e cosa potrebbe andare storto se chiudiamo il tag di input?

Ho provato a Google e ho trovato lo standard per scrivere un tag di input come questo <input type="text" name="name"> non chiudendolo con un </input>.

ho sentito personalmente il problema quando ho creato un tag input per Radio pulsanti utilizzando

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

Questo pulsante di scelta se creato, ma la TextNode ho allegata al pulsante radio con

document.createTextNode("Radio Label"); 

non lo fa lavoro. Mostra semplicemente il pulsante di opzione senza Radio Label come in questo caso. Anche se posso vedere il codice completo

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

Qualcuno può spiegare per favore?

PS: Il problema principale che si è verificato è la chiusura automatica del tag di input come menzionato nella domanda poiché sto usando var DOM_tag = document.createElement("input"); che crea automaticamente un tag di chiusura. cosa dovrei fare a riguardo?

Answer 1

Questi sono elementi nulli. Ciò significa che non sono progettati per contenere testo o altri elementi e, in quanto tali, non sono necessari - e infatti, non può avere - un tag di chiusura in HTML.

Tuttavia, essi possono avere un <label> ad essi associati:

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

Radio pulsanti per natura non possono contenere testo comunque, quindi non avrebbe senso per loro accettare il testo o altro elementi come contenuto. Un altro problema con un controllo che accetta il testo come input: il suo contenuto testuale dovrebbe essere il suo valore o la sua etichetta? Per evitare ambiguità, abbiamo un elemento <label> che fa esattamente ciò che dice sulla latta e abbiamo un attributo value per indicare un valore di controllo di input.

---

_{Valid è diverso; con le regole XML, ogni tag deve essere aperto e chiuso; questo viene fatto con la sintassi collegamento anziché una variabile </input>, anche se quest'ultimo è ugualmente accettabile:}

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

Answer 2

<input> è un tag vuoto, in quanto non è progettato per avere qualsiasi contenuto o un tag di chiusura. Per la conformità, è possibile indicare la fine del tag, utilizzando in questo modo:

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

che è il modo compatibile con XHTML per chiudere un tag, che non ha contenuto. Lo stesso vale per il tag <img>.

Per etichettare un pulsante di opzione, è preferibile utilizzare il tag <label> come descritto nella risposta di BoltClock.

Answer 3

È possibile utilizzare

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

di mettere l'etichetta accanto al pulsante di scelta.

Answer 4

L'origine è nel concetto di elemento vuoto in SGML e l'idea era che alcuni elementi fungano da segnaposto per il contenuto che verrà inserito da una fonte esterna o dall'ambiente. Questo è il motivo per cui img e input, ad esempio, sono stati dichiarati vuoti in HTML o, più esattamente, come aventi contenuto dichiarato EMPTY (ad esempio, nessun contenuto è possibile, come opposto agli elementi che hanno solo casualmente contenuti vuoti). Per una spiegazione più lunga, vedere la mia pagina Empty elements in SGML, HTML, XML, and XHTML.

L'implicazione è che il tag di inizio per tale elemento funge anche da tag di chiusura. Il software che elabora i documenti SGML o HMTL è tenuto a sapere dalla Document Type Definition (DTD) che i tag hanno questa proprietà. In pratica, tali informazioni sono incorporate nei browser web. L'utilizzo di un tag di chiusura come </input> non è valido, ma i browser ignorano il tag di fine non riconosciuto o spuria.

In XML, quindi in XHTML, le cose sono diverse, perché XML è una variante fortemente semplificata di SGML, progettata per essere elaborata in modo semplicistico. Il software che elabora XML deve essere in grado di eseguire tutte le analisi senza DTD, quindi XML richiede la chiusura di tag per tutti gli elementi, sebbene sia possibile (e, per compatibilità, principalmente ) utilizzare la sintassi speciale come <input /> come abbreviazione di <input></input>. Ma XHTML non consente ancora alcun contenuto tra i tag.

Quindi non è possibile specificare l'etichetta per un elemento di input all'interno dell'elemento stesso, in quanto non può contenere alcun contenuto. È possibile utilizzare gli attributi title, value o (in HTML5) placeholder per associare i testi ad esso, in sensi diversi, ma per avere un normale contenuto visibile come etichetta, è necessario trovarsi in un elemento diverso. Come descritto in altre risposte, è consigliabile inserirlo in un elemento label e definire l'associazione con gli attributi id e for.

Answer 5

L'utilizzo della combinazione createElement/createTextNode funziona meglio.

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

È possibile che questo frammento di produrrà:

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

Answer 6

si può provare:

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

potrebbe funzionare, non potrebbe. (Non ha funzionato per me, ma non riesco a capire PERCHÉ non .. Ho pensato che sarebbe.) Se questo aiuta, grande. (Sto ancora imparando Javascript.)

bastone, altrimenti con la risposta standard di utilizzo:

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

Questo è quello che normalmente farei. Saluti!