CSS · lekcja 08

Stylizacja formularza

Wasz formularz kontaktowy wciąż wygląda jak surowy HTML - dziś dajemy mu wygląd

Pole input jako pudełko: border, padding, width
Stan :focus - inna ramka, gdy pole jest aktywne
border-radius i background-color na przycisku
:hover i cursor: pointer na przycisku

Rozgrzewka · 3 minuty

Trzy pytania z poprzedniej lekcji

Jaka jest różnica między list-style-position: inside a outside?
Które dwie właściwości musicie ustawić, żeby lista straciła i kropki, i wcięcie?
Co zmienia border-collapse: collapse w wyglądzie tabeli?

Część 1 · pole input

Pole formularza to zwykłe pudełko

Pole input zachowuje się jak każdy inny element na stronie - ma border, padding, margin, można mu ustawić width. Domyślny wygląd narzuca przeglądarka i różni się między systemami, ale gdy dodacie własny border i padding, pole wygląda tak samo wszędzie.

MDN: „Elements that allow for text input such as <input type="text">... are quite easy to style and tend to behave just like other boxes on your page” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Images_media_forms#styling_text_input_elements

Część 2 · pseudoklasa :focus

Pole w trakcie wpisywania

Pseudoklasa :focus pasuje do elementu, który właśnie ma fokus - jest gotowy do wpisywania, bo kliknęliście w niego myszą albo przeszliście do niego klawiszem Tab. Inna ramka przy :focus pokazuje Wam i użytkownikowi strony, w którym polu akurat piszecie.

MDN: „The :focus pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key” · uzupełnienie ze strony właściwości developer.mozilla.org/docs/Web/CSS/:focus

Część 3 · przycisk submit

Przycisk z innym tłem i zaokrągleniem

Przycisk wysyłający formularz (input type="submit") stylizujecie tak samo jak pole tekstowe. border-radius zaokrągla rogi, background-color zmienia tło - razem dają przycisk, który wygląda jak przycisk, nie jak szary prostokąt przeglądarki.

input[type="submit"] {
  border: 3px solid #333333;
  background-color: #999999;
  border-radius: 5px;
  padding: 10px 2em;
  color: white;
}

MDN, przykład kodu w sekcji „Styling text input elements” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Images_media_forms#styling_text_input_elements

Część 4 · :hover i cursor: pointer

Przycisk reaguje na najechanie

Pseudoklasa :hover pasuje, gdy kursor myszy stoi nad elementem - łączycie ją z :focus, żeby przycisk wyglądał tak samo po najechaniu i po zaznaczeniu klawiaturą. cursor: pointer zamienia strzałkę na dłoń, jak przy zwykłym łączu - sygnał „to jest klikalne”.

input[type="submit"]:hover, input[type="submit"]:focus { background-color: #333333; cursor: pointer; }

Ciekawostka z MDN: pseudoklasa :hover bywa nieprzewidywalna na ekranach dotykowych - zależnie od przeglądarki może wcale nie zadziałać po dotknięciu ekranu, zadziałać tylko na chwilę albo zostać aktywna, dopóki nie dotkniecie czegoś innego.

MDN: reguła :hover/:focus, sekcja „Styling text input elements” · „cursor: pointer - indicates a link” (developer.mozilla.org/docs/Web/CSS/cursor) · ciekawostka: „The :hover pseudo-class is problematic on touchscreens... the :hover pseudo-class might never match, match only for a moment after touching an element, or continue to match even after the user has stopped touching” (developer.mozilla.org/en-US/docs/Web/CSS/:hover)

CSS · egzamin

Tak pytają na egzaminie

1. Zapis input[type=number] { background-color: Brown; } oznacza, że tło będzie brązowe dla

wszystkich pól edycyjnych.
wszystkich tekstów na stronie.
pól edycyjnych, które są typu numerycznego.
pól edycyjnych, gdy użytkownik wpisze do nich dowolną cyfrę.

2. Zapis input:focus { background-color: LightGreen; } - tak formatowane pole edycyjne będzie miało jasnozielone tło

jeśli jest to pierwsze wystąpienie tego znacznika w dokumencie.
gdy zostanie wskazane kursorem myszy bez kliknięcia.
po kliknięciu myszą w celu zapisania w nim tekstu.
w każdym przypadku.

CKE, EE.09, czerwiec 2026, zadanie 32 · CKE, EE.09, czerwiec 2021, zadanie 33

Ćwiczenie · przy komputerze · 20 minut

Ćwiczenie: stylizacja formularza

W style.css ustaw dla pól input z contact.html: padding, border i border-radius.
Dodaj regułę input:focus z inną ramką (np. innym kolorem border).
Dla przycisku submit ustaw background-color i border-radius, dodaj input[type="submit"]:hover ze zmienionym tłem i cursor: pointer.
Zapisz, F5, kliknij w pola i w przycisk, sprawdź działanie :focus i :hover.

Pamiętajcie: :focus i :hover to dwa różne stany - :focus trzyma się pola nawet po zabraniu myszy, dopóki nie klikniecie gdzie indziej.

Pytania kontrolne

Trzy pytania na koniec

Która pseudoklasa pokazuje styl pola dopiero po kliknięciu w nie lub wybraniu klawiszem Tab?
Które dwie właściwości najczęściej ustawiacie razem, żeby przycisk miał zaokrąglone rogi i inne tło?
Co sygnalizuje użytkownikowi cursor: pointer na przycisku?

To tyle na dziś: stylizacja list, tabel i formularzy zamknięta. Na następnej lekcji zaczynamy kontrolę położenia elementów na stronie.

Z realnych wdrożeń

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
Każde pole `input` stylizowane osobno po `type`	Wspólna klasa na wszystkich polach (np. `.form-control`) - jeden zestaw `border`/`padding` na cały formularz	nadal w użyciu
`:focus` pokazuje ramkę przy każdym kliknięciu i przy Tab	`:focus-visible` - ramka fokusu pojawia się głównie przy nawigacji klawiaturą, nie przeszkadza po kliknięciu myszą	zastępowane
Kolor i zaokrąglenie przycisku wpisane wprost w regule	Wartości z systemu projektowego jako zmienne CSS (`--color-primary`, `--radius`) używane w całej aplikacji	rozbudowane
Błąd w polu widać dopiero po wysłaniu formularza	Pseudoklasy `:invalid`/`:valid` z atrybutami `required`/`pattern` - kolor ramki zmienia się od razu, bez JavaScriptu	nadal w użyciu

MDN: „:focus-visible... the UA determines via heuristics that the focus should be made evident on the element” (developer.mozilla.org/docs/Web/CSS/:focus-visible)