W tym poradniku dowiesz się, jak stworzyć swoje pierwsze proste formularz w HTML. Formularze są istotną częścią aplikacji internetowych, umożliwiają użytkownikom wprowadzanie informacji i wysyłanie ich do serwera. W tej stopniowej instrukcji poznasz podstawową strukturę formularza HTML i zrozumiesz, jak różne elementy współpracują, aby przesyłać dane.
Najważniejsze wnioski
- Formularz HTML jest określany za pomocą tagu <form>.
- Atrybuty action i method określają, dokąd dane są wysyłane i jakiej metody się używa.
- Pola formularza są zazwyczaj określane za pomocą tagów <input>, <label> i <button>.
- Dane mogą być wysyłane na serwer za pomocą metody GET lub POST.
Instrukcja krok po kroku
1. Utwórz podstawową strukturę HTML
Najpierw musisz utworzyć prosty dokument HTML jako podstawę. Upewnij się, że posiadasz podstawową strukturę dokumentu HTML:
2. Dodaj tag formularza
Następnym krokiem jest zdefiniowanie formularza. Dodajesz tag -Tag i potrzebujesz atrybutów action i method. Oto prosty przykład, gdzie action określa URL, na który dane są wysyłane, a method jest ustawiony na GET, aby przekazać dane poprzez URL.
3. Utwórz etykietę i pole wprowadzania
W formularzu chcesz stworzyć pole wprowadzania z etykietą. Do tego używasz tagu -Tag dla etykiety i tagu -Tag dla właściwego pola wprowadzania. Upewnij się, że atrybut for etykiety pasuje do id pola wprowadzania.
4. Dodaj przycisk przesyłania
Aby wysłać dane formularza, potrzebujesz przycisku. Jest to realizowane przez tag -Tag i powinien mieć typ submit, aby formularz został przesłany po kliknięciu.
5. Testowanie formularza
Po utworzeniu formularza nadszedł czas, aby przetestować go w przeglądarce. Wprowadź przykład w pole wprowadzania i kliknij przycisk przesyłania. Powinieneś zobaczyć, że po wysłaniu formularza wprowadzone dane są przesyłane poprzez URL na określoną akcję.
6. Zmiana atrybutów pola wprowadzania
Aby zobaczyć jak zmieniają się pola wprowadzania, możesz dostosować atrybuty tagu -Tag. Zmień na przykład atrybut name, aby odróżnić przesyłane dane. Przykładowo, zmień nazwę pola wprowadzania z name na first name.
7. Przesyłanie danych i rodzaj żądania
Przed przeprowadzeniem dalszych testów ważne jest wiedzieć, że metoda GET przesyła dane w URL, podczas gdy metoda POST wysyła dane w ciele żądania HTTP. Możesz zmienić rodzaj żądania, dostosowując atrybut method tagu -Tag.
8. Symulowanie reakcji serwera
Ponieważ prawdopodobnie nie masz dostępnego prawdziwego serwera do testowania formularza, możesz dostosować URL akcji, aby symulować przekierowanie użytkowników po wysłaniu formularza do innej strony HTML. Utwórz nowy plik HTML, zawierający np. stronę dziękczynną.
9. Rozwiązywanie problemów i debugowanie
Jeśli podczas wysyłania formularza występują błędy, sprawdź narzędzia sieciowe przeglądarki. Tam zobaczysz, czy formularz został pomyślnie wysłany i jakie dane są przesyłane. Zwróć uwagę również na ewentualne błędy 404, które wskazują, że docelowy URL nie został znaleziony.
10. Podsumowanie i perspektywy
Teraz masz podstawową wiedzę na temat tworzenia formularzy HTML. Możesz rozwijać tę technikę, tworząc bardziej złożone formularze zawierające różne typy wejść i walidacje. W następnym samouczku nauczysz się, jak reagować na dane wprowadzane do formularzy za pomocą JavaScript oraz jak przeprowadzać transmisje danych asynchronicznych.
Podsumowanie
W tym samouczku dowiedziałeś się o strukturze i działaniu swojego pierwszego formularza HTML. Teraz wiesz, jak tworzyć pola wejściowe, etykiety i przyciski oraz jak dane wysyłane są przez URL lub ciało żądania POST.
Najczęściej zadawane pytania
Jaka jest różnica między GET a POST?GET przesyła dane przez URL, podczas gdy POST wysyła dane w ciele żądania.
Co powinno być podane w atrybucie akcji?W atrybucie akcji podajesz URL, do którego mają zostać wysłane dane formularza.
Jak mogę upewnić się, że mój formularz działa poprawnie?Przetestuj formularz w przeglądarce i sprawdź narzędzia sieciowe w celu sprawdzenia wysyłanych danych.
Jak można utworzyć kilka pól wejściowych w jednym formularzu?Dodaj kolejne tagi pod pierwszym i upewnij się, że każdy ma unikalny atrybut name.
Co się dzieje po wysłaniu formularza?Jeśli wysłane jest żądanie GET, strona zostanie odświeżona, a dane pojawią się w adresie URL. W przypadku żądania POST reakcja zależy od tego samego serwera.
