Blog

Przyszedł czas na zapoznanie się z obsługą formularzy. Stworzymy prosty formularz z polami imię i nazwisko. Następnie prześlemy te dane i obrobimy je na docelowej stronie.

Budowanie formularza
Tutaj sprawa sprowadza się w praktyce do zdefiniowania, które chcemy umieścić w formularzu. W tym wpisie nie będziemy zajmować się różnymi typami pól bo to znajdzie się w innym poście. Dzisiaj interesuje nas tylko obsługa danych, które użytkownik wprowadzi do formularza.
Dla naszych potrzeb wystarczy prosty formularz zbudowany z dwóch pól tekstowych: imię i nazwisko.
Moja strona narazie wygląda tak:

Omówienie poszczególnych elementów:

• <form>...</form> tagi określające początek i koniec formularza
• method="post" określa metodę przesyłania danych z formularza. Metoda POST przesyła dane w ciele zapytania HTTP, co jest bezpieczniejsze niż metoda GET, która przesyła dane w adresie URL.
• action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" określa adres URL, na który mają zostać przesłane dane formularza. W tym przypadku użyto PHP, aby ustawić action na ten sam skrypt, w którym znajduje się formularz. $_SERVER["PHP_SELF"] zwraca ścieżkę do bieżącego skryptu, a htmlspecialchars() zapobiega atakom XSS, konwertując specjalne znaki HTML na ich odpowiedniki encji HTML.
• <input type="text" id="firstname" name="first_name" required> pole tekstowe do wprowadzenia imienia.
  • type="text" określa typ pola jako tekstowe.
  • id="firstname" unikalny identyfikator pola tekstowego.
  • name="first_name" nazwa pola, która będzie użyta do identyfikacji wartości w skryptach po stronie serwera.
  • required atrybut ten oznacza, że pole jest wymagane i użytkownik musi wprowadzić jakąś wartość przed wysłaniem formularza.
• <label for="firstname">Imię:</label> etykieta opisująca pole tekstowe. Atrybut for jest powiązany z atrybutem id pola tekstowego, co umożliwia kliknięcie na etykietę w celu ustawienia kursora w odpowiednim polu.
• <input type="submit" value="Wyślij dane"> przycisk do wysłania danych formularza.
• type="submit" określa, że element jest przyciskiem wysyłającym formularz.
• value="Wyślij dane" tekst, który będzie wyświetlany na przycisku.

Aktualnie nasz formularz wygląda tak.

Możemy oczywiście zastosować jakieś style CSS w celu wizualnej poprawy lub skorzystać z gotowych bibliotek typu Bootstrap. Ja skorzystam właśnie z tej biblioteki i po dopięciu linku do biblioteki w sekcji HEAD mojej strony

<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

i lekkej modyfikacji mojego formularza, polegającej głównie na dodaniu kilku klas do poszczególnych elementów formularza

<div class="container mt-5">
    <h2 class="mb-4">Formularz</h2>
    <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
        <div class="form-group">
            <label for="firstname">Imię:</label>
            <input type="text" class="form-control" id="firstname" name="first_name" required>
        </div>
        <div class="form-group">
            <label for="lastname">Nazwisko:</label>
            <input type="text" class="form-control" id="lastname" name="last_name" required>
        </div>
        <button type="submit" class="btn btn-primary">Wyślij dane</button>
    </form>
</div>

mój formularz wygląda teraz tak

Różnica jest widoczna gołym okiem. Mój formularz wygląda naprawdę profesjonalnie 🙂
Teraz możemy przesłać dane i zając się obróbką.

Obróbka danych na stronie docelowej.
Teraz należy się zastanowić jaką logiką pójdziemy. Czy chcemy żeby formularz wysyłał dane z powrotem na stronę z formularzem i tam obrabiać te dane. Czy jednak stworzyć nową stronę i tam przesyłać i obrabiać dane. To gdzie dane będą przesłane określa atrybut action w tagu <form>. Aktualnie mamy wartość:

action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"

co skutkuje przesłaniem danych z formularza do tej samej strony gdzie jest osadzony formularz i w naszym przykładzie taką logikę zastosujemy. Gdybyś chciał przesłać dane do innej strony musisz wstawić ścieżkę do tej strony w atrybucie action.

cdn 🙂