W artykule tym zajmiemy się tworzeniem formularzy i elementów interaktywnych przy użyciu HTML. Formularze stanowią kluczowy element interakcji użytkownika, a HTML oferuje szereg tagów, umożliwiających zbieranie danych i dostarczanie użytkownikowi dynamicznych treści.

Tworzenie Prostego Formularza

Rozpoczniemy od stworzenia podstawowego formularza z polami tekstowymi, przyciskiem i listą rozwijaną.

<form action="/przetworz-dane" method="post">
    <label for="imie">Imię:</label>
    <input type="text" id="imie" name="imie" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="wiadomosc">Wiadomość:</label>
    <textarea id="wiadomosc" name="wiadomosc" rows="4" required></textarea>

    <label for="kolor">Ulubiony kolor:</label>
    <input type="color" id="kolor" name="kolor">

    <label for="zwierzak">Ulubiony zwierzak:</label>
    <select id="zwierzak" name="zwierzak">
        <option value="kot">Kot</option>
        <option value="pies">Pies</option>
        <option value="chomik">Chomik</option>
    </select>

    <input type="submit" value="Wyślij">
</form>

W tym przykładzie wykorzystujemy różne typy pól formularza, takie jak text, email, textarea, color, i select. Atrybuty id i for w etykietach pomagają związać etykietę z odpowiadającym jej polem formularza.

1. <form action="/przetworz-dane" method="post">: Rozpoczynamy formularz (<form>) i określamy jego atrybuty.
   • action="/przetworz-dane": Określa, do którego adresu URL zostaną wysłane dane po naciśnięciu przycisku “Wyślij”.
   • method="post": Określa, że dane z formularza zostaną wysłane za pomocą protokołu HTTP POST. Działa to na zasadzie, że dane są dołączane do ciała żądania HTTP.
2. Pola formularza:
   • <label for="imie">Imię:</label>: Etykieta dla pola tekstowego o identyfikatorze (id) “imie”.
   • <input type="text" id="imie" name="imie" required>: Pole tekstowe, w którym użytkownik wpisuje imię.
   • <label for="email">Email:</label>: Etykieta dla pola email o identyfikatorze “email”.
   • <input type="email" id="email" name="email" required>: Pole email, wymagające poprawnego formatu adresu email.
   • <label for="wiadomosc">Wiadomość:</label>: Etykieta dla pola tekstowego wieloliniowego o identyfikatorze “wiadomosc”.
   • <textarea id="wiadomosc" name="wiadomosc" rows="4" required></textarea>: Pole tekstowe wieloliniowe, gdzie użytkownik może wpisać wiadomość. Atrybut rows określa liczbę widocznych wierszy.
   • <label for="kolor">Ulubiony kolor:</label>: Etykieta dla pola wyboru koloru o identyfikatorze “kolor”.
   • <input type="color" id="kolor" name="kolor">: Pole umożliwiające wybór koloru za pomocą interaktywnego kolorowego paska.
   • <label for="zwierzak">Ulubiony zwierzak:</label>: Etykieta dla pola rozwijanej listy o identyfikatorze “zwierzak”.
   • <select id="zwierzak" name="zwierzak">: Pole rozwijanej listy, gdzie użytkownik może wybrać ulubionego zwierzaka.
     • <option value="kot">Kot</option>: Opcja wyboru “Kot”.
     • <option value="pies">Pies</option>: Opcja wyboru “Pies”.
     • <option value="chomik">Chomik</option>: Opcja wyboru “Chomik”.
3. <input type="submit" value="Wyślij">: Przycisk “Wyślij”, który po naciśnięciu spowoduje wysłanie danych formularza na określony adres URL (/przetworz-dane).

W tym przypadku, po wypełnieniu formularza i naciśnięciu przycisku “Wyślij”, dane zostaną wysłane do serwera, a następnie mogą być przetworzone przy użyciu odpowiednich skryptów (na przykład w PHP) znajdujących się pod wskazanym adresem URL (/przetworz-dane).

Zapisywanie Danych z Formularza

Do przechowywania danych formularzy często używa się baz danych, takich jak MySQL, PostgreSQL czy MongoDB. Poniżej przedstawiamy, jak możemy zapisywać dane z formularza w bazie danych SQL, pliku tekstowym, lub po prostu wysyłać je na maila.

Zapisywanie w Bazie Danych SQL

Aby zapisywać dane w bazie danych SQL, wykorzystujemy język zapytań SQL, najczęściej przy użyciu skryptów w języku serwerowym, np. PHP. Poniżej przedstawiamy przykład dla MySQL.

<?php
$conn = new mysqli("localhost", "nazwa_uzytkownika", "haslo", "nazwa_bazy_danych");

if ($conn->connect_error) {
    die("Błąd połączenia z bazą danych: " . $conn->connect_error);
}

$imie = $_POST['imie'];
$email = $_POST['email'];
$wiadomosc = $_POST['wiadomosc'];

$sql = "INSERT INTO tabela_formularza (imie, email, wiadomosc) VALUES ('$imie', '$email', '$wiadomosc')";

if ($conn->query($sql) === TRUE) {
    echo "Dane zapisane poprawnie w bazie danych.";
} else {
    echo "Błąd zapisu danych: " . $conn->error;
}

$conn->close();
?>

1. Połączenie z Bazą Danych

$conn = new mysqli("localhost", "nazwa_uzytkownika", "haslo", "nazwa_bazy_danych");

• Tworzymy nowy obiekt klasy mysqli, reprezentujący połączenie z bazą danych MySQL.
• Parametry konstruktora to: adres serwera bazy danych (localhost), nazwa użytkownika (nazwa_uzytkownika), hasło (haslo), oraz nazwa bazy danych (nazwa_bazy_danych).

2. Sprawdzenie Połączenia

if ($conn->connect_error) {
    die("Błąd połączenia z bazą danych: " . $conn->connect_error);
}

Sprawdzamy, czy połączenie z bazą danych zostało pomyślnie ustanowione. W przypadku błędu, skrypt zostanie zatrzymany, a komunikat błędu zostanie wyświetlony.

3. Pobranie Danych z Formularza

$imie = $_POST['imie'];
$email = $_POST['email'];
$wiadomosc = $_POST['wiadomosc'];

Pobieramy dane z formularza za pomocą tablicy $_POST. Indeksy tablicy odpowiadają wartościom atrybutu name w formularzu.

4. Zapytanie SQL – Wstawienie Danych do Tabeli

$sql = "INSERT INTO tabela_formularza (imie, email, wiadomosc) VALUES ('$imie', '$email', '$wiadomosc')";

Tworzymy zapytanie SQL, które wstawia pobrane dane do tabeli tabela_formularza.

5. Wykonanie Zapytania i Obsługa Błędów

if ($conn->query($sql) === TRUE) {
    echo "Dane zapisane poprawnie w bazie danych.";
} else {
    echo "Błąd zapisu danych: " . $conn->error;
}

Wykonujemy zapytanie do bazy danych. Jeżeli wykonanie zapytania przebiegnie pomyślnie, wyświetlamy komunikat o sukcesie. W przeciwnym razie, wyświetlamy komunikat o błędzie wraz z treścią błędu.

6. Zamknięcie Połączenia z Bazą Danych

$conn->close();

Zamykamy połączenie z bazą danych, aby zwolnić zasoby.

Warto pamiętać o zastosowaniu odpowiednich środków bezpieczeństwa, takich jak użycie preparowanych instrukcji SQL, aby zabezpieczyć się przed atakami typu SQL Injection.

Zapisywanie w Pliku Tekstowym

Aby zapisywać dane w pliku tekstowym, można użyć prostego skryptu w języku serwerowym, np. PHP.

<?php
$plik = fopen("dane.txt", "a");

$imie = $_POST['imie'];
$email = $_POST['email'];
$wiadomosc = $_POST['wiadomosc'];

fwrite($plik, "Imię: $imie, Email: $email, Wiadomość: $wiadomosc\n");

fclose($plik);

echo "Dane zapisane poprawnie w pliku tekstowym.";
?>

1. Otwarcie Pliku w Trybie Dodawania (“a”)

$plik = fopen("dane.txt", "a");

fopen("dane.txt", "a"): Funkcja fopen otwiera plik o nazwie “dane.txt” w trybie “a” (dodawania). Tryb “a” oznacza, że plik jest otwierany do zapisu, a jeśli plik nie istnieje, zostanie utworzony.

2. Pobranie Danych z Formularza

$imie = $_POST['imie'];
$email = $_POST['email'];
$wiadomosc = $_POST['wiadomosc'];

Pobieramy dane z formularza za pomocą tablicy $_POST. Indeksy tablicy odpowiadają wartościom atrybutu name w formularzu.

3. Zapisanie Danych do Pliku

fwrite($plik, "Imię: $imie, Email: $email, Wiadomość: $wiadomosc\n");

fwrite($plik, ...) : Funkcja fwrite służy do zapisywania danych do pliku. W tym przypadku zapisujemy sformatowaną linię tekstu zawierającą imię, email i wiadomość, a także znak nowej linii (\n) dla czytelności.

4. Zamknięcie Pliku

fclose($plik);

fclose($plik): Funkcja fclose zamyka plik, co jest ważne, aby zwolnić zasoby systemowe.

5. Komunikat o Zapisie

echo "Dane zapisane poprawnie w pliku tekstowym.";

Po zapisaniu danych do pliku, wyświetlamy komunikat informujący użytkownika o sukcesie operacji.

Wysyłanie Danych na Maila

