#64. Stylowanie formularzy

Stylowanie input

W tym materiale przedstawię jak stylować formularze. Poświęcę na to trochę czasu, ponieważ wiedza którą zdobędziesz otworzy przed Tobą dodatkowe możliwości – wszystko dzięki pseudoklasom dostępnym dla pól formularzy.

Poniżej na filmie i kodzie zobaczysz jak ostylować podstawowe elementy z wykorzystaniem sposobów które już znamy:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

wonderful-khayyam-eekqi

wonderful-khayyam-eekqi danielminschinski

Pseudoklasy :optional oraz :required

Pseudoklasy :required oraz optional są powiązane z atrybutem HTML, który prezentowałem wcześniej w poprzednich materiałach – required.

Pewnie pamiętasz, że ten atrybut zmusza użytkownika do uzupełnienia wskazanego pola. Inaczej, wysłanie formularza jest niemożliwe. Pseudoklasa :required oznacza po prostu elementy, które posiadają ten atrybut. W przeciwieństwie do :required, :optional odwołuje się tylko do elementów input których wypełnienie jest nie konieczne.
Spójrz na poniższy przykład z zastosowaniem pseudoklas:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

nice-sinoussi-np5v0

nice-sinoussi-np5v0 danielminschinski

Pseudoklasy :focus oraz :placeholder

Następną grupę przydatnych podczas stylowania formularzy pseudoklas są :placeholder-shown oraz :focus. Dodatkowo, warto wspomnieć o pseudoelemencie ::placeholder.

::placeholder ma za zadanie skupiania się na samym placeholderze, tzn. atrybucie wskazówki dla input, o którym omawiałem w poprzednim materiale. Umożliwia nam to chociażby zmianę czcionki lub koloru.

:placeholder-shown to pseudoklasa, która skupia się na każdym elemencie, który w danym momencie wyświetla placeholder. Kiedy placeholder znika wraz z wpisywaniem danych przez użytkownika, style wpisane w tej pseudoklasie również przestają działać.

Pseudoklasa :focus skupia się na elemencie, na którym ostatnio kliknęliśmy i pozwala nam go stylować.

Spójrz na poniższy przykład z zastosowaniem pseudoklas :focus i :placeholder:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

sweet-fast-pmhcs

sweet-fast-pmhcs danielminschinski

Pseudoklasa :valid

Załóżmy sobie taki przypadek. Chcielibyśmy, żeby użytkownik zawsze wypełniał wszystkie pola, więc zamiast stylować je wg :required czy :optional, będziemy przypisywać style w zależności od nowego atrybutu – :valid.

Wspomniany atrybut skupia się na polach które zostały wypełnione prawidłowo. To najprostszy sposób na pokazanie użytkownikowi strony, że dobrze wypełnił dane pole i może przejść do następnego.

Sprawdź poniższy przykład jak zastosowałem powyższy atrybut:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

pensive-lovelace-p8j01

pensive-lovelace-p8j01 danielminschinski

Powyższe sposoby ułatwiają ostylować nasze formularze. Poćwicz w różnych konfiguracjach. Najważniejsze, aby znać odpowiednie pseudoklasy. 

Za tydzień w środę udostępnię Wam materiał o stylowaniu inputów i wyjątkach z tym związane.

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.

 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!