tipos - Problema de etiqueta de HTML<entrada> de cierre
que son las etiquetas del codigo html (6)
Me pregunto por qué las etiquetas HTML <input> no reciben una etiqueta de cierre como otras etiquetas HTML y qué podría salir mal si cerramos la etiqueta de entrada.
Intenté buscar en Google y encontré el estándar para escribir una etiqueta de entrada como esta <input type="text" name="name"> no cerrarla con </input> .
Personalmente, sentí el problema cuando creé una etiqueta de entrada para los botones de Radio usando
var DOM_tag = document.createElement("input");
Este aunque creó el botón de TextNode pero el TextNode que TextNode al botón de radio con
document.createTextNode("Radio Label");
No funciona. Simplemente muestra el botón de opción sin Radio Label como en este caso. Aunque puedo ver el código completo:
<input id="my_id" type="radio" name="radio_name">Radio Label</input>
¿Alguien puede explicar por favor?
PD
El problema principal que se me ocurrió es el cierre automático de la etiqueta de entrada como mencioné en la pregunta, ya que estoy usando var DOM_tag = document.createElement("input"); que crea automáticamente una etiqueta de cierre. ¿Qué debo hacer al respecto?
El origen está en el concepto de elemento vacío en SGML, y la idea era que algunos elementos actúen como marcadores de posición para el contenido que se insertará desde una fuente externa o por el entorno. Esta es la razón por la que img y input , por ejemplo, se declararon como vacíos en HTML o, más exactamente, como que tienen contenido declarado VACÍO (es decir, no hay contenido posible, como opuesto a los elementos que simplemente tienen contenido vacío). Para una explicación más larga, vea mi página Elementos vacíos en SGML, HTML, XML y XHTML .
La implicación es que la etiqueta de inicio para dicho elemento también actúa como etiqueta de cierre. Se espera que el software que procesa documentos SGML o HMTL conozca de la definición del tipo de documento (DTD) qué etiquetas tienen esta propiedad. En la práctica, dicha información está incorporada en los navegadores web. El uso de una etiqueta final como </input> no es válido, pero los navegadores simplemente omiten la etiqueta final no reconocida o espuria.
En XML, por lo tanto, en XHTML, las cosas son diferentes, porque XML es una variante fuertemente simplificada de SGML, que se procesa de manera simplista. El software que procesa XML debe poder realizar todo el análisis sintáctico sin DTD, por lo que XML requiere el cierre de etiquetas para todos los elementos, aunque usted puede (y, por compatibilidad, debería hacerlo principalmente) usar una sintaxis especial como <input /> como abreviación para <input></input> . Pero XHTML todavía no permite contenido entre las etiquetas.
Por lo tanto, no puede especificar la etiqueta de un elemento de entrada dentro del elemento en sí, ya que no puede contener ningún contenido. Puede usar el title , el value o (en HTML5) atributos de placeholder para asociar textos con él, en diferentes sentidos, pero para tener un contenido visible normal como etiqueta, debe estar en un elemento diferente. Como se describe en otras respuestas, es aconsejable colocarlo en un elemento de label y definir la asociación con id y for atributos.
Estos son elementos vacíos. Esto significa que no están diseñados para contener texto u otros elementos, y como tales no necesitan, y de hecho, no pueden tener , una etiqueta de cierre en HTML. 1
Sin embargo, pueden tener una <label> asociada a ellos:
<input id="my_id" type="radio" name="radio_name">
<label for="my_id">Radio Label</label>
Los botones de opción por naturaleza no pueden contener texto de todos modos, por lo que no tendría sentido que acepten texto u otros elementos como contenido. Otro problema con un control que acepta texto como entrada: ¿debería su contenido textual ser su valor o su etiqueta? Para evitar la ambigüedad, tenemos un elemento <label> que hace exactamente lo que dice en la lata, y tenemos un atributo de value para denotar el value de un control de entrada.
1 XHTML es diferente; mediante reglas XML, todas las etiquetas deben abrirse y cerrarse; esto se hace con la sintaxis de acceso directo en lugar de una etiqueta </input> , aunque esta última es igualmente aceptable:
<input id="my_id" type="radio" name="radio_name" />
<label for="my_id">Radio Label</label>
Puedes probar:
var label = document.createTextNode("Radio Label");
document.createElement("input").prop({type="text"});
document.write(input.append(label));
podría funcionar, quizás no. (No funcionó para mí, pero no puedo entender POR QUÉ no ... Pensé que sí). Si eso ayuda, genial. (Todavía estoy aprendiendo Javascript.)
De lo contrario, mantente con la respuesta estándar de usar:
<input id="my_id" type="radio" name="radio_name" />
<label for="my_id">Radio Label</label>
Eso es lo que normalmente haría. ¡Aclamaciones!
Puedes usar
var label = document.createTextNode("Radio Label");
DOM_tag.parentElement.insertBefore(label,DOM_tag);
poner la etiqueta al lado del botón de radio.
Usar la combinación createElement / createTextNode funciona mejor.
$(''#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''))
)
)
);
El fragmento de arriba producirá:
<div id=''list-consultant''>
<div class=''checkbox''>
<label><input type=''checkbox'' checked=''checked''/>Ron Jeremy</label>
</div>
</div>
<input> es una etiqueta vacía, ya que no está diseñada para tener ningún contenido o una etiqueta de cierre. Para el cumplimiento, puede indicar el final de la etiqueta utilizándola así:
<input type="text" value="blah" />
que es la forma compatible con XHTML para cerrar una etiqueta que no tiene contenido. Lo mismo ocurre con la etiqueta <img> .
Para etiquetar un botón de opción, probablemente sea mejor que use la <label> como lo describe la respuesta de BoltClock.