Ostatnio edytowany:

fieldset

Autor: Virtual Patriot

Przeznaczenie elementu fieldset

Element fieldset reprezentuje grupę elementów HTML formularza HTML, które powinny być ze sobą tematycznie powiązane.

Dodatkowe techniczne informacje 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
  • zawartość opływająca (wyłącznie po dokładnie jednym ewentualnym elemencie legend)

    Przykładowy Kod HTML

    <form>
      <fieldset>
        <h2>Twoje dane</h2>
    
        <label>Podaj imię: <input></label>
        <label>Podaj 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
składnia HTML
  • <fieldset> ... </fieldset>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • nigdy
CSS display
  • block

Dodatkowe domyślne reguły CSS elementu fieldset

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

Interpretacja elementu fieldset

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 fieldset

disabled

Przeznaczenie atrybutu disabled

Atrybut disabled wykorzystany wraz z elementem fieldset określa czy elementy HTML znajdujące się w zawartości danego elementu fieldset oraz mogące zostać wyłączone z interakcji z użytkownikiem powinny zostać ze wspomnianej interakcji wyłączone.

Wspomniane wyłączenie z interakcji nie dotyczy elementów HTML, które znajdują się w zawartości elementu legend należącego do wspomnianego elementu "fieldset".

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, z którym 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>

    <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>

  </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" zostały ze wspomnianej interakcji wyłączone, ponieważ do wspomnianego elementu "fieldset" został dodany atrybut "disabled".

form

Przeznaczenie atrybutu form

Atrybut form wykorzystany wraz z elementem fieldset określa, z którym elementem form powinien zostać powiązany dany element 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="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>

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

  </body>
</html>

Rezultat

Miejsce na komentarz

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

name

Przeznaczenie atrybutu name

Atrybut name wykorzystany wraz z elementem fieldset określa 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="http://webkod.pl/php/submit-result.php">
      <fieldset name="strefa-komentarza">
        <legend>Miejsce na komentarz</legend>

        <p>
          <textarea name="komentarz"></textarea>
        </p>
      </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".