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
Aby wybrać lokalizację skryptu, użyj atrybutu action
.
<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
Jak wygląda tag początkowy elementu formularza?
<form-element>
</form>
<form>
<form-container>
Za pomocą którego atrybutu możesz określić miejsce przetwarzania obiektu <form>
?
action
url
where
href
Jaka jest domyślna metoda żądania?
POST
GET