Formularze w HTML: <form>

1.1 Element <form>

Formularze są ważną częścią interakcji użytkownika z witrynami internetowymi. Dzięki formularzom użytkownicy mogą wprowadzać dane, które następnie są wysyłane na serwer do przetworzenia. W HTML do tworzenia formularzy używany jest element <form>

Tag <form> służy do tworzenia formularza na stronie internetowej. Jest kontenerem dla różnych elementów formularza, takich jak pola tekstowe, przyciski, checkboxy itp. Wszystkie dane wprowadzone przez użytkownika mogą być wysłane na serwer do przetworzenia.

Przykład użycia:

    
      <form action="/submit" method="post">
        <label for="username">Nazwa użytkownika:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button id="submit" type="submit">Wyślij</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const userEmail = document.getElementById("email");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && userEmail.validity.valid) {
            e.preventDefault();
            alert(`Twoje imię: ${userName.value}\n` + `Twój Email: ${userEmail.value}`);
          }
        });
      </script>
    
  

    
      <form action="/submit" method="post">
        <label for="username">Nazwa użytkownika:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button type="submit">Wyślij</button>
      </form>
    
  

Atrybuty tagu <form>

Atrybut action wskazuje URL, na który zostaną wysłane dane formularza po naciśnięciu przycisku wysyłania. Jeśli atrybut action nie jest określony, dane formularza będą wysłane na bieżący URL.

Przykład użycia atrybutu action:

    
      <form action="https://example.com/submit">
        <!-- elementy formularza -->
      </form>
    
  

Atrybut method wskazuje metodę HTTP, która będzie użyta do wysłania danych formularza. Dostępne są dwie wartości: GET i POST.

1. GET: dane formularza są włączane do URL w postaci parametrów. Ta metoda jest odpowiednia do wysyłania małych ilości danych i nie powinna być używana do wysyłania poufnych informacji.
2. POST: dane formularza są wysyłane w treści żądania HTTP. Ta metoda jest odpowiednia do wysyłania dużych ilości danych i poufnych informacji.

Przykład użycia atrybutu method:

    
      <form action="/submit" method="post">
        <!-- elementy formularza -->
      </form>
    
  

1.2 Metody wysyłania danych

Metoda GET

Metoda GET wysyła dane formularza w postaci parametrów URL. Ta metoda jest używana domyślnie, jeśli atrybut method nie jest określony.

Przykład użycia metody GET:

    
      <form action="/search" method="get">
        <label for="query">Szukaj:</label>
        <input type="text" id="query" name="query" required>
        <button id="submit" type="submit">Szukaj</button>
      </form>
      <script>
        const searchField = document.getElementById("query");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (searchField.validity.valid) {
            e.preventDefault();
            alert(`Szukasz: ${searchField.value}`);
          }
        });
      </script>
    
  

    
      <form action="/search" method="get">
        <label for="query">Szukaj:</label>
        <input type="text" id="query" name="query">
        <button type="submit">Szukaj</button>
      </form>
    
  

Cechy metody GET

• Dane formularza są widoczne w URL, co czyni tę metodę nieodpowiednią do przesyłania poufnych informacji
• Ograniczenie wielkości danych, ponieważ URL ma ograniczoną długość
• Dane mogą być łatwo zapamiętane w pamięci podręcznej, a zakładka może być zapisana w przeglądarce

Metoda POST

Metoda POST wysyła dane formularza w treści żądania HTTP. Ta metoda jest używana do przesyłania dużych ilości danych i poufnych informacji.

Przykład użycia metody POST:

    
      <form action="/submit" method="post">
        <label for="username">Nazwa użytkownika:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Hasło:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Wyślij</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert(`Witamy, ${userName.value}!`);
          }
        });
      </script>
    
  

    
      <form action="/submit" method="post">
        <label for="username">Nazwa użytkownika:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Hasło:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">Wyślij</button>
      </form>
    
  

Cechy metody POST

• Dane formularza nie są widoczne w URL, co czyni tę metodę odpowiednią do przesyłania poufnych informacji
• Brak ograniczeń dotyczących wielkości danych, ponieważ dane są przesyłane w treści żądania
• Dane nie są pamiętane w pamięci podręcznej i nie są zapisywane w zakładkach przeglądarki

1.3 Dodatkowe atrybuty

Atrybut enctype

Atrybut enctype jest używany do określenia sposobu kodowania danych formularza podczas wysyłania metodą POST. Najczęściej używaną wartością jest multipart/form-data, która jest konieczna do przesyłania plików.

Przykład użycia atrybutu enctype:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Załaduj plik:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Wyślij</button>
      </form>
    
  

Atrybut target

Atrybut target wskazuje, gdzie zostanie wyświetlona odpowiedź serwera po wysłaniu formularza. Możliwe wartości:

• _self (domyślnie): w tym samym oknie lub karcie
• _blank: w nowym oknie lub karcie
• _parent: w nadrzędnej ramce
• _top: w górnej ramce (jeśli używane są ramki)

Przykład użycia atrybutu target:

    
      <form action="/submit" method="post" target="_blank">
        <!-- elementy formularza -->
      </form>
    
  

Atrybut novalidate

Atrybut novalidate wyłącza wbudowaną w przeglądarkę walidację formularza.

Przykład użycia atrybutu novalidate:

    
      <form action="/submit" method="post" novalidate>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">Wyślij</button>
      </form>
    
  

1.4 Sposoby wysyłania danych

Wysyłanie danych formularza odbywa się za pomocą przycisku do wysyłania: <input type="submit"> lub <button type="submit">. Kiedy użytkownik kliknie ten przycisk, przeglądarka wysyła dane formularza na serwer, używając określonej metody i URL.

Oto najważniejsze sposoby wysyłania danych z formularza:

1. Przycisk do wysyłania: to najczęściej używany sposób wysyłania danych formularza. Przycisk do wysyłania może być stworzony za pomocą elementu <input> lub <button>.

Przykład z <input>:

    
      <input type="submit" value="Submit">
    
  

Przykład z <button>:

    
      <button type="submit">Submit</button>
    
  

2. Klawisz Enter: w polach tekstowych formularza naciśnięcie klawisza Enter może również wywołać wysłanie formularza.

3. JavaScript: formularz może być wysłany programowo przy użyciu JavaScript. Jest to przydatne, gdy trzeba wykonać dodatkowe sprawdzenia lub inne działania przed wysłaniem danych.

Przykład użycia JavaScript do wysyłania formularza:

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Submit</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert("Autoryzacja zakończona sukcesem!\n" + "\n" + `Witamy, ${userName.value}!`);
          }
        });
      </script>
    
  

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        <br>
        <button type="button" onclick="submitForm()">Submit</button>
      </form>
    
  

    
      function submitForm() {
        document.getElementById('myForm').submit();
      }