Pseudoklasy CSS3 i formularze HTML5

> Dodaj do ulubionych

Cze艣膰! Nazywam si臋 Peter i chc臋 ci pokaza膰 kilka ciekawych pseudoklas CSS3.

W artykule tym opowiem ci o bardzo specyficznej cz臋艣ci specyfikacji CSS3. Tej, kt贸ra dzia艂a w idealnym tandemie z HTML5, a w szczeg贸lno艣ci z nowymi funkcjami formularzy.

Jedn膮 z zab贸jczych nowo艣ci, jakie wprowadzono w j臋zyku HTML5 jest mo偶liwo艣膰 weryfikacji danych formularza po stronie klienta bez u偶ywania JavaScriptu.

Pseudoklasy — przypomnienie wiadomo艣ci

Pseudoklasa to informacja o elemencie, kt贸ra znajduje si臋 w drzewie dokumentu, ale nie jest dost臋pna za po艣rednictwem 偶adnego atrybutu. Na przyk艂ad pseudoklasa :first-child dotyczy element贸w, kt贸re s膮 pierwszym dzieckiem swoich rodzic贸w. Mo偶esz uzyska膰 t臋 informacj臋 z drzewa DOM, ale nie istnieje atrybut first-child.

W CSS 2.1 dost臋pna by艂a garstka pseudoklas: kilka dotycz膮cych stanu 艂膮czy (:link i :visited)i par臋 dla dzia艂a艅 u偶ytkownik贸w (:active, :hover). W CSS3 mamy ju偶 do dyspozycji ca艂y kosz pseudoklas: strukturalnych (:nth-child, :nth-of-type), dotycz膮cych interfejsu u偶ytkownika (:enabled, :checked) oraz zwi膮zanych ze sprawdzaniem poprawno艣ci wype艂nienia formularzy . Tymi ostatnimi w艂a艣nie zajmiemy si臋 w tym artykule.

Sprawdzanie formularza bez u偶ycia JavaScriptu

Jak ju偶 wspomnia艂em na pocz膮tku, w HTML5 wprowadzono mo偶liwo艣膰 sprawdzania danych formularza bez u偶ywania JavaScriptu. Kiedy spr贸bujesz wys艂a膰 formularz, przegl膮darka sprawdzi wszystkie pola i je偶eli kt贸rekolwiek z nich b臋dzie niepoprawnie wype艂nione, wy艣wietli informacje o b艂臋dzie. Stanie si臋 to g艂贸wnie „automagicznie”, ale pod warunkiem, 偶e twoja przegl膮darka ma tak膮 mo偶liwo艣膰.

Wygl膮d i tre艣膰 powiadomie艅 zale偶膮 od przegl膮darki oraz systemu operacyjnego i trudno je zmodyfikowa膰, o czym pisa艂em ju偶 na moim blogu.

Mo偶na jednak zmieni膰 spos贸b wy艣wietlania b艂臋d贸w na elementach. S艂u偶膮 do tego nowe pseudoklasy walidacji nale偶膮ce do modu艂u CSS3 Basic UI module.

Szczeg贸艂owe informacje na temat obs艂ugi tych pseudoklas przez r贸偶ne przegl膮darki podam w tre艣ci artyku艂u. Poni偶ej za艣 przedstawiam tylko og贸lne podsumowanie tych wiadomo艣ci:

  • Firefox i IE10 obs艂uguj膮 niekt贸re z nich
  • Opera i Chrome obs艂uguj膮 wszystkie
  • Safari obs艂uguje wszystkie, lecz walidacja formularza jest domy艣lnie wy艂膮czona.

Dlatego do ogl膮dania przyk艂ad贸w zalecam u偶ycie Chrome鈥檃, Opery albo Safari.

Je艣li chcesz by膰 na bie偶膮co z obs艂ug膮 funkcji sprawdzania poprawno艣ci formularzy przez przegl膮darki, cz臋sto zagl膮daj do serwisu When can I use.

Pomijaj膮c wszystkie te nudne technologiczne bzdury, skupmy si臋 na tych najbardziej interesuj膮cych i przyjrzyjmy si臋 kilku przyk艂adom formularza walidacji.

Elementy wymagane i niewymagane

Jednym z najbardziej powszechnych zastosowa艅 funkcji sprawdzania poprawno艣ci formularzy jest u偶ycie p贸l wymaganych, czyli obowi膮zkowych do wype艂nienia przez u偶ytkownika. Je艣li chcesz zaznaczy膰 element formularza, jako obowi膮zkowy, nadaj mu atrybut wymagalno艣ci required:


<input type="text" required>

Je艣li chcesz pokaza膰, 偶e dane pole formularza jest wymagane, mo偶esz u偶y膰 nowej pseudoklasy CSS o nazwie :required , kt贸ra stosuje regu艂y stylistyczne do ka偶dego elementu maj膮cego atrybut required. Mo偶esz na przyk艂ad za etykiet膮 wstawi膰 gwiazdk臋.


input:required + label::after { content: "*"; }

Konkretny wzorzec, jaki zastosujesz zale偶y od tego, jakich znacznik贸w u偶y艂e艣 w dokumencie.

Przedstawione powy偶ej regu艂y CSS odnosz膮 si臋 do poni偶szego kodu HTML:


<input type="text" required id="foo">
<label for="foo">Foo</label>

Istniej膮 tak偶e pola niewymagalne i pewnie nawet nie wiesz, 偶e do ich stylizowania r贸wnie偶 mamy pseudoklas臋, logicznie nazwan膮 :optional. Dotyczy ona ka偶dego elementu formularza, kt贸ry nie ma atrybutu wymagalno艣ci. Mo偶esz na przyk艂ad wszystkim niewymagalnym elementom zdefiniowa膰 ja艣niejsze obramowanie:


