Jak stworzyć formularz kontaktowy z wykorzystaniem pseudo selektorów CSS?

Formularze kontaktowe możemy tworzyć na wiele sposobów. Ponieważ są one bardzo popularnym elementem stron internetowych w sieci, możemy znaleźć mnóstwo poradników oraz gotowych rozwiązań, dzięki którym będą one wyglądały nietypowo. Nie zawsze jednak musimy sięgać po rozbudowane rozwiązania, które niejednokrotnie wymagają użycia JavaScript lub podpinania gotowych bibliotek czy frameworków. Dzięki kilku podstawowym pseudo selektorom w języku CSS możemy sami stworzyć dobrze wyglądający i przyjazny użytkownikom formularz.

Poniżej prezentujemy gotowy przykład takiego formularza oraz kilka objaśnień.

See the Pen CSS Pseudo Selectors Form by Eactive (@Eactive) on CodePen.

Nasz formularz prezentuje informacje o tym, co należy wpisać w dane pole w nieco ciekawszy sposób niż klasyczny „placeholder”. Efekt ten możemy uzyskać dodając do każdego z pól element „label” i zamykając je w elemencie „div”, któremu nadajemy pozycjonowanie relatywne. Następnie ustawiamy pozycjonowanie absolutne elementom „label” i deklarujemy ich zachowanie po aktywowaniu wybranego pola. Możemy to zrobić wykorzystując pseudo selektor „:focus”. W powyższym przykładzie „label” przesuwa się nad wybrane pole jednocześnie zmniejszając rozmiar czcionki. Dodatkowo po aktywacji pola dodajemy do niego obramowanie. #wiemyjak

Drugim wykorzystanym w naszym przykładzie pseudo selektorem jest „:valid”. Selektor ten zadziała jednak tylko w przypadku pól, które oznaczymy jako wymagane dodając do nich zapis „required” oraz w zależności od typu pola. Na przykład w polu input typu „text” zadziała po wpisaniu dowolnego ciągu znaków, a dla typu „email” dopiero po wpisaniu adresu w poprawnym formacie. W naszym przykładzie informujemy użytkownika o poprawnym wypełnieniu pola przez dodanie do niego obrazka oraz obramowania. Dodatkowo po wpisaniu w pole poprawnych danych ustawiamy takie same style dla jego elementu label jak w przypadku jego aktywacji, dzięki czemu nie przesłoni on wpisanej treści.

Zaprezentowany przykład to jedynie niewielka część możliwości jaką dają nam pseudo selektory CSS. Zachęcamy do jego modyfikacji oraz samodzielnego eksperymentowania.

24/06/2016
Jakub Lisiecki

Udostępnij:

x

ZAMÓW bezpłatną WYCENĘ

Filtr antyspamowy

Podanie imienia i nazwiska jest dobrowolne, natomiast podanie numeru telefonu i adresu e-mail jest niezbędne do obsługi zapytania. Państwa dane będą przetwarzane w celu obsługi wysłanego zapytania i tak długo, jak to konieczne do obsługi tego zapytania. Mają Państwo prawo do dostępu do swoich danych, ich sprostowania, usunięcia, ograniczenia przetwarzania, wniesienia sprzeciwu wobec przetwarzania oraz przeniesienia danych. Wysłane zapytanie obsługiwane jest przez EACTIVE wiemy jak sp. z o.o. sp. k.

* Pole wymagane

#wiemyjak

Komentarze

*

*

*

Zasady komentowania

  1. Gdy dodajesz komentarz, pamiętaj, aby:
    1. Komentarze podpisywać imieniem i/lub nazwiskiem.
    2. W polu „witryna internetowa” umieszczać link tylko do strony głównej.
  2. Wszystkie komentarze są moderowane i zastrzegamy sobie prawo do usunięcia lub edytowania wpisu/ komentarza, który:
    1. zawiera wulgaryzmy,
    2. obraża innych użytkowników,
    3. może być uznany za spam – lub ma charakter reklamowy,
    4. nie pasuje tematycznie do wpisu, nie zawiera treści merytorycznej,
    5. zawiera linki do stron, które naruszają prawo polskie.

Znajdź nas na Facebooku
Eactive - wiemy jak Lubię to