Atrybuty formularzy (required, pattern, placeholder)

Atrybuty formularzy: required, pattern, placeholder

HTML5 wprowadził wiele przydatnych atrybutów, które zwiększają funkcjonalność formularzy i poprawiają doświadczenie użytkownika. Dzięki nim możemy wymagać wypełnienia pola, zasugerować sposób wpisania danych lub sprawdzać poprawność wprowadzonych informacji bez użycia JavaScript.

1. required – pole obowiązkowe

Atrybut required oznacza, że dane pole musi zostać wypełnione przed wysłaniem formularza. Jeśli użytkownik pominie to pole, przeglądarka automatycznie wyświetli komunikat i nie pozwoli na wysłanie formularza.

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

Działanie: przeglądarka wymusi uzupełnienie pola.

2. placeholder – tekst podpowiedzi

Ten atrybut umożliwia wyświetlenie podpowiedzi wewnątrz pola formularza. Tekst znika w momencie, gdy użytkownik zacznie wpisywać własne dane.

<label for="email">E-mail:</label>
<input type="email" id="email" name="email" placeholder="np. jan@domena.pl">

Uwaga: placeholder nie zastępuje label. Stosuj oba dla lepszej dostępności!

3. pattern – dopasowanie do wzorca (wyrażenie regularne)

Atrybut pattern pozwala określić wzorzec (wyrażenie regularne), który musi pasować do wpisanej przez użytkownika wartości. Jeśli dane nie spełniają wzoru, formularz nie zostanie wysłany.

Przykład: Pole może przyjąć tylko litery (od 3 do 10 znaków):

<label for="nazwa">Nazwa użytkownika:</label>
<input type="text" id="nazwa" name="nazwa" pattern="[A-Za-z]{3,10}" required>

Wyjaśnienie wzoru:

• [A-Za-z] – tylko litery alfabetu (małe i wielkie),
• {3,10} – długość od 3 do 10 znaków.

Jeśli użytkownik wpisze cyfrę lub zbyt krótki/za długi tekst – formularz nie zostanie wysłany.

4. Przykładowy formularz z atrybutami

<form>
  <label for="imie">Imię:</label>
  <input type="text" id="imie" name="imie" required placeholder="Wpisz swoje imię">

  <br><br>

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required placeholder="np. jan@domena.pl">

  <br><br>

  <label for="kod">Kod alfanumeryczny:</label>
  <input type="text" id="kod" name="kod" pattern="[A-Za-z0-9]{5,8}" placeholder="np. ABC123">

  <br><br>

  <button type="submit">Wyślij</button>
</form>

🎯 Ćwiczenie

Uruchom JSFiddle i przetestuj działanie powyższego formularza. Zmień wzorzec pattern, dodaj nowe pola z required lub spróbuj stworzyć własne pole z walidacją.

✅ Podsumowanie

• required – użytkownik musi uzupełnić pole, inaczej formularz się nie wyśle.
• placeholder – wyświetla podpowiedź wewnątrz pola.
• pattern – sprawdza dane według wyrażenia regularnego.

Dzięki tym atrybutom możesz budować bardziej użyteczne i bezpieczne formularze bez potrzeby pisania JavaScriptu.