Tworzenie formularzy HTML

Witamy w kolejnej lekcji! W tej lekcji poznają Państwo sposób tworzenia formularzy za pomocą HTML. Formularze są niezbędne do zbierania danych wprowadzanych przez użytkowników, które można później przetwarzać za pomocą PHP. Zaczynajmy!

Czym są formularze HTML?

Formularze HTML służą do zbierania danych wprowadzanych przez użytkowników. Umożliwiają użytkownikom wypełnianie pól, wybieranie opcji i wysyłanie danych do serwera w celu ich przetworzenia.

Przykład: Formularz logowania, w którym użytkownicy wprowadzają nazwę użytkownika i hasło.

Najważniejsze: Formularze stanowią połączenie między użytkownikiem a skryptami PHP.

Tworzenie prostego formularza

Oto sposób tworzenia podstawowego formularza HTML:

Wyjaśnienie:

• action: Określa plik PHP, który obsłuży dane formularza.
• method: Określa sposób wysyłania danych (GET lub POST).
• required: Gwarantuje, że przed wysłaniem formularza pole zostanie wypełnione.

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

Elementy formularza

Formularze mogą zawierać różne typy danych wejściowych do zbierania różnych rodzajów danych:

• text: Jednowierszowe pole tekstowe.
• email: Adresy e-mail.
• password: Pole do wprowadzania hasła.
• checkbox: Wybór wielu opcji.
• radio: Wybór jednej opcji.
• submit: Wysyłanie formularza.

Przykład:

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

Korzystanie z przycisków opcji

Przyciski opcji umożliwiają użytkownikom wybranie jednej opcji z grupy. Przykład:

Wskazówka: Należy używać tego samego atrybutu name dla wszystkich przycisków opcji w grupie.

<form action="submit.php" method="POST">
  <p>Choose your favorite color:</p>
  <input type="radio" id="red" name="color" value="Red">
  <label for="red">Red</label>
  <br>
  <input type="radio" id="blue" name="color" value="Blue">
  <label for="blue">Blue</label>
  <br>
  <button type="submit">Submit</button>
</form>

Korzystanie z pól wyboru

Pola wyboru umożliwiają użytkownikom wybranie wielu opcji. Przykład:

Wskazówka: Należy użyć składni tablicowej (hobbies[]) do zbierania wielu wartości.

<form action="submit.php" method="POST">
  <p>Select your hobbies:</p>
  <input type="checkbox" id="reading" name="hobbies[]" value="Reading">
  <label for="reading">Reading</label>
  <br>
  <input type="checkbox" id="traveling" name="hobbies[]" value="Traveling">
  <label for="traveling">Traveling</label>
  <br>
  <button type="submit">Submit</button>
</form>

Listy rozwijane

Listy rozwijane umożliwiają użytkownikom wybranie jednej opcji z listy. Przykład:

Wskazówka: Należy użyć selected, aby ustawić opcję domyślną.

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

Dostępność formularzy

Należy zadbać o dostępność formularzy dla wszystkich użytkowników:

• Należy używać znaczników label połączonych z polami wejściowymi za pomocą atrybutów for.
• Powiązane pola wejściowe należy grupować za pomocą fieldset i legend.
• Należy testować użyteczność formularzy na urządzeniach mobilnych.

Wskazówka: Dostępne formularze poprawiają komfort korzystania z nich przez wszystkich użytkowników!

Świetna robota!

Gratulacje! Nauczyli się Państwo tworzyć formularze HTML z różnymi typami danych wejściowych, w tym polami tekstowymi, przyciskami opcji, polami wyboru i listami rozwijanymi. Formularze stanowią podstawę obsługi danych wprowadzanych przez użytkowników w tworzeniu stron internetowych. W następnej lekcji poznają Państwo sposób przetwarzania danych formularzy za pomocą PHP. Kontynuujmy programowanie!