Ostatnio edytowany:

label

Autor: Virtual Patriot

Przeznaczenie elementu label

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

Dodatkowe techniczne informacje 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
składnia HTML
  • <label> ... </label>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • nigdy
CSS display
  • inline

Dodatkowe 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

Nie interpretuje atrybutu form.

Edge

tak

Nie interpretuje atrybutu form.

Opis atrybutów elementu label

for

Przeznaczenie atrybutu for

Atrybut for wykorzystany wraz z elementem label określa, z którym elementem HTML, który należy do kategorii zawartość powiązana z elementem label powinien zostać powiązany dany element 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="http://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

Mimo że w zawartości przykładowego elementu "label" nie znajduje się żaden element HTML, z którym mógłby zostać powiązany wspomniany element "label", wspomniany 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".

form

Przeznaczenie atrybutu form

Atrybut form wykorzystany wraz z elementem label określa, z którym elementem form powinien zostać powiązany dany element label.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu form

form id

Należy podać wartość atrybutu id interesującego nas elementu form.

Przykładowy Kod HTML

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

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

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

    <label form="formularz-1">
      Podaj kolor:
      <input type="text" name="kolor">
    </label>

  </body>
</html>

Rezultat

Mimo że przykładowy element "label" nie znajduje się w zawartości elementu "form", wspomniany element "label" został powiązany z formularzem HTML reprezentowanym przez wspomniany element "form" posiadający atrybut "id" o wartości "formularz-1", ponieważ do wspomnianego elementu "label" został dodany atrybut "form" wraz z wartością "formularz-1".