W poprzednim module omówiliśmy, jak używać elementu <form>
.
W tym module dowiesz się, jak działa formularz i kiedy go używać.
Czy należy używać elementu <form>
?
Nie zawsze musisz umieszczać elementy sterujące formularza w elemencie <form>
.
Możesz na przykład podać element <select>
, który umożliwia użytkownikom wybranie kategorii produktów.
Nie potrzebujesz tutaj elementu <form>
, ponieważ nie przechowujesz ani nie przetwarzasz danych w swoim backendzie.
Jednak w większości przypadków, gdy przechowujesz lub przetwarzasz dane użytkowników, należy używać elementu <form>
.
Jak dowiesz się z tego modułu, <form>
udostępnia wiele funkcji wbudowanych w przeglądarkach, które w innym przypadku trzeba by było utworzyć samodzielnie.
<form>
ma też wbudowanych wiele ułatwień dostępu.
Jeśli chcesz uniknąć ponownego ładowania strony, gdy użytkownik przesyła formularz, możesz nadal używać elementu <form>
, ale wzbogacić go za pomocą JavaScript.
Jak działa <form>
?
Wiesz już, że najlepszym sposobem postępowania z danymi użytkownika jest <form>
.
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 przebiega przesyłanie formularza?
Gdy przesyłasz atrybut <form>
, przeglądarka sprawdza atrybuty <form>
. Dane są wysyłane jako żądanie GET
lub POST
zgodnie z atrybutem method
. Jeśli brak atrybutu method
, na adres URL bieżącej strony wysyłane jest żądanie GET
.
Jak możesz uzyskać dostęp do danych formularza i jak je przetworzyć?
Przesłane dane można obsługiwać za pomocą JavaScriptu w frontendzie za pomocą żądania GET
albo za pomocą kodu w backendzie z użyciem żądania GET
lub POST
.
Dowiedz się więcej o typach żądań i przenoszeniu danych formularzy.
Po przesłaniu formularza przeglądarka wysyła żądanie do adresu URL, który jest wartością atrybutu action
.
Przeglądarka sprawdza też, czy przycisk Prześlij ma atrybut formaction
.
W takim przypadku używany jest zdefiniowany w nim adres URL.
Poza tym przeglądarka wyszukuje dodatkowe atrybuty w elemencie <form>
, np. aby zdecydować, czy należy zweryfikować formularz (novalidate
), użyć autouzupełniania (autocomplete="off"
) czy użyć kodowania (accept-charset
).
Spróbuj utworzyć formularz, w którym użytkownicy będą mogli przesyłać informacje o ulubionym kolorze.
Dane należy wysyłać jako żądanie POST
, a adres URL, pod którym będą przetwarzane dane, 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>
Sprawdzanie, czy użytkownicy mogą przesłać formularz
Formularz można przesłać na 2 sposoby.
Możesz kliknąć przycisk Prześlij lub nacisnąć Enter
podczas korzystania z dowolnego elementu sterującego formularzem.
Przycisk Prześlij można dodać na różne sposoby.
Jedną z możliwości jest użycie w formularzu elementu <button>
.
Dopóki nie użyjesz atrybutu type="button"
, będzie on działać jak przycisk Prześlij.
Możesz też użyć właściwości <input type="submit" value="Submit">
.
Trzecią opcją jest użycie <input type="image" alt="Submit" src="submit.png">
do utworzenia graficznego przycisku Prześlij.
Jednak teraz, gdy już można tworzyć przyciski graficzne za pomocą CSS, nie zalecamy używania type="image"
.
Umożliwianie użytkownikom przesyłania 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 mają mieć możliwość przesyłania wielu plików.
Aby użytkownicy mogli przesyłać pliki, musisz wprowadzić jeszcze jedną zmianę – ustaw atrybut enctype
w formularzu.
Wartością domyślną jest application/x-www-form-urlencoded
.
<form method="post" enctype="multipart/form-data">
…
</form>
Aby mieć pewność, że pliki będzie można przesyłać, zmień go na multipart/form-data
.
Bez tego kodowania nie można wysyłać plików za pomocą żądania POST
.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o elemencie formularza
Jaka wartość w polu enctype
jest wymagana, by przesyłać pliki?
multipart/form-data
multipart/form-files
form-data
form-files
Czy można wysyłać dane użytkownika bez urządzenia <form>
?
Jak przesłać <form>
?
<button>
.Enter
.<input type="image">
.