Formularze w Bootstrap 5

1. Wprowadzenie

Formularze to podstawowy sposób zbierania danych od użytkowników. Bootstrap 5 oferuje kompletny zestaw stylów i komponentów do tworzenia atrakcyjnych, responsywnych i dostępnych formularzy.

Główne elementy formularzy:

  • Pola tekstowe (inputs)
  • Textarea
  • Select (listy rozwijane)
  • Checkboxy i radio buttons
  • Przyciski
  • Walidacja
  • Input groups

2. Podstawowy formularz

2.1. Prosty formularz kontaktowy

Kluczowe klasy: * .form-control – styluje pola input, select, textarea * .form-label – styluje etykiety * .mb-3 – margines dolny (spacing między polami) * .form-check – kontener dla checkboxów i radio buttons

3. Pola formularza

3.1. Input tekstowy

3.2. Email

3.3. Hasło

3.4. Textarea (pole wieloliniowe)

3.5. Number, Date, File

4. Select (lista rozwijana)

4.1. Podstawowy select

4.2. Multiple select

4.3. Rozmiary select

5. Checkboxy i Radio Buttons

5.1. Checkboxy

5.2. Radio buttons

5.3. Inline checkboxy/radio

5.4. Switches (przełączniki)

6. Rozmiary pól formularza

7. Readonly i disabled

7.1. Readonly (tylko do odczytu)

7.2. Disabled (wyłączone)

8. Input Groups (grupy pól)

8.1. Tekst przed lub za polem

8.2. Przycisk w input group

8.3. Dropdown w input group

9. Walidacja formularzy

9.1. Walidacja HTML5

9.2. Manualna walidacja (is-valid / is-invalid)

10. Floating Labels (pływające etykiety)

11. Layout formularza

11.1. Formularz w kolumnach (grid)

11.2. Inline form (formularz w jednej linii)

12. Pomocniczy tekst (Help text)

13. Kompletny przykład: Formularz rejestracji

14. Podsumowanie

Formularze w Bootstrap 5 oferują:

  • Stylowane pola – .form-control, .form-select
  • Checkboxy i radio – .form-check, .form-switch
  • Rozmiary – form-control-lg, form-control-sm
  • Input groups – łączenie pól z przyciskami i tekstem
  • Walidacja – wbudowana walidacja HTML5 z wizualnymi feedbackami
  • Floating labels – nowoczesne pływające etykiety
  • Responsywność – łatwe układanie w gridzie
  • Dostępność – semantyczny HTML z odpowiednimi atrybutami

Co dalej:

  • Modalne okna i offcanvas
  • Komponenty zaawansowane
  • JavaScript i interaktywność
Wróć do spisu lekcji