Autor publikacji
Virtual Patriot - Administrator

form

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu form

Element form reprezentuje formularz HTML.

Dodatkowe artykuły związane z elementem form

Informacje techniczne o elemencie form

kategoria ogólna
kontekst zewnętrzny

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

Przykładowy Kod HTML

<section>
  <h1>Twoje dane</h1>

  <form>
    <p>
      <label>Imię: <input></label>
    </p>

    <p>
      <label>Nazwisko: <input></label>
    </p>

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

Kontekstem zewnętrznym przykładowego elementu "form" jest element "section". Wspomniany element "section" 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 "section", jest prawidłowym kontekstem zewnętrznym dla elementu "form".

kontekst wewnętrzny

zawartość opływająca, lecz nie element form jako element potomek

Przykładowy Kod HTML

<section>
  <h1>Twoje dane</h1>

  <form>
    <p>
      <label>Imię: <input></label>
    </p>

    <p>
      <label>Nazwisko: <input></label>
    </p>

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

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

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<form> ... </form>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

block

Przypuszczalnie domyślne reguły CSS elementu form

form {
  display:block;
}

Interpretacja elementu form

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Interpretuje atrybut novalidate, lecz od wersji "10".

Edge

tak

Opis atrybutów elementu form

Atrybut Lokalny

accept-charset

Przeznaczenie atrybutu accept-charset

Atrybut accept-charset wykorzystany wraz z elementem form pozwala nam określić informację o tym, jaki system kodowania znaków powinien być właściwy dla danych formularza HTML podczas procesu, który następuje po zatwierdzeniu danego formularza HTML przez użytkownika.

Gdy dany element "form" nie posiada atrybutu "accept-charset", wtedy docelowym systemem kodowania znaków jest ten system, który został określony dla danego dokumentu HTML.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu accept-charset

system kodowania znaków

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

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" accept-charset="utf-16">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie">
        </label>
      </p>

      <p>
        <label>
          Podaj kolor:
          <input type="text" name="kolor">
        </label>
      </p>

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

  </body>
</html>

Rezultat

W momencie gdy przykładowy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika, dane przykładowego formularza HTML zostaną zakodowane przez przeglądarkę internetową za pomocą systemu kodowania znaków "utf-16", ponieważ do wspomnianego formularza HTML reprezentowanego przez element "form" został dodany atrybut "accept-charset" wraz z wartością "utf-16".

kombinacja wartości

Możemy podać kilka wartości, oddzielonych od siebie przynajmniej jednym znakiem spacji, dzięki czemu dane danego formularza HTML będą mogły posiadać kilka różnych docelowych systemów kodowania znaków jednocześnie.

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" accept-charset="iso-8859-2 windows-1250">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie">
        </label>
      </p>

      <p>
        <label>
          Podaj kolor:
          <input type="text" name="kolor">
        </label>
      </p>

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

  </body>
</html>

Rezultat

W momencie gdy przykładowy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika, dane przykładowego formularza HTML będą mogły zostać zakodowane przez przeglądarkę internetową za pomocą systemu kodowania znaków "iso-8859-2" oraz za pomocą systemu kodowania znaków "windows-1250", ponieważ do wspomnianego formularza HTML reprezentowanego przez element "form" został dodany atrybut "accept-charset" wraz z następującą kombinacją wartości: "iso-8859-2 windows-1250".

Atrybut Lokalny

action

Przeznaczenie atrybutu action

Atrybut action wykorzystany wraz z elementem form pozwala nam określić adres zasobu internetowego, do którego powinny zostać przekazane dane formularza HTML podczas procesu, który następuje po zatwierdzeniu danego formularza HTML przez użytkownika.

Wartość domyślna

adres dokumentu HTML, w którego zawartości znajduje się dany element form (gdy pominęliśmy atrybut)

adres dokumentu HTML, w którego zawartości znajduje się dany element form (gdy nie podaliśmy wartości)

Wartości atrybutu action

URL

Należy podać niepusty ciąg znaków w formie adresu URL.

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">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie">
        </label>
      </p>

      <p>
        <label>
          Podaj kolor:
          <input type="text" name="kolor">
        </label>
      </p>

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

  </body>
</html>

Rezultat

W momencie gdy przykładowy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika, dane przykładowego formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php" znajdującego się pod adresem "https://webkod.pl/php/submit-result.php", ponieważ do wspomnianego formularza HTML reprezentowanego przez element "form" został dodany atrybut "action" wraz z wartością "https://webkod.pl/php/submit-result.php".

