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

Poznaj podstawy korzystania z formularza w internecie dzięki temu wprowadzeniu do elementu formularza.

Załóżmy, że chcesz zapytać użytkowników swojej witryny o ich ulubione zwierzę. Pierwszym krokiem jest znalezienie sposobu zbierania danych.

W HTML-u możesz to zrobić za pomocą elementu formularza (<form>), elementu <input> z atrybutem <label> i przycisku przesyłania <button>.

<form>
  <label for="animal">What is your favorite animal?</label>
  <input type="text" id="animal" name="animal">
  <button>Save</button>
</form>

Czym jest element formularza?

Element formularza składa się z tagu otwierającego <form>, opcjonalnych atrybutów zdefiniowanych w tagu otwierającym i tagu zamykającego </form>.

Między tagami otwierającym i zamykającym możesz umieścić elementy formularza, takie jak <input>i <textarea>, aby umożliwić użytkownikom wprowadzanie różnych rodzajów danych. Więcej informacji o elementach formularza znajdziesz w następnym module.

Gdzie są przetwarzane dane?

Gdy formularz zostanie przesłany (np. gdy użytkownik kliknie przycisk Prześlij), przeglądarka wysyła żądanie. Skrypt może odpowiedzieć na to żądanie i przetworzyć dane.

Domyślnie żądanie jest wysyłane do strony, na której wyświetlany jest formularz.

Załóżmy, że chcesz, aby skrypt uruchamiany o godzinie https://web.dev przetwarzał dane z formularza. Jak to zrobisz? Wypróbuj na CodePen

Przełącz odpowiedź

Lokalizację skryptu możesz wybrać za pomocą atrybutu action.

      <form action="https://example.com/animals"></form>

W poprzednim przykładzie wysyłamy żądanie do https://example.com/animals. Skrypt na serwerze backendu example.com może obsługiwać żądania wysyłane do /animals i przetwarzać dane z formularza.

Jak dane są przesyłane?

Domyślnie dane formularza są wysyłane jako żądanie GET, a przesłane dane są dołączane do adresu URL. Jeśli użytkownik wpisze w poprzednim przykładzie słowo „frog”, przeglądarka wyśle żądanie na ten adres URL:

https://example.com/animals?animal=frog

W takim przypadku możesz uzyskać dostęp do danych w interfejsie lub w backendzie, pobierając je z adresu URL.

Jeśli chcesz, możesz zmienić atrybut metody, aby formularz używał żądania POST.

<form method="post">
...
</form>

Za pomocą POST dane są umieszczane w treści żądania.

Dane nie będą widoczne w adresie URL i będą dostępne tylko ze skryptu frontendowego lub backendowego.

Którą metodę należy zastosować?

Obie metody mają swoje zastosowania.

W przypadku formularzy przetwarzających dane wrażliwe używaj metody POST. Dane są szyfrowane (jeśli używasz protokołu HTTPS) i dostępne tylko dla skryptu backendu, który przetwarza żądanie. Dane nie są widoczne w adresie URL. Typowym przykładem jest formularz logowania.

Jeśli dane można udostępniać, możesz użyć metody GET. Następnie dane są dodawane do historii przeglądarki, ponieważ są uwzględnione w adresie URL. Jest to często wykorzystywane w formularzach wyszukiwania. Umożliwia to dodanie strony wyników wyszukiwania do zakładek.

Znasz już element formularza. Teraz dowiesz się więcej o polach formularza, dzięki którym Twoje formularze będą interaktywne.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o elemencie formularza

Jak wygląda tag otwierający elementu formularza?

</form>
Prawie, to tag zamykający element <form>.
<form-container>
Spróbuj jeszcze raz.
<form>
🎉 Zgadza się!
<form-element>
Spróbuj jeszcze raz.

Którego atrybutu możesz użyć, aby określić, gdzie jest przetwarzany <form>?

where
Spróbuj jeszcze raz.
action
Tak, atrybut action określa, gdzie jest przetwarzany element <form>.
href
Spróbuj jeszcze raz.
url
Spróbuj jeszcze raz.

Jaka jest domyślna metoda żądania?

GET
🎉 Zgadza się!
POST
Spróbuj jeszcze raz.

Zasoby

Element <form>.