Pregunta

W3Schools tienen que decir acerca de etiquetas :

  

La etiqueta <label> define una etiqueta para un entrada elemento.    [Énfasis mío]

¿Quiere esto decir que el código HTML siguiente no es válida?

<!doctype html>
<html>
    <head>
         <title>Example document</title>
    </head>
    <body>
        <label for="x">Label</label> 
        <hr>
        <div id="q" contentEditable="true">Hello</div>
        <hr>
        <div id="x" contentEditable="true">World</div>
    </body>
</html>

Tanto Chrome y IE8 dan enfoque a World cuando se hace clic Label, Firefox no lo hace. ¿Qué es la correcta?

¿Fue útil?

Solución

De acuerdo con la W3C se aplica a controles de formulario, y controles de formulario se definido como :

  • Botones
  • Las casillas de verificación
  • Los botones de radio
  • Menús
  • Entrada de texto
  • seleccione Archivo
  • controles ocultos
  • etiquetas object

Así que FireFox es técnicamente correcto, aunque yo casi no consideran que es "romper" si un navegador no se limitó a esos elementos.

Otros consejos

La especificación HTML dice, sobre label atributo "for", "Cuando está presente, el valor de este atributo debe ser el mismo que el valor del atributo id de algún otro control en el mismo documento. Cuando está ausente, siendo la etiqueta definidos está asociada con el contenido del elemento ".

Así que las referencias de identificación en "para" debe ser la de un control. ¿Qué es un control? La especificación dice básicamente cualquier input es un control, como es button, select o object. Así Firefox es técnicamente correcto -. Un div no es un control

Yo diría que no era un uso apropiado del margen de beneficio, porque la semántica de etiquetas es que son específicamente para los controles.

  

El elemento LABEL se utiliza para especificar   etiquetas para los controles que no tienen   etiquetas implícitas,

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

La especificación WhatWG última tiene esto que decir:

  

Algunos elementos, no todos ellos forma asociada, se clasifican como elementos marcables. Estos son elementos que pueden estar asociados con un elemento de etiqueta.

     
      
  • button, input (si el atributo type no está en el estado oculto), meter, output, progress, select, textarea
  •   
     

...

     

El atributo for se puede especificar para indicar un control de formulario con el que el subtítulo es para ser asociado. Si se especifica el atributo, el valor del atributo debe ser el ID de un elemento susceptible de marcaje en el mismo árbol que el elemento label.

(Fuente: https://html.spec.whatwg.org/multipage/ forms.html.)

En otras palabras, la norma sólo permite for atributos para apuntar a elementos de uno de los 7 tipos de etiquetas mencionadas anteriormente. Por lo tanto, el código HTML expuesto en la pregunta (que utiliza un elemento for para señalar a un div editable) es HTML técnicamente no válido bajo la especificación actual.

El Nu Html Comprobador (que es avalado por WhatWG ) está de acuerdo; , si se solicita para validar el documento HTML a partir de la pregunta, dirá:

  

Error :. El valor del atributo for del elemento label debe ser el ID de un control no oculta forma

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top