Atrybut Lokalny

autocomplete

Przeznaczenie atrybutu autocomplete

Atrybut autocomplete wykorzystany wraz z elementem form pozwala nam określić czy dla elementów HTML, które mogą posiadać atrybut autocomplete oraz które zostały powiązane z danym formularzem HTML, mechanizm automatycznych podpowiedzi powinien być włączony, czy też nie.

Wartość domyślna

on (w każdej sytuacji)

Wartości atrybutu autocomplete

on

Wartość on oznacza, że mechanizm automatycznych podpowiedzi ma być włączony.

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" autocomplete="on">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie">
        </label>
      </p>

      <p>
        <label>
          Podaj kolor:
          <input type="text" name="kolor">
        </label>
      </p>

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

  </body>
</html>

Rezultat

W momencie wprowadzania wartości (przez użytkownika), do któregoś z dwóch elementów "input", które zostały powiązane z przykładowym formularzem HTML, mechanizm automatycznych podpowiedzi jest włączony, ponieważ do wspomnianego formularza HTML reprezentowanego przez element "form" został dodany atrybut "autocomplete" wraz z wartością "on".

off

Wartość off oznacza, że mechanizm automatycznych podpowiedzi ma być wyłączony.

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" autocomplete="off">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie">
        </label>
      </p>

      <p>
        <label>
          Podaj kolor:
          <input type="text" name="kolor">
        </label>
      </p>

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

  </body>
</html>

Rezultat

W momencie wprowadzania wartości (przez użytkownika), do któregoś z dwóch elementów "input", które zostały powiązane z przykładowym formularzem HTML, mechanizm automatycznych podpowiedzi jest wyłączony, ponieważ do wspomnianego formularza HTML reprezentowanego przez element "form" został dodany atrybut "autocomplete" wraz z wartością "off".

Atrybut Lokalny

enctype

Przeznaczenie atrybutu enctype

Atrybut enctype wykorzystany wraz z elementem form pozwala nam określić informację o tym, jaki sposób kodowania danych powinien być właściwy dla danych formularza HTML podczas procesu, który następuje po zatwierdzeniu danego formularza HTML przez użytkownika.

Wartość domyślna

application/x-www-form-urlencoded (w każdej sytuacji)

Wartości atrybutu enctype

application/x-www-form-urlencoded

Wartość application/x-www-form-urlencoded oznacza sposób kodowania danych, który jest właściwy dla danych formularza HTML, z którym nie został powiązany żaden element HTML, za pośrednictwem którego użytkownik może wybrać plik.

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" enctype="application/x-www-form-urlencoded">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie">
        </label>
      </p>

      <p>
        <label>
          Podaj kolor:
          <input type="text" name="kolor">
        </label>
      </p>

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

  </body>
</html>

Rezultat

W momencie gdy przykładowy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika, dane przykładowego formularza HTML zostaną zakodowane przez przeglądarkę internetową za pomocą sposobu "application/x-www-form-urlencoded", ponieważ do wspomnianego formularza HTML reprezentowanego przez element "form" został dodany atrybut "enctype" wraz z wartością "application/x-www-form-urlencoded".

multipart/form-data

Wartość multipart/form-data oznacza sposób kodowania danych, który jest właściwy dla danych formularza HTML, z którym został powiązany przynajmniej jeden element HTML, za pośrednictwem którego użytkownik może wybrać plik.

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" method="post" enctype="multipart/form-data">
      <label>
        Wybierz plik:
        <input type="file" name="plik">
      </label>

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

  </body>
</html>

Rezultat

W momencie gdy przykładowy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika, dane przykładowego formularza HTML zostaną zakodowane przez przeglądarkę internetową za pomocą sposobu "multipart/form-data", ponieważ do wspomnianego formularza HTML reprezentowanego przez element "form" został dodany atrybut "enctype" wraz z wartością "multipart/form-data".

text/plain

Wartość text/plain oznacza, że dane uzyskane przez przeglądarkę internetową za pośrednictwem danego formularza HTML nie zostaną poddane żadnemu specyficznemu sposobowi kodowania.

Atrybut Lokalny

method

Przeznaczenie atrybutu method

