0Pricing
HTML Academy · Lekcja

Element form: action, method i enctype

Konfigurować element formularza za pomocą atrybutów action, method i enctype.

Element form: action, method i enctype to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Czym jest formularz?

Formularze HTML są podstawowym sposobem przesyłania danych do serwera:

  • Logowanie i rejestracja
  • Zapytania wyszukiwania
  • Finalizowanie zakupu i płatności
  • Kontakt i opinie

Każdy formularz zaczyna się od elementu <form>.

Element form

Element <form> obejmuje wszystkie kontrolki formularza:

<form action="/submit" method="post">
  <!-- form controls go here -->
  <button type="submit">Send</button>
</form>
<!-- When the user submits, the browser sends the form data
     to the URL specified in action using the method specified -->

Atrybut action

Atrybut action określa miejsce, do którego są wysyłane dane formularza:

<form action="/api/login">...</form>      <!-- relative path -->
<form action="https://api.example.com/form">...</form>  <!-- absolute -->
<form action="">...</form>                 <!-- current URL (empty) -->
<form>...</form>                           <!-- no action = current URL -->

Atrybut method

Atrybut method określa sposób wysyłania danych:

<form method="get">...</form>
<!-- GET: appends data to URL as query string
     example.com/search?q=html&sort=date
     Used for: search forms, filters, bookmarkable results -->

<form method="post">...</form>
<!-- POST: sends data in the request body
     Data is not visible in the URL
     Used for: login, registration, file uploads, sensitive data -->

GET a POST

GET i POST mają różne właściwości:

  • GET — dane w adresie URL (ograniczona długość), możliwość dodania zakładki, buforowanie, idempotentność
  • POST — dane w treści żądania (bez ograniczenia długości), brak możliwości dodania zakładki, brak buforowania, brak idempotentności

Zasada praktyczna: jeśli wysłanie formularza nie zmienia stanu serwera → GET; jeśli go zmienia → POST.

Atrybut enctype

Atrybut enctype określa sposób kodowania danych formularza dla żądań POST:

<!-- Default: URL-encoded (text/form fields) -->
<form method="post" enctype="application/x-www-form-urlencoded">

<!-- For file uploads: multipart -->
<form method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
</form>

<!-- Plain text (rare): -->
<form method="post" enctype="text/plain">

Atrybut novalidate

Atrybut novalidate wyłącza wbudowaną walidację przeglądarki:

<form action="/submit" method="post" novalidate>
  <!-- Validation handled by JavaScript instead -->
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>

Atrybut target w formularzu

Atrybut target określa miejsce wyświetlenia odpowiedzi:

<form action="/search" target="_blank">
  <!-- Response opens in a new tab -->
</form>
<!-- Values: _blank, _self, _parent, _top, or a frame name -->
<!-- Rarely used — most forms stay on the same page or use AJAX -->

autocomplete w formularzu

Atrybut autocomplete określa sposób automatycznego uzupełniania formularza przez przeglądarkę:

<!-- Off: disable autofill for the entire form -->
<form autocomplete="off">

<!-- On (default): allow autofill -->
<form autocomplete="on">

<!-- Better: control at the field level:
<input type="email" autocomplete="email">
<input type="current-password" autocomplete="current-password">
-->

Wysyłanie formularza za pomocą JavaScript

Zapobiegaj domyślnemu wysłaniu formularza i obsługuj je za pomocą JavaScript:

<form id="contact-form" action="/contact" method="post">
  <input type="text" name="name">
  <button type="submit">Send</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', async (e) => {
  e.preventDefault();  // stop normal browser submission
  const data = new FormData(e.target);
  const res = await fetch('/contact', { method: 'POST', body: data });
  // handle response...
});
</script>

action i method razem

Kompletny przykład formularza z prawidłowymi atrybutami action i method:

<form action="/api/newsletter" method="post">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Subscribe</button>
</form>
<!-- POST because: creating a subscription = server state change -->

Szybkie sprawdzenie

Jakiej metody formularza należy użyć podczas przesyłania pliku?

Podsumowanie: element form

Najważniejsze informacje o elemencie formularza:

  • action — adres URL odbierający dane formularza
  • method="get" — dane w adresie URL (wyszukiwanie, filtry)
  • method="post" — dane w treści żądania (dane poufne, zmiany stanu)
  • enctype="multipart/form-data" — wymagany podczas przesyłania plików
  • novalidate — wyłącza walidację przeglądarki

Często zadawane pytania

Czy lekcja „Element form: action, method i enctype” jest bezpłatna?

Tak — pełny tekst „Element form: action, method i enctype” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Element form: action, method i enctype”?

Konfigurować element formularza za pomocą atrybutów action, method i enctype. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Element form: action, method i enctype”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Element form: action, method i enctype
  2. Typy input: text, password, email, number i tel
  3. Element label i dostępność
  4. Element button: submit, reset i button
← Powrót do HTML Academy