une étiquette peut se référer uniquement aux éléments d'entrée?

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

  •  11-09-2019
  •  | 
  •  

Question

W3Schools ont ceci à dire à propos de :

  

La balise <label> définit une étiquette pour un élément Entrée .    [souligné dans l'original]

Est-ce que cela signifie que le code HTML suivant n'est pas valide? 

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

Les deux Chrome et IE8 donner le focus à World lorsque Label est cliqué, Firefox ne fonctionne pas. Ce qui est correct?

Était-ce utile?

La solution

Selon le W3C il applique aux contrôles de formulaire et les contrôles de formulaire sont défini comme :

  • Boutons
  • Les cases à cocher
  • Les boutons radio
  • Menus
  • Saisie de texte
  • Fichier sélectionner
  • contrôles cachés
  • balises objet

FireFox est techniquement juste, bien que je considère à peine à « casser » si un navigateur ne limite pas à ces éléments.

Autres conseils

La spécification HTML dit, à propos de l'attribut « pour » de label, « Quand il est présent, la valeur de cet attribut doit être la même que la valeur de l'attribut id d'un autre contrôle dans le même document. En cas d'absence, l'étiquette étant définie est associée avec le contenu de l'élément. "

Ainsi, les références d'identité dans « pour » doit être celle d'un contrôle. Qu'est-ce qu'un contrôle? La spécification dit essentiellement tout input est un contrôle, comme button, select ou object. Donc, Firefox est techniquement juste -. Un div est pas un contrôle

Je dirais que ce n'était pas une utilisation appropriée du balisage, parce que la sémantique de l'étiquette sont qu'ils sont spécifiquement pour les contrôles.

  

L'élément d'étiquette est utilisée pour spécifier   les étiquettes des commandes qui ne sont pas   labels implicites,

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

La dernière spécification WhatWG a ceci à dire:

  

Certains éléments, tous les associés sous forme, sont classés comme éléments marquables. Ce sont des éléments qui peuvent être associés à un élément d'étiquette.

     
      
  • button, input (si l'attribut type est pas dans l'état caché), meter, output, progress, select, textarea
    •   
     

...

     

L'attribut for peut être spécifié pour indiquer un contrôle de la forme avec laquelle la légende doit être associé. Si l'attribut est spécifié, la valeur de l'attribut doit être l'ID d'un élément dans marquable le même arbre que l'élément label.

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

En d'autres termes, la norme ne permet que des attributs for pour pointer sur des éléments de l'un des 7 types de balises énumérés ci-dessus. Le code HTML exposé dans la question (qui utilise un élément de for pour pointer vers un div modifiable) est donc techniquement HTML invalide en vertu de la spécification actuelle.

Le (qui est Nu Html Vérificateur approuvé par WhatWG) est d'accord; si vous le demandez, il vous dira de valider le document HTML de la question:

  

Erreur :. La valeur de l'attribut for de l'élément de label doit être l'ID d'un contrôle de forme non masquée

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top