Atrybut method wykorzystany wraz z elementem form pozwala nam określić informację o tym, jaka metoda przekazania danych formularza HTML powinna być właściwa podczas procesu, który następuje po zatwierdzeniu danego formularza HTML przez użytkownika.

Wartość domyślna

get (w każdej sytuacji)

Wartości atrybutu method

get

Wartość get oznacza, że dane uzyskane przez przeglądarkę internetową za pośrednictwem danego formularza HTML zostaną przekazane do określonego zasobu internetowego za pomocą metody GET.

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" method="get">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie">
        </label>
      </p>

      <p>
        <label>
          Podaj kolor:
          <input type="text" name="kolor">
        </label>
      </p>

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

  </body>
</html>

Rezultat

W momencie gdy przykładowy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika, dane przykładowego formularza HTML zostaną przekazane przez przeglądarkę internetową, do zasobu internetowego "submit-result.php" znajdującego się pod adresem "https://webkod.pl/php/submit-result.php", za pomocą metody GET, ponieważ do wspomnianego formularza HTML reprezentowanego przez element "form" został dodany atrybut "method" wraz z wartością "get".

post

Wartość post oznacza, że dane uzyskane przez przeglądarkę internetową za pośrednictwem danego formularza HTML zostaną przekazane do określonego zasobu internetowego za pomocą metody POST.

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" method="post">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie">
        </label>
      </p>

      <p>
        <label>
          Podaj kolor:
          <input type="text" name="kolor">
        </label>
      </p>

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

  </body>
</html>

Rezultat

W momencie gdy przykładowy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika, dane przykładowego formularza HTML zostaną przekazane przez przeglądarkę internetową, do zasobu internetowego "submit-result.php" znajdującego się pod adresem "https://webkod.pl/php/submit-result.php", za pomocą metody POST, ponieważ do wspomnianego formularza HTML reprezentowanego przez element "form" został dodany atrybut "method" wraz z wartością "post".

Atrybut Lokalny

name

Przeznaczenie atrybutu name

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

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" name="formularz-1">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie">
        </label>
      </p>

      <p>
        <label>
          Podaj kolor:
          <input type="text" name="kolor">
        </label>
      </p>

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

  </body>
</html>

Rezultat

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

W zawartości tego samego dokumentu HTML nie mogą znajdować się elementy "form" posiadające tą samą wartość atrybutu "name".

Atrybut Lokalny

novalidate

Przeznaczenie atrybutu novalidate

Atrybut novalidate wykorzystany wraz z elementem form pozwala nam określić czy mechanizm przeglądarki internetowej odpowiedzialny za ustaloną przez nas walidację wartości danych formularza HTML powinien pozostać nieaktywny w momencie próby zatwierdzenia danego formularza HTML przez użytkownika.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

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

Wartości atrybutu novalidate

novalidate

Atrybut novalidate jest atrybutem logicznym 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" novalidate>
      <label>
        Podaj czterocyfrową liczbę:
        <input type="text" name="liczba" pattern="[0-9]{4}" required>
      </label>

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

  </body>
</html>

Rezultat

Mimo tego, że element "input", który został powiązany z przykładowym formularzem HTML, posiada atrybut "pattern" oraz atrybut "required", dana reprezentowana przez element "input" może posiadać dowolną wartość w momencie próby zatwierdzenia przykładowego formularza HTML przez użytkownika, gdyż mechanizm przeglądarki internetowej odpowiedzialny za ustaloną przez nas walidację wartości danych przykładowego formularza HTML jest nieaktywny, ponieważ do wspomnianego formularza HTML reprezentowanego przez element "form" został dodany atrybut "novalidate".

Atrybut Lokalny

target

Przeznaczenie atrybutu target

Atrybut target wykorzystany wraz z elementem form pozwala nam określić docelowy kontekst (miejsce), gdzie powinien zostać wczytany zasób internetowy, którego adres określa wartość atrybutu action danego formularza HTML.

Docelowe wczytanie się zasobu internetowego nastąpi w momencie gdy dany formularz HTML zostanie zatwierdzony przez użytkownika.

Wartość domyślna

_self (gdy pominęliśmy atrybut)

