Twoje Centrum Szkoleniowe

Formularze: elementy wejściowe, etykiety, walidacja danych

W tej lekcji nauczysz się, jak tworzyć formularze w HTML, korzystając z różnych elementów wejściowych, jak poprawnie stosować etykiety oraz jak wprowadzić walidację danych po stronie klienta, aby zapewnić poprawność wprowadzanych informacji.

Dlaczego formularze są ważne?

• Interakcja z użytkownikiem: Pozwalają na zbieranie danych od odwiedzających stronę.
• Personalizacja: Umożliwiają dostosowanie treści strony do potrzeb użytkownika.
• Funkcjonalność: Stanowią podstawę dla wielu aplikacji internetowych, takich jak rejestracje, logowania, zakupy online.

Podstawowa struktura formularza

Znacznik <form>

Formularz w HTML jest otoczony znacznikiem <form>, który określa obszar, w którym znajdują się elementy wejściowe.

Podstawowa składnia:

<form action="adres_docelowy" method="metoda">
  <!-- Elementy formularza -->
</form>

• action – określa adres URL, do którego zostaną wysłane dane z formularza.
• method – określa metodę wysyłki danych (GET lub POST).

Przykład prostego formularza

<form action="wyslij.php" method="post">
  <!-- Elementy formularza -->
</form>

Elementy wejściowe formularza

Pole tekstowe – <input type="text">

Służy do wprowadzania krótkich tekstów, takich jak imię czy nazwisko.

Przykład:

<label for="imie">Imię:</label>
<input type="text" id="imie" name="imie">

• id – unikalny identyfikator pola.
• name – nazwa pola, używana przy wysyłce danych.

Pole hasła – <input type="password">

Ukrywa wprowadzany tekst, używane do wprowadzania haseł.

Przykład:

<label for="haslo">Hasło:</label>
<input type="password" id="haslo" name="haslo">

Pole e-mail – <input type="email">

Służy do wprowadzania adresów e-mail; przeglądarka może sprawdzić poprawność formatu.

Przykład:

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

Pole liczby – <input type="number">

Pozwala na wprowadzanie tylko liczb, z opcjonalnymi ograniczeniami.

Przykład:

<label for="wiek">Wiek:</label>
<input type="number" id="wiek" name="wiek" min="1" max="100">

Pole wyboru – <input type="checkbox">

Umożliwia zaznaczenie lub odznaczenie opcji; można używać wielu pól checkbox.

Przykład:

<p>Zainteresowania:</p>
<label><input type="checkbox" name="hobby" value="sport"> Sport</label>
<label><input type="checkbox" name="hobby" value="muzyka"> Muzyka</label>
<label><input type="checkbox" name="hobby" value="podroze"> Podróże</label>

Przyciski radiowe – <input type="radio">

Pozwalają na wybór jednej opcji z grupy.

Przykład:

<p>Płeć:</p>
<label><input type="radio" name="plec" value="k"> Kobieta</label>
<label><input type="radio" name="plec" value="m"> Mężczyzna</label>

Pole wyboru z listy – <select>

Pozwala na wybór opcji z rozwijanej listy.

Przykład:

<label for="kraj">Wybierz kraj:</label>
<select id="kraj" name="kraj">
  <option value="pl">Polska</option>
  <option value="de">Niemcy</option>
  <option value="fr">Francja</option>
</select>

Obszar tekstowy – <textarea>

Służy do wprowadzania dłuższych tekstów, takich jak komentarze.

Przykład:

<label for="wiadomosc">Wiadomość:</label>
<textarea id="wiadomosc" name="wiadomosc" rows="5" cols="30"></textarea>

Przyciski – <button> i <input type="submit">

Służą do wysyłania formularza lub wykonywania innych akcji.

Przykład przycisku wysyłania:

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

Przykład przycisku resetowania:

<input type="reset" value="Wyczyść">

Etykiety – <label>

Etykiety są ważne dla dostępności i ułatwiają interakcję z formularzem.

Powiązanie etykiety z polem

Istnieją dwa sposoby powiązania etykiety z polem:

1. Poprzez atrybut for

<label for="imie">Imię:</label>
<input type="text" id="imie" name="imie">

• for w <label> odpowiada id w <input>.

2. Poprzez zagnieżdżenie

<label>
  Imię:
  <input type="text" name="imie">
</label>

Dlaczego etykiety są ważne?

