Wyświetlanie szczegółów elementu formularza

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.

<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

Zasoby

• element HTML formularza,
• Sprawdzone metody przesyłania przycisków