Aby wysłać dane na maila, możemy użyć funkcji mail() w języku serwerowym, np. PHP

<?php
$odbiorca = "adres@mailowy.com";
$temat = "Nowe dane z formularza";
$imie = $_POST['imie'];
$email = $_POST['email'];
$wiadomosc = $_POST['wiadomosc'];

$mail = mail($odbiorca, $temat, $wiadomosc, "From: $email");

if ($mail) {
    echo "Dane wysłane na maila.";
} else {
    echo "Błąd podczas wysyłania danych na maila.";
}
?>

Powyższy kod PHP służy do wysyłania e-maila z danymi z formularza. Poniżej znajdziesz wyjaśnienie poszczególnych fragmentów kodu:

1. Adres Odbiorcy i Temat E-maila

$odbiorca = "adres@mailowy.com";
$temat = "Nowe dane z formularza";

• Zdefiniowano adres e-mail, na który zostanie wysłana wiadomość ($odbiorca).
• Określono temat wiadomości ($temat).

2. Pobranie Danych z Formularza

$imie = $_POST['imie'];
$email = $_POST['email'];
$wiadomosc = $_POST['wiadomosc'];

Pobrano dane z formularza za pomocą tablicy $_POST. Indeksy tablicy odpowiadają wartościom atrybutu name w formularzu.

3. Wysłanie E-maila za Pomocą mail()

$mail = mail($odbiorca, $temat, $wiadomosc, "From: $email");

• Użyto funkcji mail() do wysłania e-maila.
• Parametry funkcji to: adres odbiorcy, temat wiadomości, treść wiadomości oraz nagłówek “From”, który określa adres e-mail nadawcy.

4. Sprawdzenie Statusu Wysyłki

if ($mail) {
    echo "Dane wysłane na maila.";
} else {
    echo "Błąd podczas wysyłania danych na maila.";
}

• Sprawdzono, czy wysłanie e-maila zakończyło się sukcesem ($mail przyjmuje wartość true w przypadku sukcesu, false w przypadku błędu).
• Wyświetlono odpowiedni komunikat w zależności od wyniku.

Należy pamiętać, że funkcja mail() używa konfiguracji serwera do wysyłania e-maili, co może nie zawsze działać zgodnie z oczekiwaniami na niektórych serwerach.

Dodawanie Przycisków Radio i Checkbox

Rozszerzmy formularz o przyciski radio i checkbox, które umożliwią użytkownikowi dokonywanie wyborów.

<input type="radio" id="opcja1" name="opcje" value="opcja1">
<label for="opcja1">Opcja 1</label>

<input type="radio" id="opcja2" name="opcje" value="opcja2">
<label for="opcja2">Opcja 2</label>

<input type="checkbox" id="zgoda" name="zgoda" value="tak">
<label for="zgoda">Wyrażam zgodę na przetwarzanie danych osobowych</label>

Artykuł 4: Formularze i Elementy Interaktywne w HTML

W artykule tym zajmiemy się tworzeniem formularzy i elementów interaktywnych przy użyciu HTML. Formularze stanowią kluczowy element interakcji użytkownika, a HTML oferuje szereg tagów, umożliwiających zbieranie danych i dostarczanie użytkownikowi dynamicznych treści.

Dodawanie Przycisków Radio i Checkbox

Rozszerzmy formularz o przyciski radio i checkbox, które umożliwią użytkownikowi dokonywanie wyborów.

<input type="radio" id="opcja1" name="opcje" value="opcja1">
<label for="opcja1">Opcja 1</label>

<input type="radio" id="opcja2" name="opcje" value="opcja2">
<label for="opcja2">Opcja 2</label>

<input type="checkbox" id="zgoda" name="zgoda" value="tak">
<label for="zgoda">Wyrażam zgodę na przetwarzanie danych osobowych</label>

W przypadku przycisków radio (type="radio") używamy tego samego atrybutu name dla powiązania ich w grupę. Dla checkboxa (type="checkbox") każdy przycisk jest niezależny.

Elementy Interaktywne z JavaScript

HTML łączy się świetnie z JavaScript, co umożliwia dodanie jeszcze bardziej interaktywnych elementów. Poniżej znajdziesz prosty przykład przycisku, który zmienia kolor tła strony po naciśnięciu.

<button onclick="zmienKolor()">Zmień Kolor</button>

<script>
    function zmienKolor() {
        document.body.style.backgroundColor = "lightblue";
    }
</script>

W tym przykładzie używamy tagu <button>, a funkcja JavaScript jest wywoływana po naciśnięciu przycisku, co powoduje zmianę koloru tła strony.

W powyższym artykule omówiliśmy różne metody zapisywania danych formularzy oraz ich obsługi na serwerze.

Przydatne Linki

PHP – https://www.php.net/

HTML i JavaScript – https://www.w3.org/