W dzisiejszym artykule mam zamiar Ci przedstawić sposób na zbudowanie ciekawego formularza, w którym wszystkie elementy interaktywne będą wykonane tylko za pomocą HTML i CSS. Formularz będzie wielokrokowy/wielostronicowy, to znaczy będą 3 strony formularza między którymi będziemy się przełączać bez użycia JS.
Dalej
Postanowiłem pociągnąć temat związany z formularzami. Tym razem skupię się na sposobach walidowania pól formularzy za pomocą możliwości dostarczonych przez CSS.
Dalej
Formularze jakie są, każdy widzi. Najczęściej jest to zestaw kilku pól do wypełnienia i przycisk wyślij, przykładem takiego formularza jest na przykład formularz kontaktowy na blogu. Zazwyczaj jedynymi usprawnieniami formularza są komunikaty o błędnie wypełnionych polach oraz informacje wspomagające wprowadzanie danych.
Dalej
W dzisiejszym artykule poruszę kwestie budowania formularzy za pomocą HTML5. Największą zmianą w stosunku do poprzedniej wersji HTML jest to, że do walidacji takiego formularza już nie trzeba będzie wykorzystywać JavaScript. Jest to niewątpliwie wielkie ułatwienie dla projektantów stron WWW.
Muszę dodać, że na tą chwilę tylko najnowsza Opera wspiera całkowicie prezentowany przeze mnie przykład formularza. Pozostałe przeglądarki (np. IE czy Firefox) wspierają częściowo lub w ogóle nie wspierają tego standardu.
![[CSS] Jak zbudować wielokrokowy formularz za pomocą CSS?](https://blog.piotrnalepa.pl//wp-content/webpc-passthru.php?src=https://blog.piotrnalepa.pl/wp-content/uploads/2015/09/how-to-build-multistep-form.jpg&nocache=1)
![[CSS] Jak walidować pola formularzy za pomocą CSS?](https://blog.piotrnalepa.pl//wp-content/webpc-passthru.php?src=https://blog.piotrnalepa.pl/wp-content/uploads/2015/01/css-form-validation.jpg&nocache=1)
![[CSS] Jak dodać interaktywną etykietę pola do formularza?](https://blog.piotrnalepa.pl//wp-content/webpc-passthru.php?src=https://blog.piotrnalepa.pl/wp-content/uploads/2014/12/css-Jak-dodac-interaktywna-etykiete-pola-do-formularza.jpg&nocache=1)
![[HTML5] Tak będziemy w przyszłości budować formularze](https://blog.piotrnalepa.pl//wp-content/webpc-passthru.php?src=https://blog.piotrnalepa.pl/wp-content/uploads/2010/03/html5-form.jpg&nocache=1)