Formularze są kluczowym elementem interakcji użytkownika z witryną internetową. HTML5 wprowadza nowe typy pól formularzy oraz atrybuty, które znacznie upraszczają tworzenie bardziej funkcjonalnych i przyjaznych dla użytkownika formularzy. W tej lekcji zajmiemy się nowymi typami pól, walidacją formularzy i kilkoma zaawansowanymi technikami.

1. Nowe typy pól formularzy w HTML5

Wraz z HTML5 pojawiły się nowe typy pól, które pozwalają na lepsze dopasowanie formularzy do konkretnych potrzeb. Oto najważniejsze z nich:

• <input type="email"> – Służy do wprowadzania adresów e-mail. Przeglądarka automatycznie waliduje, czy wpisany tekst jest poprawnym adresem e-mail.
• <input type="url"> – Pozwala wprowadzić adres URL. Podobnie jak w przypadku e-maila, przeglądarka sprawdza, czy wpisana wartość jest poprawnym adresem internetowym.
• <input type="tel"> – Używane do wprowadzania numeru telefonu. Niektóre przeglądarki mobilne wyświetlają specjalną klawiaturę do wprowadzania numerów.
• <input type="date"> – Pozwala użytkownikowi wybrać datę z kalendarza.
• <input type="range"> – Służy do wyboru wartości liczbowej z zakresu za pomocą suwaka.
• <input type="color"> – Umożliwia wybór koloru za pomocą graficznego selektora kolorów.
• <input type="number"> – Używane do wprowadzania liczb. Można zdefiniować minimalne (min) i maksymalne (max) wartości oraz krok (step), który kontroluje, o ile wartości się zmieniają.

Przykład formularza z nowymi typami pól:

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

  <label for="url">Strona internetowa:</label>
  <input type="url" id="url" name="url">

  <label for="tel">Numer telefonu:</label>
  <input type="tel" id="tel" name="tel">

  <label for="date">Data urodzenia:</label>
  <input type="date" id="date" name="date">

  <label for="range">Wybierz wartość (0-100):</label>
  <input type="range" id="range" name="range" min="0" max="100" step="1">

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

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

Atrybuty walidacji HTML5

HTML5 dodaje nowe możliwości walidacji formularzy bez potrzeby używania JavaScript. Oto najważniejsze atrybuty walidacji:

• required – Oznacza, że pole formularza musi być wypełnione przed wysłaniem formularza.
• min i max – Określają minimalne i maksymalne wartości dla pól liczbowych lub dat.
• step – Określa krok, o ile wartość może być zmieniana (np. step="10" dla suwaka liczb).
• pattern – Pozwala zdefiniować wyrażenie regularne, które musi spełniać wpisana wartość.
• placeholder – Dodaje przykładowy tekst w polu, który znika po rozpoczęciu wpisywania wartości.
• maxlength – Określa maksymalną liczbę znaków, jaką można wpisać w pole tekstowe.

Przykład walidacji w formularzu:

<form>
  <label for="username">Nazwa użytkownika:</label>
  <input type="text" id="username" name="username" required maxlength="20">

  <label for="password">Hasło:</label>
  <input type="password" id="password" name="password" required pattern=".{8,}" title="Hasło musi mieć co najmniej 8 znaków">

  <label for="age">Wiek (18-100):</label>
  <input type="number" id="age" name="age" min="18" max="100" required>

  <input type="submit" value="Zarejestruj się">
</form>

W powyższym przykładzie:

• Pole username wymaga maksymalnie 20 znaków i jest obowiązkowe.
• Pole password wymaga co najmniej 8 znaków.
• Pole age musi być liczbą między 18 a 100.

Atrybut datalist – Sugestie dla użytkownika

Atrybut datalist pozwala na stworzenie listy sugerowanych wartości, które użytkownik może wybrać, ale nie musi. Jest to bardzo przydatne, gdy chcesz zasugerować użytkownikowi opcje, ale nie chcesz ograniczać go tylko do nich.

Przykład użycia datalist:

<form>
  <label for="browser">Wybierz przeglądarkę:</label>
  <input list="browsers" id="browser" name="browser">
  
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Edge">
    <option value="Safari">
  </datalist>

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

Użytkownik może wpisać nazwę przeglądarki ręcznie lub wybrać z sugerowanych opcji.

Customizacja komunikatów o błędach

HTML5 pozwala na własnoręczne dostosowanie komunikatów o błędach poprzez atrybuty, takie jak title i pattern. Możesz także używać JavaScript, aby dokładniej kontrolować komunikaty o błędach.

Przykład z niestandardowym komunikatem o błędzie:

<form>
  <label for="zip">Kod pocztowy:</label>
  <input type="text" id="zip" name="zip" required pattern="[0-9]{2}-[0-9]{3}" title="Wprowadź kod pocztowy w formacie 00-000">
  
  <input type="submit" value="Wyślij">
</form>

Tutaj, jeśli użytkownik nie wpisze kodu w formacie 00-000, przeglądarka pokaże niestandardowy komunikat.

Ćwiczenie: Stwórz zaawansowany formularz

Stwórz formularz rejestracji użytkownika, który wykorzystuje nowe typy pól formularzy HTML5, takie jak email, tel, date, oraz walidację przy użyciu atrybutów required, pattern, i min.

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

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

  <label for="tel">Numer telefonu:</label>
  <input type="tel" id="tel" name="tel" required pattern="[0-9]{9}" title="Numer telefonu musi składać się z 9 cyfr">

  <label for="dob">Data urodzenia:</label>
  <input type="date" id="dob" name="dob" required>

  <label for="age">Wiek (18-100):</label>
  <input type="number" id="age" name="age" min="18" max="100" required>

  <input type="submit" value="Zarejestruj się">
</form>

Gratulacje! Ukończyłeś lekcję 7.
Przejdź teraz do lekcji 8 >> Multimedia w HTML5

Spis Treści - darmowy kurs HTML i CSS

Podstawy:
Wprowadzenie: Jak przygotować środowisko pracy
Lekcja 1: Podstawowe tagi HTML i struktura dokumentu
Lekcja 2: Formatowanie tekstu, linki i obrazki
Lekcja 3: Listy, tabele i formularze w HTML
Lekcja 4: Wprowadzenie do CSS
Lekcja 5: Rozszerzenie podstawowych właściwości CSS

Zaawansowane:
Lekcja 6: Semantyczne HTML5
Lekcja 7: Zaawansowane formularze w HTML5
Lekcja 8: Multimedia w HTML5
Lekcja 9: Flexbox – Elastyczny układ stron
Lekcja 10: CSS Grid Layout – Potężny system układów
Lekcja 11: CSS Animacje i przejścia (transitions)
Lekcja 12: Responsywność i Media Queries
Lekcja 13: CSS Variables (Custom Properties)

Dodatki: 
- Spis tagów HTML
- Spis Właściwości CSS

Jeśli chciałbyś być poinformowany o następnych kursach to zapisz się do naszego newslettera: