Formularze w HTML5

Struktura formularza

Formularz zaczyna się i kończy znacznikami <form>. Pola wstawiane są wewnątrz.

<form action="adres" method="post/get">
  ...
</form>

Podstawowe pola formularza

Inne typy pól

• radio – pojedynczy wybór (np. płeć)
• checkbox – wybór wielu opcji
• select – lista rozwijana
• textarea – dłuższy tekst, komentarze
• date, number, odede>tel – specjalistyczne pola

Walidacja i atrybuty

• required – pole obowiązkowe
• maxlength, minlength – ograniczenia długości
• pattern – wyrażenie regularne do walidacji
• placeholder – podpowiedź w polu

Przykładowy prosty formularz

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

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

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

Ćwiczenia praktyczne

<form action="#" method="post">
  <label>Imię:</label>
  <input type="text" name="name" required>

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

  <label>Hasło:</label>
  <input type="password" name="password" required>

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

Quiz

Podsumowanie

Formularze w HTML umożliwiają zbieranie danych od użytkowników poprzez różnorodne pola. Dobrze zaprojektowany formularz z walidacją poprawia użyteczność i bezpieczeństwo.

Checklista