W poprzednim module omówiliśmy, jak używać elementu <form>
.
W tym module dowiesz się, jak działa formularz i kiedy go użyć.
Czy lepiej użyć elementu <form>
?
Nie zawsze musisz umieszczać elementy sterujące formularzem w elemencie <form>
.
Możesz na przykład dodać element <select>
, aby użytkownicy mogli wybrać kategorię produktów.
Nie potrzebujesz tu elementu <form>
, ponieważ nie przechowujesz ani nie przetwarzasz danych na swoim backendzie.
Jednak w większości przypadków, gdy przechowujesz lub przetwarzasz dane użytkowników,
należy użyć elementu <form>
.
Jak dowiesz się z tego modułu, <form>
zapewnia wiele wbudowanych funkcji przeglądarek, które w innym przypadku nie zostałyby opracowane samodzielnie.
<form>
ma też domyślnie zainstalowane wiele funkcji ułatwień dostępu.
Jeśli chcesz uniknąć ponownego wczytywania strony, gdy użytkownik przesyła formularz,
nadal możesz używać elementu <form>
, ale wzbogać go za pomocą
JavaScript.
Jak działa <form>
?
Wiesz już, że najlepszym sposobem postępowania z danymi użytkowników jest <form>
.
Być może zastanawiasz się teraz, jak działa formularz.
<form>
to kontener z interaktywnymi elementami sterującymi formularza.
<form method="post">
<label for="name">Name</label>
<input type="text" name="name" id="name">
<button formaction="/name">Save</button>
</form>
Jak działa przesyłanie formularza?
Gdy przesyłasz atrybut <form>
, przeglądarka sprawdza atrybuty <form>
. Dane są wysyłane jako GET
lub POST
zgodnie z atrybutem method
. Jeśli nie ma atrybutu method
,
Wysyłane jest żądanie GET
na adres URL bieżącej strony.
Jak możesz uzyskać dostęp do danych z formularza i je przetworzyć?
Przesłane dane mogą być obsługiwane przez kod JavaScript we frontendzie za pomocą żądania GET
,
lub za pomocą kodu w backendzie przy użyciu żądania GET
lub POST
.
Więcej informacji o
typów żądań i przenoszenia danych formularzy.
Po przesłaniu formularza przeglądarka wysyła żądanie do adresu URL, który jest wartością atrybutu action
.
Dodatkowo przeglądarka sprawdza, czy przycisk Prześlij zawiera atrybut formaction
.
W takim przypadku używany jest zdefiniowany w nim adres URL.
Ponadto przeglądarka wyszukuje dodatkowe atrybuty w elemencie <form>
,
na przykład, aby zdecydować, czy należy zweryfikować formularz (novalidate
),
należy użyć autouzupełniania (autocomplete="off"
) lub wybrać kodowanie (accept-charset
).
Spróbuj utworzyć formularz, w którym użytkownicy będą mogli przesłać swój ulubiony kolor.
Dane należy wysyłać w postaci żądania POST
, a adres URL, pod którym będą one przetwarzane, powinien mieć postać /color
.
Jednym z możliwych rozwiązań jest użycie tego formularza:
<form method="post" action="/color"> <label for="color">What is your favorite color?</label> <input type="text" name="color" id="color"> <button>Save</button> </form>
Zapewnianie użytkownikom możliwości przesyłania formularza
Formularz można przesłać na 2 sposoby.
Możesz kliknąć przycisk Prześlij lub nacisnąć Enter
przy dowolnym elemencie sterowania formularzem.
Przycisk Prześlij można dodać na różne sposoby.
Jedną z opcji jest użycie elementu <button>
w formularzu.
Jeśli nie używasz usługi type="button"
, będzie ona działać jako przycisk Prześlij.
Możesz też użyć polecenia <input type="submit" value="Submit">
.
Trzecia opcja to użycie <input type="image" alt="Submit" src="submit.png">
,
aby utworzyć graficzny przycisk Prześlij.
Jednak obecnie, gdy można tworzyć przyciski graficzne za pomocą CSS, nie zalecamy korzystania z elementu type="image"
.
Zezwalaj użytkownikom na przesyłanie plików
Użyj usługi <input type="file">
, aby w razie potrzeby umożliwić użytkownikom przesyłanie i przesyłanie plików.
<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>
Najpierw dodaj do formularza element <input>
z atrybutem type="file"
.
Dodaj atrybut multiple
, jeśli użytkownicy mogą przesyłać wiele plików.
Aby użytkownicy mogli przesyłać pliki, musisz wprowadzić jeszcze jedną zmianę – ustaw w formularzu atrybut enctype
.
Wartością domyślną jest application/x-www-form-urlencoded
.
<form method="post" enctype="multipart/form-data">
…
</form>
Aby mieć pewność, że pliki mogą zostać przesłane, zmień ustawienie na multipart/form-data
.
Bez tego kodowania nie można wysyłać plików za pomocą żądania POST
.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat elementu formularza
Jaka wartość w polu enctype
jest wymagana, aby przesłać pliki?
form-files
multipart/form-files
multipart/form-data
form-data
Czy można wysyłać dane użytkownika bez <form>
Jak przesłać <form>
?
<input type="image">
.<button>
.Enter
.