# Formularz HTML - metoda przekazania danych

Spójrzmy na następujący kod HTML:

```html
<form action="./php/submit-result.php">
  <p>
    <label>
      Jaki jest Twój ulubiony kwiat?
      <input type="text" name="ulubiony-kwiat">
    </label>
  </p>

  <p>
    <label>
      Dlaczego ten kwiat?
      <textarea name="powod"></textarea>
    </label>
  </p>

  <p>
    <label>
      Jaki jest Twój ulubiony rodzaj muzyki?
      <select name="rodzaj-muzyki">
        <option>inny</option>
        <option>rock</option>
        <option>pop</option>
        <option>techno</option>
        <option>trance</option>
      </select>
    </label>
  </p>

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

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FEbdqw6E8hb6FZX8nBwjk%2Fimage.png?alt=media&#x26;token=66c6e097-7f39-4b66-98c3-7cee29b0658b" alt=""><figcaption></figcaption></figure>

Spróbujmy przyjrzeć się procesowi, który następuje w momencie kliknięcia na przycisk zatwierdzający nasz przykładowy formularz HTML.

W momencie kliknięcia na przycisk zatwierdzający formularz HTML jeden z mechanizmów przeglądarki internetowej odszukuje wszystkie elementy HTML, które zostały powiązane z formularzem HTML, z którym to formularzem HTML został powiązany wspomniany przycisk zatwierdzający.

Mowa tu przede wszystkim o tych elementach HTML, które mogą reprezentować daną, czyli informację składającą się ze swojej nazwy oraz ze swojej wartości.

W naszym przykładowym kodzie HTML elementami HTML, które mogą reprezentować daną są: element `input`, element `texarea`, element `select`, jak również element `button`.

```html
<form action="./php/submit-result.php">
  <p>
    <label>
      Jaki jest Twój ulubiony kwiat?
      <input type="text" name="ulubiony-kwiat">
    </label>
  </p>

  <p>
    <label>
      Dlaczego ten kwiat?
      <textarea name="powod"></textarea>
    </label>
  </p>

  <p>
    <label>
      Jaki jest Twój ulubiony rodzaj muzyki?
      <select name="rodzaj-muzyki">
        <option>inny</option>
        <option>rock</option>
        <option>pop</option>
        <option>techno</option>
        <option>trance</option>
      </select>
    </label>
  </p>

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

Tylko elementy HTML, dla których określiliśmy nazwę danej (za pomocą wartości atrybutu `name`) mogą zostać zauważone przez wspomniany mechanizm przeglądarki internetowej (dlatego element `button` w tej sytuacji nie zostanie zauważony przez wspomniany mechanizm przeglądarki internetowej).

Załóżmy, że do naszego przykładowego elementu `input` posiadającego atrybut `name` o wartości `ulubiony-kwiat` wprowadziliśmy ciąg znaków `róża`.

Załóżmy, że do naszego przykładowego elementu `textarea` posiadającego atrybut `name` o wartości `powod` wprowadziliśmy ciąg znaków `ponieważ róża to symbol miłości`.

Załóżmy, że z opcji wyboru należących do naszego przykładowego elementu `select` posiadającego atrybut `name` o wartości `rodzaj-muzyki` wybraliśmy opcję posiadającą ciąg znaków `trance`.

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FdEzUPfq0AKzgQF1LtRaW%2Fimage.png?alt=media&#x26;token=b6f5478f-2c99-45ca-a91c-8b781a452e17" alt=""><figcaption></figcaption></figure>

Gdy w tym momencie klikniemy na przycisk zatwierdzający nasz przykładowy formularz HTML, jeden z mechanizmów przeglądarki internetowej odnajdzie: element `input` posiadający atrybut `name` o wartości `ulubiony-kwiat`, element `textarea` posiadający atrybut `name` o wartości `powod` oraz element `select` posiadający atrybut `name` o wartości `rodzaj-muzyki`.

W następnej kolejności na podstawie danych reprezentowanych przez wspomniane elementy HTML jeden z mechanizmów przeglądarki internetowej utworzy jeden zbiór danych, który między innymi będzie zawierał dane składające się ze swoich nazw oraz wartości.

W naszym przykładzie wspomniany zbiór danych będzie posiadał: daną o nazwie `ulubiony-kwiat` oraz wartości `róża`, daną o nazwie `powod` oraz wartości `ponieważ róża to symbol miłości`, daną o nazwie `rodzaj-muzyki` oraz wartości `trance`.

W następnej kolejności do zasobu internetowego znajdującego się pod wskazanym przez nas adresem zostanie przekazany wspomniany zbiór danych.

W naszym przykładzie wspomnianym zasobem internetowym jest zasób internetowy znajdujący się pod adresem `./php/submit-result.php`, ponieważ nasz przykładowy element `form` posiada atrybut `action` wraz z wartością `./php/submit-result.php`.

Wspomniane przekazanie zbioru danych do zasobu internetowego dokonywane jest przez jeden z mechanizmów przeglądarki internetowej za pomocą metody, którą możemy określić za pomocą wartości atrybutu `method` elementu `form`.

