2010-12-16 25 views
42

Tengo una tabla en una página que consta de casillas de verificación en las celdas de la izquierda y descripciones en las celdas de la derecha. La "descripción" contiene encabezados h4 y texto sin formato. Quiero hacer una descripción completa (todo dentro de <td></td>) una etiqueta.Etiquetas HTML dentro de <label>

Así que cada fila tiene el siguiente aspecto:

<tr><td><input type="checkbox" name="entiries[]" value="i1" id="i1"></td> 
<td><label for="i1"> 
<h4>Some stuff</h4>more stuff.. 
<h4>Some stuff</h4>more stuff.. 
</label> 
</td></tr> 

Esto no funciona, sin embargo, el texto no se comporta como una etiqueta y no se puede hacer clic. Estoy usando Firefox 3.6 para probarlo. Si elimino las etiquetas <h4>, comienza a funcionar, pero eso complica el formateo. ¿Hay algo sobre las etiquetas <h*> que impida que <label> funcione correctamente?

Respuesta

40

Los elementos de nivel de bloque (a los que pertenece h4) no están permitidos dentro de los elementos en línea y provocarán un comportamiento indefinido. Puede usar elementos span en su lugar.

+2

Los elementos de nivel de bloque no están permitidos en 'span' tampoco. – Kornel

+0

De hecho, eso resuelve el problema. Establecer el estilo de span para mostrar: block me permite hacer que se vea más o menos como un encabezado (por lo que la entrada de CSS para ese span es la misma que para h4 + display: block), y la funcionalidad de etiqueta también funciona. – SaltyNuts

+6

Creo que quiso decir "en lugar de h4s" en lugar de "en lugar de etiquetas" – Quentin

27

Solo inline elements (excepto otros elementos de la etiqueta) pueden aparecer dentro de los elementos de la etiqueta.

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text --> 

- http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1

No tiene sentido poner encabezados allí de todos modos.

+2

+1 por ese último bit. Los títulos no tienen sentido en las etiquetas. – You

+4

Por favor, no hablemos sobre lo que hace y lo que no tiene sentido. No tienes idea de cuál es el contexto de mi proyecto así que ¿por qué juzgarlo? – SaltyNuts

+8

No es un juicio sobre usted o su proyecto, se trata de la semántica de las etiquetas. Semánticamente, un elemento 'etiqueta' es como un encabezado para uno y solo un control. Entonces ya es un encabezado. Poner otro encabezado dentro es redundante. Además, los encabezados 'H *' pueden señalar muchas cosas, pero en una etiqueta solo se podría apuntar a una cosa, la misma a la que apunta la etiqueta. Es como usar un encabezado como el título de una imagen. No tiene sentido semánticamente. Sin embargo, en términos de la apariencia, podría tener sentido usar una etiqueta 'span' que sea visualmente similar a una etiqueta 'H *'. – brentonstrine

14

El elemento <label> en HTML es un elemento de nivel en línea y no puede contener elementos de nivel de bloque.

Esto es probablemente lo que está causando sus problemas. Alternativamente, puede colocar sus etiquetas dentro de <h4>:

<tr><td><input type="checkbox" name="entiries[]" value="i1" id="i1"></td> 
<td>< 
<h4><label for="i1">Some stuff</label></h4>more stuff.. 
<h4><label for="i1">Some stuff</label></h4>more stuff.. 
</label> 
</td></tr> 
+6

Usted sabe, nunca se me ocurrió que puede tener más de una etiqueta para una casilla de verificación determinada. ¡Gracias! – SaltyNuts

Cuestiones relacionadas