HTML - Forma correcta de codificar una casilla de verificación con una etiqueta

Question

He estado usando formtastic para generar formularios HTML en aplicaciones de rieles. Mi pregunta, sin embargo, está realmente relacionada con HTML.

Hoy he encontrado un comportamiento extraño en el camino formtastic genera casillas de verificación (campos de tipo :boolean en formtastic lingo).

El resto de los campos (no casillas de verificación) se generan de esta manera:

<li> 
    <label for="my_textbox_field">My TextBox</label> 
    <input id="my_textbox_field" type="text" ... > 
</li> 

Las casillas de verificación, sin embargo, están encerrados dentro de sus <label> etiquetas por completo - como esto:

<li> 
    <label for="my_boolean_field"> 
    <input id="my_boolean_field" type="checkbox" ... > 
    This is my boolean field 
    </label> 
</li> 

filosofía Formtastic parece estar basado en la presentación Learning to Love Forms. En efecto, en la diapositiva 36 de esa presentación, esta estructura se sugiere para casillas de verificación. Supongo que en la presentación en sí el presentador explicó por qué se hizo esto, pero no está escrito en las diapositivas.

¿Alguien puede decirme por qué adjuntar casillas de verificación dentro de su etiqueta <label> podría ser una buena idea, en lugar de ponerlas afuera, como con cuadros de texto?

Answer 1

La interfaz de usuario común para una entrada de texto es o bien una etiqueta a la izquierda:

Email address: [____________________] 

O la etiqueta encima de la entrada:

Email address: 
[___________________________________] 

Para una casilla de verificación sin embargo, la interfaz de usuario común es para la etiqueta que aparezca después de la entrada, como este:

[x] Accept terms and conditions 

Para los primeros dos casos, simplifica drásticamente el CSS que debe crear si la etiqueta viene antes de la entrada en el marcado. Se podría argumentar que la etiqueta podría rodear la entrada aún, pero lo importante aquí es que el texto viene antes de la entrada.

En el tercer ejemplo (la casilla de verificación), el texto viene después de la etiqueta, y de nuevo, el CSS se simplifica enormemente colocando la etiqueta en el lugar correcto en el orden de marcado (después de la entrada).

Por lo tanto, las casillas de verificación siempre iban a ser diferentes al resto de las entradas.En cuanto a la envoltura de la casilla de verificación con una etiqueta, esta fue solo una preferencia personal, aunque yo argumentaría que dado que las entradas checkbox son diferentes, tener la entrada dentro de la etiqueta hace que sea más fácil enfocar estas entradas para diseñar con CSS, porque el marcado es diferente.

Answer 2

Puede alguien decirme por qué encierra casillas de verificación dentro de su etiqueta de <label> podría ser una buena idea

Se podría ser una buena idea, ya que podría perder los id y for atributos en este caso, por lo el marcado más simple. Cuando un <input> está dentro de un <label>, la conexión entre ellos está implícita. (Consulte HTML4 sección 17.9.1.)

Sin embargo, en la práctica esto no funciona en IE, por lo que pierde esa ventaja potencial.

Solo puedo asumir que en este caso es por motivos de diseño/estilo.

Answer 3

Además de las razones mencionadas en las otras respuestas, si el <label> y el <input> están separados, no se podrá hacer clic en ninguno de los espacios en blanco entre ellos. Esto probablemente no es lo que querías. Por ejemplo, el salto de línea en este código dará como resultado un hueco no se puede hacer clic:

<input id="my_boolean_field" type="checkbox" ... >  
<label for="my_boolean_field">This is my boolean field</label> 

Anidación la <input> dentro de la <label> evita esto, debido a que el espacio en blanco es parte de la etiqueta.

Ejemplo en vivo: http://jsfiddle.net/xKLrS/2/