UWAGA : identyfikator musi być unikalny na stronie!
Wyjaśnienie
Ponieważ inne odpowiedzi nie wspominają o tym, etykieta może zawierać do 1 danych wejściowych i pomijać foratrybut, i zakłada się, że jest to dane wejściowe w nim zawarte.
[Atrybut for] jawnie wiąże definiowaną etykietę z inną kontrolką. Jeśli jest obecna, wartość tego atrybutu musi być taka sama jak wartość atrybutu id jakiejś innej kontrolki w tym samym dokumencie. W przypadku nieobecności definiowana etykieta jest powiązana z zawartością elementu.
Aby skojarzyć etykietę z inną kontrolką w sposób niejawny, element kontrolny musi znajdować się w treści elementu LABEL . W takim przypadku ETYKIETA może zawierać tylko jeden element sterujący. Sama etykieta może być umieszczona przed lub po powiązanej kontroli.
Korzystanie z tej metody ma pewne zalety w stosunku do for:
Nie trzeba przypisywać iddo każdego pola wyboru (świetnie!).
Nie trzeba używać dodatkowego atrybutu w pliku <label>.
Obszar klikalny wejścia jest również obszarem klikalnym etykiety, więc nie ma dwóch oddzielnych miejsc do kliknięcia, które mogą kontrolować pole wyboru - tylko jedno, bez względu na to, jak daleko od siebie <input>i rzeczywisty tekst etykiety, i bez względu na to, jaki rodzaj CSS zastosować się do tego.
Uwielbiam to, ale proszę ponownie edytować. Jest to dobre tylko w przypadku pól wyboru. Nie zachęcajmy ludzi do owijania innych danych wejściowych etykietami, ponieważ to zepsuje system gridowy i mobilność będzie trudniejsza do zdobycia
Max
1
Jeśli ktoś może wyjaśnić komentarz pozostawiony przez Johna, proszę, zrób to, ponieważ nie ma to dla mnie żadnego sensu.
Wesley Murch,
16
@John, który jest przewodnikiem po znacznikach specjalnie dla bootstrapu. Jeśli nie używasz frameworka lub używasz innej, powinno być całkowicie w porządku. Dziękuję za odpowiedź.
Wesley Murch,
3
@Jan. Na stronie, którą linkujesz, przykłady ładowania początkowego wszystkie zawijają pole wyboru z etykietą, nie widzę żadnych ostrzeżeń, jak w ogóle wskazujesz, być może nie jest to już istotne dla najnowszego ładowania początkowego.
user2144406,
2
Jak się dzisiaj dowiedziałem, nie mieszaj metody 1 i metody 2. Jeśli zawiniesz pole wyboru w etykiecie ORAZ uwzględnisz opcję for, kliknięcie etykiety nie spowoduje aktywacji pola wyboru.
BBlake,
50
Upewnij się tylko, że etykieta jest powiązana z danymi wejściowymi.
<fieldset><legend>What metasyntactic variables do you like?</legend><inputtype="checkbox"name="foo"value="bar"id="foo_bar"><labelfor="foo_bar">Bar</label><inputtype="checkbox"name="foo"value="baz"id="foo_baz"><labelfor="foo_baz">Baz</label></fieldset>
Czy w PHP, czy $ _POST ['foo'] zawsze ma jednocześnie jedną z dwóch wartości? Nawet jeśli oba są zaznaczone. Co to jest grupa pól wyboru?
jeromej
2
@JeromeJ: Aby php poprawnie go obsługiwał, musisz dodać nawiasy kwadratowe do nazwy, np <input type="checkbox" name="foo[]" value="bar" ...>. : Otrzymasz tablicę zawierającą wartości wszystkich zaznaczonych pól (o tej nazwie). Na przykład $_POST['foo'][0]może być bari $_POST['foo'][1]może być baz(jeśli oba są zaznaczone).
Lewita
11
Możesz także użyć pseudoelementów CSS do wybierania i wyświetlania etykiet ze wszystkich atrybutów wartości pola wyboru (odpowiednio). Edycja: Działa to tylko z przeglądarkami internetowymi i przeglądarkami typu flash (Chrome (ium), Safari, Opera ....), a tym samym większością przeglądarek mobilnych. Brak obsługi Firefox lub IE tutaj.
Może to być przydatne tylko podczas osadzania webkit / blink w aplikacjach.
Prawdziwe. Gekon, Trident i gekon nie lubią tego. Działa to tylko z Webkit i Blink. Zaktualizuję odpowiedź
mrmoje,
3
Doceniony. Chociaż jest to możliwe, jest to zły sposób - nie działa w wielu przeglądarkach, co nie jest dobre dla dostępności.
James Billingham,
Pomijając kwestie kompatybilności, to rozwiązanie nie jest tak semantyczne jak najlepsza odpowiedź, ponieważ nie ma bezpośredniego powiązania w znacznikach między <label> a <input>
deadboy
„To działa na Webkit / Blink” pachnie jak błąd przy użyciu ( stackoverflow.com/questions/2587669/… ), więc może przestać działać w dowolnym momencie.
Xenos
7
<labelfor="vehicle">Type of Vehicle:</label><inputtype="checkbox"id="vehicle"name="vehicle"value="Bike"/>
Ponieważ może to być mylące dla niektórych czytelników, powinieneś zmienić wartość nameatrybutu na coś innego niż wartość, która jest obecna w atrybutach fori id, ponieważ te dwa są powiązane, podczas gdy nametak nie jest (ale to chyba jest obowiązkowe, aby zostać uwzględnionym) .
W tym celu nie trzeba używać JavaScript. Jest wbudowany w HTML.
Lasse Bunk
4
@LasseBunk, gdyby to był tylko JavaScript, ale do działania wymagana jest cała biblioteka jQuery. Zobaczmy, czy ktoś może wymyślić rozwiązanie Angular 2.
Odpowiedzi:
Metoda 1: Zawiń etykietę etykiety
Zawiń pole wyboru w
label
tag:Metoda 2: Użyj
for
atrybutuUżyj
for
atrybutu (dopasuj pole wyboruid
):UWAGA : identyfikator musi być unikalny na stronie!
Wyjaśnienie
Ponieważ inne odpowiedzi nie wspominają o tym, etykieta może zawierać do 1 danych wejściowych i pomijać
for
atrybut, i zakłada się, że jest to dane wejściowe w nim zawarte.Fragment z w3.org (z moim naciskiem):
Korzystanie z tej metody ma pewne zalety w stosunku do
for
:Nie trzeba przypisywać
id
do każdego pola wyboru (świetnie!).Nie trzeba używać dodatkowego atrybutu w pliku
<label>
.Obszar klikalny wejścia jest również obszarem klikalnym etykiety, więc nie ma dwóch oddzielnych miejsc do kliknięcia, które mogą kontrolować pole wyboru - tylko jedno, bez względu na to, jak daleko od siebie
<input>
i rzeczywisty tekst etykiety, i bez względu na to, jaki rodzaj CSS zastosować się do tego.Demo z pewnym CSS:
źródło
Upewnij się tylko, że etykieta jest powiązana z danymi wejściowymi.
źródło
<input type="checkbox" name="foo[]" value="bar" ...>
. : Otrzymasz tablicę zawierającą wartości wszystkich zaznaczonych pól (o tej nazwie). Na przykład$_POST['foo'][0]
może byćbar
i$_POST['foo'][1]
może byćbaz
(jeśli oba są zaznaczone).Możesz także użyć pseudoelementów CSS do wybierania i wyświetlania etykiet ze wszystkich atrybutów wartości pola wyboru (odpowiednio).
Edycja: Działa to tylko z przeglądarkami internetowymi i przeglądarkami typu flash (Chrome (ium), Safari, Opera ....), a tym samym większością przeglądarek mobilnych. Brak obsługi Firefox lub IE tutaj.
Może to być przydatne tylko podczas osadzania webkit / blink w aplikacjach.
Wszystkie etykiety pseudoelementów będą klikalne.
Demo: http://codepen.io/mrmoje/pen/oteLl , + Istota tego
źródło
źródło
źródło
name
atrybutu na coś innego niż wartość, która jest obecna w atrybutachfor
iid
, ponieważ te dwa są powiązane, podczas gdyname
tak nie jest (ale to chyba jest obowiązkowe, aby zostać uwzględnionym) .To też działa:
źródło
for
iid
w swoim przykładzie, ponieważlabel
znacznik zawiera tylko jeden element wejściowy.To powinno ci pomóc: W3Schools - Etykiety
źródło
źródło
Użyj
label
elementu ifor
atrybutu, aby powiązać go z polem wyboru:<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />
źródło
W Kątowa etykieta materiału z polem wyboru
źródło
Użyj tego
źródło