Uzyskiwanie danych od użytkowników za pomocą formularzy

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

Przełącz odpowiedź

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>
To już prawie tag końcowy elementu <form>.
<form-container>
Spróbuj jeszcze raz.
<form>
🎉
<form-element>
Spróbuj jeszcze raz.

Jakiego atrybutu możesz użyć do określenia, gdzie jest przetwarzany <form>?

where
Spróbuj jeszcze raz.
action
Tak. Atrybut action określa miejsce przetwarzania <form>.
href
Spróbuj jeszcze raz.
url
Spróbuj jeszcze raz.

Jaka jest domyślna metoda żądania?

GET
🎉
POST
Spróbuj jeszcze raz.

Zasoby

Element <form>.