input:optional { border-color: silver; }

Elementy wype艂nione poprawnie i b艂臋dne

Istniej膮 tak偶e inne mo偶liwo艣ci sprawdzania poprawno艣ci p贸l formularza poza wykorzystaniem atrybutu required. Mo偶esz np. u偶y膰 specjalnego pola sprawdzaj膮cego poprawno艣膰 adresu e-mail:


<input type="email">

Cokolwiek u偶ytkownik wpisze w to pole, musi to pasowa膰 do wzorca adresu mailowego, w przeciwnym razie przegl膮darka wy艣wietli komunikat o b艂臋dzie. (Oczywi艣cie je偶eli pole nie b臋dzie wymagane, mo偶na je zostawi膰 je puste).

Do stylizowania b艂臋dnie i poprawnie wype艂nionych p贸l formularzy pseudoklasy :valid i :invalid . Przy u偶yciu ich mo偶na doda膰 symbol w zale偶no艣ci od tego, czy dane pole zosta艂o wype艂nione prawid艂owo czy b艂臋dnie:


input:invalid + label::after { content: ' 猕'; }
input:valid + label::after { content: ' 鉁'; }

Zauwa偶, 偶e symbole te pojawi膮 si臋 od razu po wczytaniu strony przez przegl膮dark臋, dlatego najprawdopodobniej zechcesz u偶y膰 JavaScriptu, aby wy艣wietla膰 je dopiero, gdy u偶ytkownik zatwierdzi formularz. W tym celu mo偶esz doda膰 do formularza klas臋 za pomoc膮 JavaScriptu.


document.forms[0].addEventListener('submit', function(e) {
  e.currentTarget.classList.add('submitted');
  // Awaryjna funkcja sprawdzania formularza});

Mo偶esz u偶y膰 innego skryptu, ale jakkolwiek to zrobisz, mo偶esz u偶y膰 poni偶szej klasy do stylizowania element贸w formularza:


  .submitted input:invalid + label::after { content: ' 猕'; }

Dwie uwagi. Po pierwsze, aby u偶y膰 w艂asnego JavaScriptu, wy艂膮czy艂em automatyczn膮 walidacj臋 formularza u偶ywaj膮c atrybutu novalidate dla przycisku zatwierdzania. Po drugie, Firefox pod艣wietla elementy w zale偶no艣ci od ich poprawno艣ci, co zablokowa艂em u偶ywaj膮c selektora Mozilli: -moz-ui-invalid.

Przedzia艂y liczbowe

W niekt贸rych z nowych p贸l wej艣ciowych formularzy np. number, mo偶na okre艣la膰 przedzia艂y warto艣ci za pomoc膮 atrybut贸w min i max np.:


<input type="number" max="10" min="1">

Pomimo, 偶e kontrolki zwykle uniemo偶liwiaj膮 u偶ytkownikowi wprowadzenie warto艣ci spoza wyznaczonego zakresu, istniej膮 sytuacje (np. gdy warto艣ci s膮 wstawiane przez skrypty JavaScriptu), w kt贸rych wprowadzone mog膮 zosta膰 warto艣ci z poza wyznaczonego przedzia艂u:

 
<input type="number" max="10" min="1" value="11">

Kiedy tak si臋 zdarzy, mo偶esz u偶y膰 pseudoklasy :out-of-range do stylizacji pola:


input[type='number']:out-of-range { border-color: red; }

Jak si臋 domy艣lasz, jest te偶 druga pseudoklasa zwana :in-range:


input[type='number']:in-range { border-color: green; }

Odczyt i zapis

Na niekt贸rych stronach mo偶esz spotka膰 wype艂nione pola formularza, kt贸rych domy艣lnej zawarto艣ci nie da si臋, jak np.: warunki w polu tekstowym textarea. Mo偶esz wtedy zastosowa膰 atrybut tylko do odczytu readonly:


<textarea readonly>Lorem ipsum</textarea>

Mo偶esz stylizowa膰 elementy z atrybutem readonly,u偶ywaj膮c鈥 domy艣lasz si臋 czego? Masz racj臋, pseudoklasy :read-only.Mo偶esz j膮 po艂膮czy膰 z w艂asno艣ci膮 CSS user-select, aby uniemo偶liwi膰 u偶ytkownikowi wyb贸r tekstu (aby to pokaza膰 w przyk艂adzie poni偶ej zmieni艂em obramowanie):


textarea:read-only { user-select: none; }

A w razie potrzeby istnieje pseudoklasa :read-write dla element贸w, do kt贸rych nie zastosowano wymienionego atrybutu:


textarea:read-write { user-select: text; }

Firefox i IE10 maj膮 ju偶 zaimplementowany atrybut readony ale jeszcze nie obs艂uguj膮 tych pseudoklas.

Obs艂uga przez przegl膮darki internetowe

Przegl膮darki obs艂uguj膮ce pseudoklasy walidacji formularzy HTML5
Atrybut/przegl膮darkaChromeFirefoxIEOperaSafari
:optional / :required10.04.010.010.05.0
:invalid / :valid10.04.0brak10.05.0
:in-range / :out-of-range10.0brakbrak10.05.0
:read-only / :read-write10.0brakbrak10.05.0

I to ju偶 wszystko z mojej strony

Mam nadziej臋, 偶e pobudzi艂em tw贸j apetyt aby dowiedzie膰 si臋 wi臋cej o formularzach walidacji HTML5. Jest tego o wiele wi臋cej, w艂膮czaj膮c pe艂ny API JavaScript.

Dzi臋ki za tw贸j czas.

Autor: Peter Gasston

殴r贸d艂o: http://html5doctor.com/css3-pseudo-classes-and-html5-forms/

T艂umaczenie: Monika Wilusz