Formularz HTML - metoda przekazania danych
- Data publikacji
- Ostatnio edytowano
Spójrzmy na następujący kod HTML:
<form action="https://webkod.pl/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:
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.
<form action="https://webkod.pl/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.
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 https://webkod.pl/php/submit-result.php, ponieważ nasz przykładowy element form posiada atrybut action wraz z wartością https://webkod.pl/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:
<form action="https://webkod.pl/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:
Po zatwierdzeniu przez nas naszego przykładowego formularza HTML do adresu zasobu internetowego znajdującego się pod adresem https://webkod.pl/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 https://webkod.pl/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 https://webkod.pl/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 https://webkod.pl/php/logowanie.php?login=jan1234&password=56789. Innymi słowy każda osoba znająca adres https://webkod.pl/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:
<form action="https://webkod.pl/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:
Po zatwierdzeniu przez nas naszego przykładowego formularza HTML do adresu zasobu internetowego znajdującego się pod adresem https://webkod.pl/php/submit-result.php nie zostanie dołączony żaden dodatkowy ciąg znaków.