Dzięki temu wprowadzeniu do elementu formularza dowiesz się, jak korzystać z formularza w internecie.
Wyobraź sobie, że chcesz zapytać użytkowników w swojej witrynie o ich ulubione zwierzę. Najpierw musisz określić sposób gromadzenia danych.
Jak to się robi za pomocą kodu HTML?
W języku HTML możesz to zrobić za pomocą elementu formularza (<form>
), elementu <input>
z atrybutem <label>
i przesłania <button>
.
Co to jest element formularza?
<form>
<label for="animal">What is your favorite animal?</label>
<input type="text" id="animal" name="animal">
<button>Save</button>
</form>
Element formularza składa się z tagu początkowego <form>
, opcjonalnych atrybutów zdefiniowanych w tagu początkowym i tagu końcowego </form>
.
Między tagiem początkowym a końcowym możesz umieścić elementy formularza takie jak <input>
i <textarea>
, aby umożliwić użytkownikom wpisywanie różnego typu danych.
Więcej informacji o elementach formularzy znajdziesz w następnym module.
Gdzie są przetwarzane dane?
Po przesłaniu formularza (np. gdy użytkownik kliknie przycisk Prześlij) przeglądarka wyśle żądanie. Skrypt może odpowiedzieć na to żądanie i przetworzyć dane.
Domyślnie żądanie jest wysyłane do strony, na której wyświetla się formularz.
Załóżmy, że chcesz uruchomić skrypt pod adresem https://web.dev
, który przetwarza dane formularza. Jak to zrobić?
Wypróbuj
Lokalizację skryptu możesz wybrać za pomocą atrybutu action
.
<form action="https://example.com/animals"> ... </form>
Poprzedni przykład wysyła żądanie do https://example.com/animals
.
Skrypt w backendzie example.com
może obsługiwać żądania do /animals
i przetwarzać dane z formularza.
Jak są przenoszone dane?
Domyślnie dane formularza są wysyłane jako żądanie GET
, a przesłane dane są dołączane do adresu URL.
Jeśli w przykładzie powyżej użytkownik prześle słowo „frog” (żaba), przeglądarka wyśle żądanie na następujący adres URL:
https://example.com/animals?animal=frog
W takim przypadku możesz uzyskać dostęp do danych w frontendzie lub backendzie, pobierając dane z adresu URL.
Jeśli chcesz, możesz poinstruować formularz, aby używał żądania POST
, zmieniając atrybut „method”.
<form method="post">
...
</form>
W przypadku POST
dane są umieszczane w treści żądania.
Dane nie będą widoczne w adresie URL, a dostęp do nich będzie możliwy tylko za pomocą frontendu lub skryptu backendu.
Jakiej metody użyjesz?
Każda z tych metod ma zastosowanie.
W przypadku formularzy przetwarzających dane wrażliwe używaj metody POST
.
Dane te są szyfrowane (w przypadku korzystania z protokołu HTTPS) i dostępne tylko dla skryptu backendu, który przetwarza żądanie.
Dane nie są widoczne w adresie URL. Typowy przykład to formularz logowania.
Jeśli dane można udostępniać, możesz użyć metody GET
.
Dzięki temu dane zawarte w adresie URL będą dodawane do historii przeglądania.
Często jest ona używana w formularzach wyszukiwania. W ten sposób możesz dodać zakładkę do strony wyników wyszukiwania.
Skoro znasz już sam element formularza, czas dowiedzieć się więcej o polach formularzy, aby zwiększyć interaktywność formularzy.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o elemencie formularza
Jak wygląda tag początkowy elementu formularza?
</form>
<form>
.<form-container>
<form>
<form-element>
Jakiego atrybutu możesz użyć do określenia, gdzie jest przetwarzany <form>
?
where
action
action
określa miejsce przetwarzania <form>
.href
url
Jaka jest domyślna metoda żądania?
GET
POST