<label>
Etykieta pola formularza. Kliknięcie etykiety przenosi kursor do pola.
- Wyświetlanie
- inline
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa bez innych etykiet i bez pól innych niż opisywane
Przykład
#<p>
<label for="nick">Nick w rankingu</label>
<input type="text" id="nick" name="nick">
</p>
<p>
<label>
<input type="checkbox" name="terms">
Akceptuję regulamin kursu
</label>
</p>Definicja i zastosowanie
#Element <label> opisuje pole formularza: mówi, czego oczekujesz od użytkownika („E-mail”, „Hasło”, „Akceptuję regulamin”). Etykietę łączysz z polem na dwa sposoby: owijając nią pole albo podając w atrybucie for identyfikator pola.
To połączenie daje realne korzyści. Czytnik ekranu przeczyta etykietę, gdy użytkownik wejdzie do pola, a kliknięcie tekstu etykiety ustawi kursor w polu albo zaznaczy pole wyboru. Na telefonie, gdzie trudno trafić w mały checkbox, to duża różnica.
Etykietę połączysz z elementami <input> (poza type="hidden"), <select>, <textarea>, <button>, <meter>, <output> i <progress>. Jedno pole może mieć kilka etykiet, ale jedna etykieta opisuje tylko jedno pole.
Składnia
#<label for="id-pola">Tekst etykiety</label>Atrybuty
#id pola
Identyfikator pola, które opisuje etykieta. Dzięki niemu etykieta i pole nie muszą stać obok siebie w kodzie, co przydaje się na przykład wtedy, gdy są w osobnych komórkach tabeli.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#for
id polaIdentyfikator pola, które opisuje etykieta. Dzięki niemu etykieta i pole nie muszą stać obok siebie w kodzie, co przydaje się na przykład wtedy, gdy są w osobnych komórkach tabeli.
<label for="course">Wybierz kurs</label>
<select id="course" name="course">
<option>HTML i CSS</option>
<option>JavaScript</option>
</select>Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#placeholdernie zastępuje etykiety. Znika podczas pisania i łatwo zapomnieć, co należało wpisać.- Wartość
formusi dokładnie odpowiadaćidpola, z uwzględnieniem wielkości liter. - Jeśli projekt wymaga ukrycia etykiety, ukryj ją tylko wizualnie (na przykład klasą w stylu
.sr-only), zamiast ją usuwać. Czytniki ekranu nadal ją przeczytają.
Powiązane hasła
#- <input>Pole formularza: tekst, e-mail, hasło, liczba, data, suwak, pole wyboru, plik i wiele innych.
- <form>Formularz, który zbiera dane od użytkownika i wysyła je pod wskazany adres.
- <select>Rozwijana lista, z której użytkownik wybiera jedną lub kilka opcji.
- <textarea>Wielowierszowe pole tekstowe na dłuższe wypowiedzi: wiadomości, opinie, opisy.
- <fieldset>Grupa powiązanych pól formularza z ramką i podpisem `<legend>`.
Widzisz błąd albo brakuje przykładu? Napisz do nas.