Szczegółowe informacje o elemencie formularza

W poprzednim module dowiedzieliśmy się, jak używać elementu <form>. Z tego modułu dowiesz się, jak działa formularz i kiedy go używać.

Czy należy używać elementu <form>?

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

Jednak w większości przypadków, gdy przechowujesz lub przetwarzasz dane użytkowników, powinieneś używać elementu <form>. Jak dowiesz się z tego modułu, korzystanie z <form> zapewnia wiele wbudowanych funkcji przeglądarek, które w innym przypadku musiałbyś samodzielnie utworzyć. <form> ma też wiele wbudowanych domyślnie funkcji ułatwień dostępu. Jeśli chcesz uniknąć ponownego wczytywania strony, gdy użytkownik przesyła formularz, możesz użyć elementu <form>, ale rozszerz go o JavaScript.

Jak działa <form>?

Dowiedzieliśmy się, że <form> to najlepszy sposób na przetwarzanie danych użytkowników. Zastanawiasz się pewnie, jak działa formularz.

Element <form> to kontener interaktywnych elementów sterujących 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 <form>, przeglądarka sprawdza atrybuty <form>. Dane są wysyłane jako żądanie GET lub POST zgodnie z atrybutem method. Jeśli nie ma atrybutu method, do adresu URL bieżącej strony wysyłane jest żądanie GET.

Jak uzyskać dostęp do danych z formularza i je przetwarzać? Przesłane dane mogą być obsługiwane przez JavaScript na frontendzie za pomocą żądania GET lub przez kod na backendzie za pomocą żądania GET lub POST. Dowiedz się więcej o typach żądań i przekazywaniu danych z formularza.

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 ma atrybut formaction. W takim przypadku używany jest zdefiniowany tam adres URL.

Poza tym przeglądarka wyszukuje dodatkowe atrybuty elementu <form>, np. aby zdecydować, czy formularz powinien być sprawdzany (novalidate), czy należy użyć autouzupełniania (autocomplete="off") lub jakiego kodowania należy użyć (accept-charset).

Spróbuj utworzyć formularz, w którym użytkownicy będą mogli podać swój ulubiony kolor. Dane należy wysyłać w ramach żądania POST, a adres URL, pod którym dane są przetwarzane, powinien mieć postać /color.

Pokaż formularz

Jednym z możliwych rozwiązań jest skorzystanie z 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>

Upewnij się, że użytkownicy mogą przesyłać Twój formularz

Formularz można przesłać na 2 sposoby. Możesz kliknąć przycisk Prześlij lub nacisnąć klawisz Enter, korzystając z dowolnego elementu formularza.

Podczas tworzenia przycisku Prześlij zawsze używaj języka zachęcającego do działania. Na przykład Przejdź do płatności lub Zapisz zmiany. Ułatwia to użytkownikom zrozumienie kolejnych kroków w formularzu.

Przycisk Prześlij możesz dodać na różne sposoby. Jedną z opcji jest użycie elementu <button> w formularzu. Dopóki nie użyjesz type="button", działa on jako przycisk Prześlij. Możesz też użyć <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 jednak możesz tworzyć przyciski graficzne za pomocą CSS, więc nie zalecamy używania elementu type="image".

Nie dodawaj limitów czasu. Umożliwiaj użytkownikom przesyłanie formularza w dowolnym momencie. Przekroczenia limitu czasu powodują utratę danych i frustrację użytkowników. Zapoznaj się z wytycznymi W3C dotyczącymi limitu czasu formularza.

Umożliwianie użytkownikom przesyłania plików

Użyj <input type="file">, aby umożliwić użytkownikom przesyłanie i przesyłanie 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 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 jeszcze wprowadzić 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 można przesyłać, zmień ustawienie na multipart/form-data. Bez tego kodowania nie można wysyłać plików z żądaniem POST.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o elemencie formularza

Jaką wartość enctype należy podać, aby przesłać pliki?

multipart/form-data
🎉
multipart/form-files
Spróbuj jeszcze raz.
form-data
Spróbuj jeszcze raz.
form-files
Spróbuj jeszcze raz.

Czy można wysyłać dane użytkowników bez <form>

Nie
Spróbuj jeszcze raz.
Tak, za pomocą JavaScriptu.
🎉
Tak, z Flashem.
Spróbuj jeszcze raz.
Tak, za pomocą HTML5.
Spróbuj jeszcze raz.

Jak przesłać <form>?

Kliknij <button>.
Spróbuj jeszcze raz.
Naciśnij Enter.
Spróbuj jeszcze raz.
Kliknij <input type="image">.
Spróbuj jeszcze raz.
Wszystkie odpowiedzi są prawidłowe.
🎉

Zasoby