• Dostępność: Czytniki ekranu odczytują etykiety, pomagając osobom niewidomym.
• Użyteczność: Kliknięcie na etykietę skupia pole formularza, ułatwiając interakcję.

Walidacja danych

Walidacja po stronie klienta

HTML5 wprowadza proste mechanizmy walidacji danych bez konieczności użycia JavaScript.

Atrybut required

Oznacza pole jako obowiązkowe.

<input type="text" name="imie" required>

Atrybuty min, max, maxlength, pattern

• min i max – dla pól liczbowych określają zakres wartości.

<input type="number" name="wiek" min="18" max="99">

• maxlength – ogranicza maksymalną liczbę znaków.

<input type="text" name="username" maxlength="15">

• pattern – pozwala na użycie wyrażenia regularnego do walidacji.

<input type="text" name="kod_pocztowy" pattern="\d{2}-\d{3}" placeholder="00-000">

Przykład formularza z walidacją

<form action="rejestracja.php" method="post">
  <label for="username">Nazwa użytkownika:</label>
  <input type="text" id="username" name="username" required maxlength="15">
  
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="haslo">Hasło:</label>
  <input type="password" id="haslo" name="haslo" required minlength="8">
  
  <input type="submit" value="Zarejestruj się">
</form>

Komunikaty błędów

Przeglądarki automatycznie wyświetlają komunikaty błędów w przypadku nieprawidłowego wypełnienia formularza.

Dobre praktyki

• Używaj etykiet dla każdego pola: Poprawia to dostępność i użyteczność formularza.
• Grupuj powiązane pola: Użyj znacznika <fieldset> i <legend> do grupowania.

Przykład:

<fieldset>
  <legend>Dane osobowe</legend>
  <!-- Pola formularza -->
</fieldset>

• Zapewnij odpowiednie typy pól: Wybierz właściwy type dla <input>, aby ułatwić wprowadzanie danych (np. na urządzeniach mobilnych).
• Dodaj wskazówki dla użytkownika: Użyj atrybutu placeholder lub dodaj pomocniczy tekst.

Częste błędy i jak ich unikać

• Brak atrybutu name: Bez niego dane z pola nie zostaną wysłane.

<!-- Niepoprawnie -->
<input type="text" id="imie">
<!-- Poprawnie -->
<input type="text" id="imie" name="imie">

• Nieużywanie etykiet: Utrudnia to korzystanie z formularza, zwłaszcza dla osób korzystających z czytników ekranu.
• Brak walidacji danych: Może prowadzić do błędów i niepoprawnego działania aplikacji.

Podsumowanie

W tej lekcji nauczyliśmy się:

• Jak tworzyć formularze za pomocą znacznika <form> i różnych elementów wejściowych.
• Jak poprawnie stosować etykiety dla pól formularza, aby poprawić dostępność.
• Jak wprowadzić walidację danych po stronie klienta, używając atrybutów HTML5.
• Dobre praktyki związane z tworzeniem interaktywnych i przyjaznych użytkownikowi formularzy.

Formularze są niezbędne do interakcji z użytkownikami i stanowią podstawę wielu funkcjonalności stron internetowych. Poprawne ich tworzenie i walidacja danych to klucz do bezpiecznej i efektywnej komunikacji z użytkownikiem.

Zadania do samodzielnego wykonania

1. Stwórz formularz kontaktowy:

   • Pola: Imię, E-mail, Temat, Wiadomość.
   • Użyj odpowiednich typów pól i wprowadź walidację danych.
   • Dodaj przycisk "Wyślij".

2. Przygotuj formularz rejestracji:

   • Pola: Nazwa użytkownika, E-mail, Hasło, Powtórz hasło.
   • Upewnij się, że hasła są zgodne (walidacja po stronie klienta może być ograniczona, tu potrzebny będzie JavaScript).
   • Dodaj pole wyboru akceptacji regulaminu (checkbox z required).

3. Stwórz ankietę:

   • Pytania z odpowiedziami jednokrotnego (radio) i wielokrotnego wyboru (checkbox).
   • Pole komentarza (textarea).
   • Dodaj przycisk "Prześlij".

Ciekawostka

Czy wiesz, że pierwsze formularze w HTML zostały wprowadzone w 1993 roku w wersji HTML 2.0? Od tego czasu formularze przeszły długą drogę, a dzięki HTML5 zyskały wiele nowych funkcji, takich jak nowe typy pól czy wbudowana walidacja danych, co znacznie ułatwia tworzenie interaktywnych stron.