dwa wejścia pola wewnątrz jednej etykiecie

Rozważmy następujący:dwa wejścia pola wewnątrz jednej etykiecie

<label>Range from 
    <input name='min_value'/> to 
    <input name='max_value' /> 
</label>

Czy to semantycznie poprawne, ponieważ zalecenia W3C stwierdzić, że etykieta jest związana z dokładnie kontrolą jednej formy?

Kliknięcie w drugie wejście powoduje przesunięcie ostrości natychmiast do pierwszego wejścia? Czy można temu zapobiec?

W jaki sposób oznaczono by kombinację wejścia min/maks, aby pokazać, że dwa wejścia należą do siebie?

Źródło

2012-01-25 sqwk

Dlaczego trzeba wkładać dane wejściowe do etykiety? Dlaczego nie? Zakres od do –

Potrzebny jest atrybut for na etykiecie, który łączy się z identyfikatorem jednego wejścia (który powinien być unikalny w całej zakres strony). – MetalFrog

@MetalFrog: Zagnieżdżenie kontrolki na etykiecie zapewni niezbędną semantykę - dodanie atrybutu do etykiety w tej sytuacji jest zbędne. Atrybut for jest potrzebny tylko wtedy, gdy kontrola pojawia się gdzie indziej. To znaczy, że * może * być użyteczne do określenia atrybutu mimo to, aby upewnić się, że kojarzysz etykietę z odpowiednią kontrolą, ponieważ błąd sprawdzania poprawności zostanie zgłoszony po znalezieniu konfliktu: "Dowolny element wejściowy potomny elementu etykiety z atrybutem for musi mieć wartość identyfikatora, która pasuje do atrybutu. " – BoltClock

Nie, to nie jest poprawna (ponieważ, jak można zauważyć, A label jest skojarzony z dokładnie jeden wejścia formularza).

Do oznaczania grupy wejść należących razem używać <fieldset> i <legend>:

<fieldset> 
 
    <legend>Range</legend> 
 
    <label for="min">Min</label> 
 
    <input id="min" name="min" /> 
 

 
    <label for="max">Max</label> 
 
    <input id="max" name="max" /> 
 
</fieldset>

Literatura:

<input />^{HTML 5 spec, WHATWG definition}.
<fieldset>^{HTML 5 spec, WHATWG definition}.
<label>^{HTML 5 spec, WHATWG definition}.
<legend>^{HTML 5 spec, WHATWG definition}.

Źródło

2012-01-25 14:31:31

Wygląda na to, że możesz również użyć [labelledby] (https://www.w3.org/TR/WCAG20-TECHS/ARIA9.html#ARIA9-ex2) (chociaż nadal wybrałbym Twoje rozwiązanie). –

-3

Nie sądzę, że powinieneś umieszczać pole wejściowe wewnątrz kontrolki etykiet.

<label for="myfield">test</label><input type="text" id="myfield" name="myfield />

etykieta jest po prostu tym, etykieta na coś.

Źródło

2012-01-25 14:32:02 kolin

Nie jest w porządku wkładanie danych wejściowych do etykiety. W idealnym świecie powiązanie for/id nie powinno być konieczne w przypadku tak zwanych niejawnie powiązanych etykiet, ponieważ byłoby tak oczywiste, że odpowiednia etykieta jest elementem nadrzędnym tego wejścia. W świecie rzeczywistym czytniki ekranu nie były w stanie tego uzyskać tak długo, że używanie atrybutów id/id jest obowiązkowe. – FelipeAls

' Twój wiek (1, 2 lub 3 cyfry)' to przykład użycia elementu etykiety do wyświetlenia tekstu pomocy na prawo wejścia, ale czytane przez czytniki ekranu w odpowiednim momencie: przed ((częściowo) ślepym) użytkownik ma szansę wpisać coś w danych wejściowych. Nie pomaga mu to po tym, jak wpisał coś w danych wejściowych;) – FelipeAls

IRL, etykieta nie zawiera tego, do czego służy. Słoik ogórków nie jest zawarty w etykiecie, co oznacza, że jest to słoik pikli.Etykieta po prostu stwierdza, że jest to ten słoik pikli. Mogę przenieść tę etykietę w dowolnym miejscu, ale wciąż jest w tym słoju marynat. To samo dotyczy formularzy HTML. IMO, etykieta nie powinna zawierać kontroli, jaką są etykiety. Powinien po prostu wskazywać na tę szczególną kontrolę. Co zrobić, jeśli chcę usunąć etykietę (z jakiegoś powodu nie mogę jeszcze wymyślić) za pomocą JavaScript? Również usunę kontrolę! Mogę wyrzucić tę etykietę i słoik marynat nadal tam jest. –

Jak ten temat:

<label> Range from <input name='min_value'> </label> 
<label> to <input name='max_value'> </label>

Źródło

2012-01-25 14:35:31

Według this - etykieta może zawierać tylko jedno wejście, jak powinno być związane z tylko jednego kontrolą. Umieszczenie danych wejściowych w etykiecie oznacza wyeliminowanie atrybutu for (automatyczne łączenie).

Więc należy albo umieścić pojedynczy wejście na etykiecie lub określić for atrybut, który wskazuje wejście id i NIE wejściowe wprowadzane do etykiety.

Źródło

2012-01-25 14:37:05 zysoft

Zgodnie z przyjętą odpowiedzią, to nie jest poprawne, jednak myślę, że są lepsze sposoby na to.

dostęp alternatywy:

Opcja 1 (przy użyciu atrybutu aria-label):

Range: 
<input ... aria-label='Range start' /> 
<input ... aria-label='Range end' />

opcja 2 (z użyciem ukrytych label tags):

<label for='start'>Range start</label> 
<input type='text' id='start' /> 

<label for='end' class='hidden'>Range end</label> 
<input type='text' id='end' />

Jeżeli .hidden klasa to only readable by screen readers.

Wariant 3 (używając aria-labelledby atrybuty):

<label id='lblRange'>Range</label> 
<input type='text' id='start' aria-labelledby='lblRange' /> 
<input type='text' id='end' aria-labelledby='lblRange' />

Zalety opcję nr 1: Każdy input ma dobry opis, że inne propozycje (np dodając A "do" etykiety) nie. Opcje # 2 i # 3 mogą nie być najlepsze w tym konkretnym przypadku, ale warto wspomnieć o podobnych przypadkach.

Źródło: http://webaim.org/techniques/forms/advanced

Źródło

2015-07-07 16:44:45

1 LABEL = 1 WEJŚCIE !!!

Jeśli umieścisz 2 WEJŚCIA wewnątrz LABELU, to NIE będzie działać w Safari (i iPadzie i iPhonie) ... ponieważ po kliknięciu wewnątrz LABEL automatycznie ustawia pierwszy INPUT ... aby drugie wejście było niemożliwe wpisz do.

Źródło

2016-11-21 15:51:06 mzvarik

dwa wejścia pola wewnątrz jednej etykiecie

Odpowiedz

Powiązane problemy