Znacznik HTML <etykieta>
Przykład
Trzy przyciski radiowe z etykietami:
<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="Submit">
</form>
Definicja i użycie
Znacznik <label>definiuje etykietę dla kilku elementów:
- <input type="pole wyboru">
- <input type="kolor">
- <input type="data">
- <input type="datetime-local">
- <input type="e-mail">
- <input type="plik">
- <input type="miesiąc">
- <input type="liczba">
- <input type="hasło">
- <input type="radio">
- <input type="zakres">
- <input type="szukaj">
- <input type="tel">
- <input type="text">
- <input type="czas">
- <input type="url">
- <input type="tydzień">
- <metr>
- <postęp>
- <wybierz>
- <obszar tekstowy>
Właściwe użycie etykiet z powyższymi elementami przyniesie korzyści:
- Użytkownicy czytników ekranu (odczytają na głos etykietę, gdy użytkownik skupi się na elemencie)
- Użytkownicy, którzy mają trudności z klikaniem bardzo małych obszarów (takich jak pola wyboru) - ponieważ gdy użytkownik kliknie tekst w
<label>elemencie, przełącza wejście (zwiększa to obszar trafienia).
Wskazówki i uwagi
Wskazówka: atrybut for <label>
musi być równy atrybutowi id powiązanego elementu, aby powiązać je ze sobą. Etykietę można również powiązać z elementem, umieszczając element wewnątrz <label>elementu.
Obsługa przeglądarki
| Element | |||||
|---|---|---|---|---|---|
| <label> | Yes | Yes | Yes | Yes | Yes |
Atrybuty
| Attribute | Value | Description |
|---|---|---|
| for | element_id | Specifies the id of the form element the label should be bound to |
| form | form_id | Specifies which form the label belongs to |
Atrybuty globalne
Znacznik <label>obsługuje również atrybuty globalne w HTML .
Atrybuty wydarzenia
Tag <label>obsługuje również Atrybuty Zdarzeń w HTML .
Powiązane strony
Odniesienie HTML DOM: obiekt etykiety
Domyślne ustawienia CSS
Większość przeglądarek wyświetla <label>element z następującymi wartościami domyślnymi:
Przykład
label {
cursor: default;
}