Wyświetlanie szczegółów elementu formularza

Z poprzedniego modułu wiesz już, jak używać elementu <form>. Z tego modułu dowiesz się, jak działa formularz i kiedy go używać.

Czy warto użyć elementu <form>?

Elementów sterujących formularza nie musisz umieszczać w elemencie <form>. Możesz na przykład udostępnić element <select>, aby użytkownicy mogli wybrać kategorię produktu. Nie musisz tu używać elementu <form>, ponieważ nie przechowujesz ani nie przetwarzasz danych na serwerze.

Jednak w większości przypadków, gdy przechowujesz lub przetwarzasz dane użytkowników, powinieneś użyć elementu <form>. Z tego modułu dowiesz się, że korzystanie z <form> zapewnia dostęp do wielu wbudowanych funkcji przeglądarek, które w przeciwnym razie musiałbyś tworzyć samodzielnie. <form> ma też domyślnie wbudowane wiele funkcji ułatwień dostępu. Jeśli chcesz uniknąć ponownego wczytywania strony po przesłaniu formularza przez użytkownika, możesz nadal używać elementu <form>, ale wzbogacić go za pomocą JavaScript.

Jak działa <form>?

Dowiedz się, że <form> to najlepszy sposób na przetwarzanie danych użytkowników. Zastanawiasz się teraz, jak działa formularz?

<form> to element zawierający interaktywne elementy sterujące formularzem.

<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 formularzy?

Gdy przesyłasz <form>, przeglądarka sprawdza atrybuty <form>. Dane są wysyłane jako żądanie GETlub POST w zależności od atrybutu method. Jeśli atrybut method jest nieobecny, wysyłana jest prośba GET do adresu URL bieżącej strony.

Jak możesz uzyskać dostęp do danych z formularza i je przetwarzać? Przesłane dane mogą być obsługiwane przez JavaScript na fronendzie za pomocą żądania GET lub przez kod na zapleczu za pomocą żądania GET lub POST. Dowiedz się więcej o typach próśb i przenoszeniu danych formularza.

Po przesłaniu formularza przeglądarka wysyła żądanie do adresu URL, który jest wartością atrybutu action. Ponadto sprawdza, czy przycisk Prześlij ma atrybut formaction. W takim przypadku używany jest zdefiniowany tam adres URL.

Ponadto przeglądarka sprawdza dodatkowe atrybuty elementu <form>, aby na przykład zdecydować, czy należy sprawdzić poprawność formularza (novalidate), użyć autouzupełniania (autocomplete="off") lub jakiego kodowania użyć (accept-charset).

Spróbuj utworzyć formularz, w którym użytkownicy będą mogli podać swój ulubiony kolor. Dane powinny być wysyłane jako żądanie POST, a adres URL, pod którym będą przetwarzane, to /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>

Zapewnij użytkownikom możliwość przesyłania formularza

Formularz można przesłać na 2 sposoby. Możesz kliknąć przycisk Prześlij lub nacisnąć Enter podczas korzystania z elementu formularza.

Przycisk Prześlij możesz dodać na różne sposoby. Jedną z opcji jest użycie w formularzu elementu <button>. Dopóki nie używasz type="button", przycisk działa jak przycisk Prześlij. Inną opcją jest użycie <input type="submit" value="Submit">.

Trzecią opcją jest użycie <input type="image" alt="Submit" src="submit.png">, aby utworzyć graficzny przycisk Prześlij. Obecnie można jednak tworzyć przyciski graficzne za pomocą CSS, więc nie zalecamy używania type="image".

Zezwalanie użytkownikom na przesyłanie plików

Użyj opcji <input type="file">, aby umożliwić użytkownikom przesyłanie i przekazywanie plików w razie potrzeby.

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

Najpierw dodaj do formularza element <input> z elementem type="file". Dodaj atrybut multiple, jeśli użytkownicy mają mieć możliwość przesyłania wielu plików.

Aby umożliwić użytkownikom przesyłanie plików, musisz wprowadzić jeszcze jedną zmianę – w formularzu ustaw atrybut enctype. (wartością domyślną jest application/x-www-form-urlencoded);

<form method="post" enctype="multipart/form-data">
…
</form>

Aby umożliwić przesyłanie plików, zmień wartość na multipart/form-data. Bez tego kodowania pliki nie mogą być wysyłane z żądaniem POST.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat elementu formularza

Zasoby

• Element HTML formularza
• Sprawdzone metody dotyczące przycisku „Prześlij”