Ich habe mich gefragt, was passieren würde, wenn ich 2 <label> -Tags verschachteln würde, und es stellt sich heraus, dass mit Ausnahme von Opera in allen aktuellen Versionen aller Browser auf das innere Etikett klickt führt dazu, dass nur das Label angeklickt wird. Hier ist eine Demo des Verhaltens von geschachtelten Label-Tags.
Meine Frage ist: Gibt es Standards für das Verhalten von Browsern bei der Verarbeitung von Klickereignissen in verschachtelten Labels? Ich konnte nur diese MDN-Sektion über Geckos Verhalten, aber ich konnte nichts über die anderen Browser finden.
Der Grund, warum dies für mich interessant ist, liegt darin, dass es möglich ist, Beschriftungs-Tags zu verschachteln und trotzdem die richtige Eingabe mit der nächstgelegenen umgebenden Beschriftung auszuwählen. So können Sie tolle Dinge wie dies . Wenn das Verhalten geschachtelter Labels in keinen Standards definiert ist (so dass jeder Browser tun kann, was er will), ist dies keine Option, auch nicht in der Zukunft. Das Format für solche Registerkarten wäre:
%Vor% Dieses Tab-System ist bereits möglich, wenn Labels nicht verschachtelt werden, indem dem Label ein for -Attribut und der Eingabe ein id zugewiesen wird, aber dann müssen Sie sich um eindeutige IDs für jede Eingabe kümmern und Das ist viel mehr Aufwand als nur so. Hier ist eine weitere Demo davon (und wie Sie sehen können, ist es unmöglich, das Label korrekt zu markieren das ist jetzt überprüft).
PS: Bitte beantworte diese Frage nicht mit "das ist nicht der Zweck, für den Inputs und Labels entworfen wurden!". Ich weiß, ich frage mich nur, ob es irgendwelche Hoffnungen dafür gibt, auch in Opera.
Wie Sie wissen, ist es nicht erlaubt, label Elemente, da label das folgende Inhaltsmodell hat:
Phrasierung von Inhalt, jedoch ohne nachträgliche labelbare Elemente, es sei denn, es handelt sich um das beschriftete Element des Elements und keine Nachkommen
label-Elemente.
HTML5 definiert, was passiert, wenn ein Benutzer interaktive Inhalte :
Bestimmte Elemente in HTML haben ein Aktivierungsverhalten, was bedeutet, dass der Benutzer sie aktivieren kann. Dies löst eine Folge von Ereignissen aus, die vom Aktivierungsmechanismus abhängig ist und normalerweise in einem
click-Ereignis endet, wie unten beschrieben.
Schritt 3 von "Wenn auf ein Zeigegerät geklickt wird" sagt:
Sei e das nächste aktivierbare Element des Elements, das vom Benutzer (wie unten definiert) angegeben wird, falls vorhanden.
Um das nächste aktivierbare Element zu finden, verwenden Sie einen Algorithmus ist definiert:
- Wenn target ein definiertes Aktivierungsverhalten aufweist, geben Sie target zurück und brechen Sie diese Schritte ab.
- Wenn target über ein übergeordnetes Element verfügt, legen Sie target auf dieses übergeordnete Element fest und kehren zum ersten Schritt zurück.
- Ansonsten gibt es kein nächstgelegenes aktivierbares Element.
Dieser Abschnitt enthält nicht explizit den Fall einer ungültigen Verschachtelung von interaktiven Inhalten. Ich bin mir nicht sicher, ob dieser Algorithmus auch für ungültigen Code gilt (wahrscheinlich nicht). Aber wenn es gilt, sollte nur der innere label ausgelöst werden.
Die html5 Spezifikation sagt ausdrücklich:
Das Label-Element darf keine verschachtelten Label-Elemente enthalten.
Die Art und Weise, wie Browser mit verschachtelten Labels umgehen, ist daher undefiniert. Darüber hinaus sind for Attribute wichtig für die Barrierefreiheit und die Nutzbarkeit und sollten nicht weggelassen werden.
Tags und Links html standards cross-browser opera web-standards