Autor publikacji
Virtual Patriot - Administrator

label

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu label

Element label reprezentuje etykietę interfejsu użytkownika, z którą może zostać powiązany, któryś z elementów HTML należących do kategorii zawartość powiązana z elementem label.

Dodatkowe artykuły związane z elementem label

Informacje techniczne o elemencie label

kategoria ogólna
kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst frazowany

Przykładowy Kod HTML

<form>
  <label>Podaj Twój ulubiony kolor: <input></label>
  <button type="submit">zatwierdź</button>
</form>

Kontekstem zewnętrznym przykładowego elementu "label" jest element "form". Wspomniany element "form" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "form", jest prawidłowym kontekstem zewnętrznym dla elementu "label".

kontekst wewnętrzny

zawartość frazowana, lecz nie element label jako element potomek, ponadto zawartość powiązana z elementem label może wystąpić tylko raz jako element potomek danego elementu label

Przykładowy Kod HTML

<form>
  <label>Podaj <strong>Twój ulubiony</strong> kolor: <input></label>
  <button type="submit">zatwierdź</button>
</form>

Kontekstem wewnętrznym przykładowego elementu "label" jest wyłącznie tekst oraz elementy HTML, które należą do kategorii zawartość frazowana. Ponadto elementem potomkiem wspomnianego elementu "label" nie jest element "label", dodatkowo jednym z elementów potomków wspomnianego elementu "label" jest tylko jeden element HTML, który należy do kategorii zawartość powiązana z elementem label, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli ciąg znaków "Podaj", element "strong", ciąg znaków "kolor:" oraz element "input", jest prawidłowym kontekstem wewnętrznym dla elementu "label".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<label> ... </label>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

inline

Przypuszczalnie domyślne reguły CSS elementu label

label {
  cursor:default;
}

Interpretacja elementu label

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis atrybutów elementu label

Atrybut Lokalny

for

Przeznaczenie atrybutu for

Atrybut for wykorzystany wraz z elementem label pozwala nam określić informację o tym, z jakim elementem HTML, który należy do kategorii zawartość powiązana z elementem label, powinien zostać powiązany dany element label.

Domyślnie element "label" jest powiązany ze swoim elementem potomkiem należącym do kategorii zawartość powiązana z elementem label, jeżeli taki istnieje, ponadto tylko jeden element HTML należący do kategorii zawartość powiązana z elementem label może zostać powiązany z tym samym elementem "label".

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu for

id

Należy podać wartość atrybutu id interesującego nas elementu HTML należącego do kategorii zawartość powiązana z elementem label.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="https://webkod.pl/php/submit-result.php">
      <label for="imie">Podaj imię:</label>
      <input type="text" name="imie" id="imie">

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "label" został powiązany z elementem "input" posiadającym atrybut "id" o wartości "imie", ponieważ do wspomnianego elementu "label" został dodany atrybut "for" wraz z wartością "imie".