uma etiqueta pode referir-se apenas aos elementos de entrada?

StackOverflow https://stackoverflow.com/questions/1094352

  •  11-09-2019
  •  | 
  •  

Pergunta

W3Schools tem a dizer sobre etiquetas :

A tag <label> define um rótulo para um de entrada elemento. [grifo meu]

Quer isto dizer que o HTML a seguir não é válido? 

<!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>

Ambos Chrome e IE8 dar foco para World quando Label é clicado, o Firefox não. Que é correto?

Foi útil?

Solução

De acordo com a W3C se aplica para controlos de formulários e controlos de formulário são definido como :

  • Botões
  • Checkboxes
  • Rádio botões
  • Menus
  • Entrada de texto
  • selecione Arquivo
  • controles ocultos
  • tags object

Assim FireFox é tecnicamente correto, embora eu quase não considerá-lo a ser "quebrar" se um navegador não restringi-lo a esses elementos.

Outras dicas

A especificação HTML diz, sobre label do atributo "for", "Quando presente, o valor deste atributo deve ser o mesmo que o valor do atributo id de algum outro controle no mesmo documento. Quando ausente, o ser etiqueta definida é associado com o conteúdo do elemento. "

Assim, as referências id em "para" deve ser a de um controle. O que é um controle? A especificação diz basicamente qualquer input é um controle, como é button, select, ou object. Então Firefox é tecnicamente direito - um div não é um controle

.

Eu diria que não foi um uso adequado da marcação, porque a semântica de etiquetas é que eles são especificamente para controles.

O elemento LABEL é usado para especificar etiquetas para controles que não têm etiquetas implícitas,

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

A última WhatWG especificação tem que dizer isto:

Alguns elementos, nem todos eles formam-associado, são classificados como elementos labelable. Estes são elementos que podem ser associados com um elemento de rótulo.

  • button, input (se o atributo type não está no estado oculto), meter, output, progress, select, textarea

...

O atributo for pode ser especificado para indicar um controlo com o qual forma o subtítulo é para ser associado. Se o atributo for especificado, o valor do atributo deve ser o ID de um elemento labelable na mesma árvore como o elemento label.

(Fonte: https://html.spec.whatwg.org/multipage/ Forms.html .)

Em outras palavras, o padrão só permite atributos for para apontar para elementos de um dos 7 tipos de etiquetas mencionados acima. O HTML exibido na questão (que utiliza um elemento for para apontar para uma div editável) é, portanto, HTML tecnicamente inválido sob a especificação atual.

O href="https://checker.html5.org" rel="nofollow noreferrer"> Nu Html Checker (que é endossado por WhatWG ) concorda; se você perguntar a ele para validar o documento HTML a partir da pergunta, ele vai dizer:

Erro :. O valor do atributo for do elemento label deve ser o ID de um controle não oculta formulário

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top