Autor publikacji
Virtual Patriot - Administrator

fieldset

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu fieldset

Element fieldset reprezentuje zbiór elementów HTML formularza HTML, które chcemy, aby należały do tej samej grupy.

Dodatkowe artykuły związane z elementem fieldset

Informacje techniczne o elemencie fieldset

kategoria ogólna
kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst opływający

Przykładowy Kod HTML

<form>
  <fieldset>
    <legend>Twoje dane</legend>

    <label>Imię: <input></label>
    <label>Nazwisko: <input></label>
  </fieldset>

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

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

kontekst wewnętrzny

ewentualnie dokładnie jeden element legend, a następnie zawartość opływająca

Przykładowy Kod HTML

<form>
  <fieldset>
    <h2>Twoje dane</h2>

    <label>Imię: <input></label>
    <label>Nazwisko: <input></label>
  </fieldset>

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

Kontekstem wewnętrznym przykładowego elementu "fieldset" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "h2", element "label" oraz element "label", jest prawidłowym kontekstem wewnętrznym dla elementu "fieldset".

Przykładowy Kod HTML

<form>
  <fieldset>
    <legend>Twoje dane</legend>

    <label>Imię: <input></label>
    <label>Nazwisko: <input></label>
  </fieldset>

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

Kontekstem wewnętrznym przykładowego elementu "fieldset" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca oraz które występują po elemencie "legend", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "legend", element "label" oraz element "label", jest prawidłowym kontekstem wewnętrznym dla elementu "fieldset".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<fieldset> ... </fieldset>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

block

Przypuszczalnie domyślne reguły CSS elementu fieldset

fieldset {
  display:block;
  margin-left:2px;
  margin-right:2px;
  padding-top:0.35em;
  padding-right:0.75em;
  padding-bottom:0.625em;
  padding-left:0.75em;
  border-width:2px;
  border-style:groove;
  border-color:black;
}

Interpretacja elementu fieldset

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Nie interpretuje atrybutu form.

Edge

tak

Opis atrybutów elementu fieldset

Atrybut Lokalny

disabled

Przeznaczenie atrybutu disabled

Atrybut disabled wykorzystany wraz z elementem fieldset pozwala nam określić czy elementy HTML mogące zostać wyłączone z interakcji z użytkownikiem oraz znajdujące się w zawartości danego elementu fieldset, lecz nie w zawartości elementu legend danego elementu fieldset, powinny zostać wyłączone z interakcji z użytkownikiem.

Dana reprezentowana przez element HTML, który jest wyłączony z interakcji z użytkownikiem, nie jest brana pod uwagę przez jeden z mechanizmów przeglądarki internetowej podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany wspomniany wyłączony z interakcji element HTML.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu disabled

disabled

Atrybut disabled jest atrybutem logicznym elementu fieldset.

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">
      <fieldset disabled>
        <legend>Twoje dane</legend>

        <p>
          <label>
            Imię:
            <input type="text" name="imie" value="opcja wyłączona">
          </label>
        </p>

        <p>
          <label>
            Nazwisko:
            <input type="text" name="nazwisko" value="opcja wyłączona">
          </label>
        </p>
      </fieldset>

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

  </body>
</html>

Rezultat

Twoje dane

Wszystkie elementy HTML, które mogą zostać wyłączone z interakcji z użytkownikiem oraz które znajdują się w zawartości przykładowego elementu "fieldset", lecz nie w zawartości elementu "legend" przykładowego elementu "fieldset", zostały wyłączone z interakcji z użytkownikiem, ponieważ do wspomnianego elementu "fieldset" został dodany atrybut "disabled".

Atrybut Lokalny

form

Przeznaczenie atrybutu form

Atrybut form wykorzystany wraz z elementem fieldset pozwala nam określić informację o tym, z którym elementem form powinien zostać powiązany dany element fieldset.

Domyślnie element "fieldset" jest powiązany z najbliższym elementem przodkiem będącym elementem form, jeżeli taki istnieje.

Atrybut "form" elementu "fieldset" nie wpływa na to, z którym elementem form zostaną powiązane elementy HTML mogące zostać powiązane z elementem form oraz znajdujące się w zawartości danego elementu "fieldset".

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="https://webkod.pl/php/submit-result.php" id="formularz-1">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

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

    <fieldset form="formularz-1">
      <legend>Miejsce na komentarz</legend>
      <textarea name="komentarz"></textarea>
    </fieldset>

  </body>
</html>

Rezultat

Miejsce na komentarz

Przykładowy element "fieldset" został powiązany z elementem "form" posiadającym atrybut "id" o wartości "formularz-1", ponieważ do wspomnianego elementu "fieldset" został dodany atrybut "form" wraz z wartością "formularz-1".

Atrybut Lokalny

name

Przeznaczenie atrybutu name

Atrybut name wykorzystany wraz z elementem fieldset pozwala nam określić nazwę, jaka powinna zostać przypisana do danego elementu fieldset.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu name

nazwa

Należy podać niepusty ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas nazwy.

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">
      <fieldset name="strefa-komentarza">
        <legend>Miejsce na komentarz</legend>
        <textarea name="komentarz"></textarea>
      </fieldset>

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

  </body>
</html>

Rezultat

Miejsce na komentarz

Nazwą, jaka została przypisana do przykładowego elementu "fieldset", jest nazwa "strefa-komentarza", ponieważ do wspomnianego elementu "fieldset" został dodany atrybut "name" wraz z wartością "strefa-komentarza".