Tag HTML <label>
Definicja i użycie
<label>
Etykieta definiuje oznaczenie (etykieta) dla elementu input.
Elementy label nie wyświetlają żadnych specjalnych efektów dla użytkowników myszy. Jednakże, poprawiają one dostępność. Jeśli klikniesz tekst w elemencie label, zostanie uruchomiony ten kontroler. To znaczy, że gdy użytkownik wybiera tę etykietę, przeglądarka automatycznie przeniesie punkt skupienia na powiązany element formularza.
<label>
etykieta Atrybut for powinna być zgodna z atrybutem id odpowiedniego elementu.
<label>
Etykieta może definiować etykietę (znacznik) dla wielu elementów:
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="search">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
- <meter>
- <progress>
- <select>
- <textarea>
Poprawne użycie powyższych elementów z etykietą będzie korzystne dla następujących użytkowników:
- Użytkownicy czytników ekranowych (gdy użytkownik skupia się na elemencie, czyta etykietę)
- trudno jest kliknąć bardzo małe obszary (np. pola wyboru) - ponieważ gdy użytkownik kliknie
<label>
Dla użytkowników, którzy mają trudności z kliknięciem bardzo małych obszarów (np. pola wyboru) - ponieważ gdy użytkownik kliknie
Zobacz również:
Podręcznik referencyjny HTML DOM:Obiekt Label
Przykład
Trzy przyciski radiowe z etykietą:
<form action="/action_page.php"> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label><br><br> <input type="submit" value="Zatwierdź"> </form>
Wskazówki i komentarze
Wskazówka:<label>
Atrybut for musi być równy atrybutowi id związanego elementu, aby je połączyć. Można również umieścić element w <label>
Element wewnętrzny łączy etykietę z elementem.
Atrybut
Atrybut | Wartość | Opis |
---|---|---|
for | Identyfikator elementu | Określa, do którego elementu formularza jest przypisany label. |
form | Identyfikator formularza | Określa formularz, do którego należy przypisany pola label. |
Globalne atrybuty
<label>
Etiqueta obsługuje również Globalne atrybuty w HTML.
Atrybuty zdarzeń
<label>
Etiqueta obsługuje również Atrybuty zdarzeń w HTML.
Domyślne ustawienia CSS
Większość przeglądarek będzie używała następujących wartości domyślnych do wyświetlania <label>
Element:
label { cursor: default; }
Obsługa przeglądarek
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Wsparcie | Wsparcie | Wsparcie | Wsparcie | Wsparcie |