_blank (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu target

_blank

Wartość _blank wskazuje na nowy kontekst przeglądarki internetowej, na nowe miejsce, np. na nowe okno przeglądarki internetowej (nową zakładkę).

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" target="_blank">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie">
        </label>
      </p>

      <p>
        <label>
          Podaj kolor:
          <input type="text" name="kolor">
        </label>
      </p>

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

  </body>
</html>

Rezultat

W momencie gdy przykładowy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika, dane przykładowego formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do nowego okna przeglądarki internetowej, ponieważ do wspomnianego formularza HTML reprezentowanego przez element "form" został dodany atrybut "target" wraz z wartością "_blank".

_parent

Wartość _parent wskazuje na kontekst rodzica kontekstu przeglądarki internetowej, do którego należy dany element form.

Przykładowy Kod HTML

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

    <iframe src="https://webkod.pl/files/html/form-target-parent.html"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: form-target-parent.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut target - wartość _parent</title>
      </head>
      <body>

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

          <p>
            <label>
              Podaj kolor:
              <input type="text" name="kolor">
            </label>
          </p>

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

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Kontekstem przeglądarki internetowej, do którego należy przykładowy formularz HTML, jest element "iframe", którego kontekstem rodzicem w tym wypadku jest aktualne okno przeglądarki internetowej, dlatego w momencie gdy przykładowy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika, dane przykładowego formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do aktualnego okna przeglądarki internetowej, ponieważ do wspomnianego formularza HTML reprezentowanego przez element "form" został dodany atrybut "target" wraz z wartością "_parent".

Jeżeli kontekst przeglądarki internetowej, do którego należy dany element "form", nie posiada kontekstu rodzica, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _self.

_self

Wartość _self wskazuje na kontekst przeglądarki internetowej, do którego należy dany element form, np. na aktualne okno przeglądarki internetowej (aktualną zakładkę) lub na aktualny element iframe.

Przykładowy Kod HTML

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

    <iframe src="https://webkod.pl/files/html/form-target-self.html"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: form-target-self.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut target - wartość _self</title>
      </head>
      <body>

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

          <p>
            <label>
              Podaj kolor:
              <input type="text" name="kolor">
            </label>
          </p>

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

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Kontekstem przeglądarki internetowej, do którego należy przykładowy formularz HTML, jest element "iframe", dlatego w momencie gdy przykładowy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika, dane przykładowego formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do elementu "iframe", ponieważ do wspomnianego formularza HTML reprezentowanego przez element "form" został dodany atrybut "target" wraz z wartością "_self".

_top

Wartość _top wskazuje na kontekst najdalszego przodka kontekstu przeglądarki internetowej, do którego należy dany element form.

Przykładowy Kod HTML

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

    <iframe src="https://webkod.pl/files/html/form-target-top.html"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: form-target-top.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut target - wartość _top</title>
      </head>
      <body>

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

          <p>
            <label>
              Podaj kolor:
              <input type="text" name="kolor">
            </label>
          </p>

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

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Kontekstem przeglądarki internetowej, do którego należy przykładowy formularz HTML, jest element "iframe", którego najdalszym kontekstem przodkiem w tym wypadku jest aktualne okno przeglądarki internetowej, dlatego w momencie gdy przykładowy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika, dane przykładowego formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do aktualnego okna przeglądarki internetowej, ponieważ do wspomnianego formularza HTML reprezentowanego przez element "form" został dodany atrybut "target" wraz z wartością "_top".

Jeżeli kontekst przeglądarki internetowej, do którego należy dany element "form", nie posiada kontekstu najdalszego przodka, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _self.

iframe name

Należy podać wartość atrybutu name interesującego nas elementu iframe, dzięki czemu interesujący nas element iframe stanie się docelowym kontekstem.

Przykładowy Kod HTML

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

    <iframe name="ramka-1"></iframe>

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

      <p>
        <label>
          Podaj kolor:
          <input type="text" name="kolor">
        </label>
      </p>

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

  </body>
</html>

Rezultat

W momencie gdy przykładowy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika, dane przykładowego formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do elementu "iframe" posiadającego atrybut "name" o wartości "ramka-1", ponieważ do wspomnianego formularza HTML reprezentowanego przez element "form" został dodany atrybut "target" wraz z wartością "ramka-1".

Jeżeli w kontekście przeglądarki internetowej, do którego należy dany element "form" lub w kontekście rodzicu lub w kontekście przodku, nie znajduje się element iframe o wartości atrybutu name, którą podaliśmy, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _blank.

Możemy podać również wartość atrybutu name interesującego nas elementu object, lecz tylko wtedy gdy interesujący nas element object reprezentuje zasób internetowy pochodzący z technologii HTML.