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ż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.

<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

Zasoby

• Element HTML formularza
• Sprawdzone metody dotyczące przycisku przesyłania