Pseudoklasy CSS3 i formularze HTML5

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’a, 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

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.