Zazwyczaj do wyboru mamy dwie metody. Metodę GET lub metodę POST. Domyślną metodą jest metoda GET. Wspomniane metody różnią się od siebie kilkoma rzeczami. O niektórych różnicach powiemy sobie w następnej kolejności.

Metoda GET wymusza na przeglądarce internetowej, aby mechanizm przeglądarki internetowej odpowiedzialny za przekazanie danych formularza HTML do określonego przez nas zasobu internetowego dodał w z góry określonej formie wszystkie wspomniane dane do adresu wspomnianego zasobu internetowego.

Oznacza to, że w ten sposób przekazywane dane formularza HTML mogą być dostępne pod określonym adresem, który może zostać zapamiętany oraz który może być przechowywany w historii przeglądarki internetowej.

Przykład:

```html
<form action="./php/submit-result.php" method="get">
  <p>
    <label>
      Jaki jest Twój ulubiony kwiat?
      <input type="text" name="ulubiony-kwiat">
    </label>
  </p>

  <p>
    <label>
      Dlaczego ten kwiat?
      <textarea name="powod"></textarea>
    </label>
  </p>

  <p>
    <label>
      Jaki jest Twój ulubiony rodzaj muzyki?
      <select name="rodzaj-muzyki">
        <option>inny</option>
        <option>rock</option>
        <option>pop</option>
        <option>techno</option>
        <option>trance</option>
      </select>
    </label>
  </p>

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

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FFJ9FSrZo2KftqaQvVIKI%2Fimage.png?alt=media&#x26;token=f1ee362b-7fc0-4044-bd92-7dae444185dd" alt=""><figcaption></figcaption></figure>

Po zatwierdzeniu przez nas naszego przykładowego formularza HTML do adresu zasobu internetowego znajdującego się pod adresem `./php/submit-result.php` zostanie dołączony następujący ciąg znaków: `?ulubiony-kwiat=róża&powod=ponieważ+róża+to+symbol+miłości&rodzaj-muzyki=inny`.

Oznacza to, że jeżeli ktoś zdobędzie adres `./php/submit-result.php?ulubiony-kwiat=róża&powod=ponieważ+róża+to+symbol+miłości&rodzaj-muzyki=inny`, a następnie wpisze wspomniany adres do paska znajdującego się w przeglądarce internetowej, w celu przeniesienia się pod wspomniany adres, wtedy do zasobu internetowego znajdującego się pod adresem `./php/submit-result.php` zostaną przekazane dane bez konieczności wykorzystywania do tego celu formularza HTML.

Gdy tworzymy formularz HTML, za pomocą którego chcemy uzyskać od użytkownika odwiedzającego nasz dokument HTML informacje poufne (np. login użytkownika, hasło użytkownika itp.), wtedy nie należy korzystać z metody GET, ponieważ wspomniane informacje mogą być dostępne pod określonym adresem, na przykład adresem `./php/logowanie.php?login=jan1234&password=56789`. Innymi słowy każda osoba znająca adres `./php/logowanie.php?login=jan1234&password=56789` będzie mogła zalogować się na konto użytkownika `jan1234`.

Z metody GET zazwyczaj korzysta się w sytuacji gdy chcemy uzyskać, jakąś konkretną informację (za pośrednictwem zasobu internetowego, do którego zostaną przekazane dane formularza HTML), która to informacja nie jest informacją poufną (na przykład podając numer książki uzyskamy informacje o interesującej nas książce).

Metoda GET posiada ograniczenie ze względu na ilość danych, które mogą zostać przekazane za pomocą wspomnianej metody GET, ponieważ adres URL może posiadać ograniczenie ze względu na maksymalną długość.

Wszystkie wymienione ograniczenia oraz niebezpieczeństwa niweluje metoda POST (co nie oznacza, że nigdy nie należy korzystać z metody GET).

Przykład:

```html
<form action="./php/submit-result.php" method="post">
  <p>
    <label>
      Jaki jest Twój ulubiony kwiat?
      <input type="text" name="ulubiony-kwiat">
    </label>
  </p>

  <p>
    <label>
      Dlaczego ten kwiat?
      <textarea name="powod"></textarea>
    </label>
  </p>

  <p>
    <label>
      Jaki jest Twój ulubiony rodzaj muzyki?
      <select name="rodzaj-muzyki">
        <option>inny</option>
        <option>rock</option>
        <option>pop</option>
        <option>techno</option>
        <option>trance</option>
      </select>
    </label>
  </p>

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

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FMcyUc6YE83UPDLRCpHkP%2Fimage.png?alt=media&#x26;token=991ccb4e-7429-414e-9434-05c581e1227d" alt=""><figcaption></figcaption></figure>

Po zatwierdzeniu przez nas naszego przykładowego formularza HTML do adresu zasobu internetowego znajdującego się pod adresem `./php/submit-result.php` nie zostanie dołączony żaden dodatkowy ciąg znaków.
