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

Dzięki temu wprowadzeniu dowiesz się, jak korzystać z formularza w internecie. .

Wyobraź sobie, że chcesz zapytać użytkowników swojej witryny o ich ulubione zwierzę. Na początek musisz znaleźć sposób na zebranie danych.

Jak to zrobić za pomocą kodu HTML?

W języku HTML możesz to zrobić, korzystając z elementu formularza (<form>), <input> z <label> i prześlij <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>, w tagu początkowym i tagu końcowym </form>.

Między tagiem początkowym a końcowym możesz umieścić elementy formularza takie jak <input> i <textarea> dla różnych rodzajów danych wejściowych użytkownika. Więcej informacji o elementach formularzy znajdziesz w następnym module.

Gdzie są przetwarzane dane?

Po przesłaniu formularza (na przykład po kliknięciu przycisku 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świetla się formularz.

Załóżmy, że chcesz, aby skrypt działał na poziomie https://web.dev przetwarzania danych z formularza. Jak to zrobić? Wypróbuj

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

Poprzedni przykład wysyła żądanie do funkcji https://example.com/animals. Skrypt w backendzie example.com może obsługiwać żądania wysyłane do /animals. i przetwarza dane z formularza.

Jak dane są przesyłane?

Domyślnie dane formularzy są wysyłane jako żądanie GET, z dołączonymi danymi do adresu URL. Jeśli użytkownik prześle słowo „żaba” w powyższym przykładzie przeglądarka wysyła żądanie na następujący adres URL:

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

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

Jeśli chcesz, możesz polecić formularzowi użycie żądania POST, zmieniając atrybut metody.

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

Przy użyciu funkcji POST dane są umieszczane w sekcji treści prośby.

Dane nie będą widoczne w adresie URL. Dostęp do nich będzie możliwy tylko za pomocą skryptu frontendu lub backendu.

Której metody użyjesz?

Istnieją przypadki użycia obu metod.

W formularzach, które przetwarzają dane wrażliwe, użyj metody POST. Dane są zaszyfrowane (jeśli używasz 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ć, używaj metody GET. Dzięki temu dane zostaną dodane do historii przeglądarki w miarę jak w adresie URL. Często jest to używane w formularzach wyszukiwania. W ten sposób możesz dodać stronę z wynikami wyszukiwania do zakładek.

Wiesz już, czym jest element formularza. Czas dowiedzieć się więcej o tym, polami formularzy, aby uczynić je interaktywnymi.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat elementu formularza

Zasoby

Element <form>.