HTML: Formularze

Tworzenie formularzy w HTML polega na użyciu elementu <form> i zagnieżdżaniu w nim różnych elementów kontrolnych (takich jak pola tekstowe, przyciski, listy rozwijane). Operacje na formularzach (przetwarzanie danych) odbywają się głównie po stronie serwera (backend). Tworzenie formularzy HTMLFormularz HTML zaczyna się od znacznika <form>. Najważniejsze atrybuty tego elementu to: 

• action: Określa adres URL (ścieżkę do pliku, np. skryptu PHP, Pythona), do którego dane formularza zostaną wysłane po zatwierdzeniu.
• method: Definiuje metodę HTTP używaną do wysyłania danych. Najczęściej używane metody to POST (zalecana do wrażliwych danych lub dużej ilości danych, dane są ukryte w treści zapytania) i GET (dane są dołączane do adresu URL). 

Przykład podstawowej struktury formularza:html

<form action="/przetwarzaj_dane.php" method="POST">
    <!-- Elementy formularza znajdują się tutaj -->
</form>

Use code with caution.Główne elementy formularza

• <input>: Najbardziej wszechstronny element, którego zachowanie zależy od atrybutu type. Przykładowe typy:
  • type="text": Jednoliniowe pole tekstowe (np. na imię).
  • type="password": Pole hasła (znaki są maskowane).
  • type="submit": Przycisk do wysyłania formularza.
  • type="checkbox": Pole wyboru (wielokrotny wybór).
  • type="radio": Przycisk opcji (pojedynczy wybór z grupy).
  • type="email": Pole do adresu e-mail z wbudowaną walidacją przeglądarki.
• <label>: Etykieta opisująca pole formularza. Użycie atrybutu for, który odpowiada atrybutowi id danego <input>, poprawia dostępność i użyteczność.
• <textarea>: Obszar tekstowy na wiele linii (np. na wiadomość).
• <button>: Alternatywa dla <input type="submit">, umożliwiająca umieszczenie wewnątrz bardziej złożonej treści (np. obrazka). 

Kompletny przykład formularza kontaktowego:html

<form action="/submit-form" method="POST">
    <label for="name">Imię:</label>
    <input type="text" id="name" name="user_name" required>

    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email">

    <label for="msg">Wiadomość:</label>
    <textarea id="msg" name="user_message"></textarea>

    <button type="submit">Wyślij</button>
</form>

Use code with caution.Ważne jest używanie atrybutu name dla każdego elementu wejściowego, ponieważ to on identyfikuje dane po stronie serwera (jako para nazwa/wartość). Operacje na formularzach HTMLHTML sam w sobie definiuje tylko strukturę i sposób wysyłki danych. Przetwarzanie (operacje) danych formularza odbywa się po stronie serwera (backend) przy użyciu języków takich jak PHP, Python (z frameworkami takimi jak Flask/Django), Node.js, itp.. Proces operacji wygląda następująco:

1. Wypełnianie i wysyłanie: Użytkownik wypełnia formularz w przeglądarce i klika przycisk submit.
2. Transmisja danych: Przeglądarka zbiera dane (pary nazwa/wartość z atrybutów name) i wysyła je do adresu URL podanego w atrybucie action przy użyciu metody określonej w method (np. POST).
3. Odbiór i przetwarzanie na serwerze: Skrypt backendowy (np. przetwarzaj_dane.php) odbiera żądanie HTTP, wyodrębnia przesłane dane, waliduje je (sprawdza poprawność, bezpieczeństwo) i wykonuje odpowiednie operacje (np. zapisuje do bazy danych, wysyła e-mail).
4. Odpowiedź: Serwer odsyła do przeglądarki odpowiedź (np. stronę z potwierdzeniem, komunikat o błędzie lub przekierowuje użytkownika). 

Możliwe jest również użycie JavaScriptu do przechwytywania wysyłania formularza i przetwarzania danych dynamicznie po stronie klienta (frontend) bez przeładowywania strony, co jest podstawą aplikacji jednostronicowych (SPA).