Formularze są nieodłącznym elementem dużej części współczesnych stron internetowych. Niestety, ich wypełnianie często jest dla internautów niezwykle frustrującym doświadczeniem. Z tego powodu poruszymy dzisiaj temat tworzenia formularzy dostępnych, użytecznych i budowanych w duchu nowoczesnego, semantycznego webmasteringu.
Mówiąc o naprawdę dobrych formularzach, weźmiemy pod uwagę kilka czynników. Pierwszym z nich będzie dostępność. Nauczymy się projektować
formularze dostępne dla osób niepełnosprawnych
ruchowo i używających klawiatury do nawigowania po stronie, mających problemy ze wzrokiem lub całkiem niewidomych i wszelkich innych osób, którym korzystanie z formularzy może sprawiać problemy.
Po drugie, stworzymy nowoczesny i w pełni semantyczny kod. Semantyczny, czyli taki, w którym
wszystkie znaczniki są używane zgodnie z ich przeznaczeniem. Stosowanie tabelek do ułożenia elementów formularzy jest co prawda szybsze, ale łamie zasady semantyki i może skutkować problemami
z dostępnością. Z tego powodu sprawdzimy, jak należy tworzyć formularze za pomocą nowoczesnego,
semantycznego i zgodnego ze obowiązującymi
standardami kodu.
Trzecią kwestią, na którą zwrócimy uwagę, jest użyteczność. Dowiesz się, jak można poprawić wygodę obsługi formularzy, ich ergonomię oraz atrakcyjność dla użytkowników. Wskażemy również elementy, które najczęściej utrudniają użytkownikom
korzystanie z formularzy.
W trosce o dostępność
Formularze spełniające kryteria dostępności powinny zawierać znacznik LABEL oraz, w zależności
od ich skomplikowania, znaczniki FIELDSET i LEGEND. Pierwszy umożliwia etykietowanie pól formularza, a dwa następne odpowiadają za grupowanie jego elementów.
Zajmijmy się najpierw znacznikiem LABEL. Dzięki niemu nie trzeba klikać bezpośrednio w pole formularza, aby zacząć wpisywać do niego tekst. Wystarczy kliknąć w znajdującą się obok tego pola etykietkę. Zwykły kod pola typu INPUT mógłby na przykład wyglądać tak:
Podaj swoje imię:
Dodajmy do powyższego kodu znacznik LABEL:
Co tu się stało? Otoczyliśmy tekst znacznikiem LABEL, który za pomocą atrybutu FOR został przypisany
do pola formularza. Aby mógł zadziałać, atrybut ten powinien odpowiadać wartości atrybutu
ID, który ustawiono dla pola INPUT. Mówiąc wprost: ID i FOR muszą mieć taką samą wartość. Dzięki powyższym zmianom kliknięcie w tekst \”Podaj swoje imię:\” przeniesie użytkownika bezpośrednio
do pola formularza. Sprytne i przydatne.
Kolejny znacznik, FIELDSET, służy do grupowania
pól formularza. Dzięki niemu długi formularz da się podzielić na kilka logicznych części. Elementom tym można nadać odpowiednie nagłówki dzięki tagowi LEGEND. Zwróć uwagę na ten przykład:
Dołączony zrzut ekranu prezentuje, jak stworzony
w ten sposób formularz prezentuje się w praktyce.
Oczywiście używając języka CSS, możesz nadać mu odpowiedni styl. Na przykład usunąć obramowanie,
które nie każdemu musi się podobać:
fieldset{
border: 0
}
Zmodyfikujmy także wygląd nagłówka – zwiększmy jego grubość i wielkość:
legend {
font-weight: bold;
font-size: 1.1em
}
Kolejny zrzut ekranu prezentuje zmieniony wygląd
formularza. Jak widać, użycie tych znaczników nie oznacza, że strona będzie brzydka i wykonana w domyślnym stylu.
Nowoczesny kod w służbie formularzy
Po udoskonaleniu dostępności formularza pora na złożenie w całość jego elementów bez użycia przestarzałych, niesemantycznych tabelek. Załączona
do tej części artykułu ramka omawia skrótowo najważniejsze korzyści wynikające z dbania o semantykę
tworzonych stron.
Na samym początku zmniejszymy szerokość formularza przez nadanie odpowiedniego stylu elementowi
FORM:
form {
width: 600px
}
Aby każde pole tekstowe i jego etykietka układały się w osobnej linii, trzeba zawrzeć je wewnątrz dodatkowej pary znaczników DIV:
Pamiętaj, że DIV jest znacznikiem blokowym, a tego rodzaju znaczniki zawsze wyświetlają się na stronie jeden pod drugim. Dzięki sprytnemu wykorzystaniu tej właściwości można oddzielić od siebie pary elementów złożone z etykiety i pola tekstowego. Znacznik DIV jest również przezroczysty z punktu widzenia semantyki – nie interpretują go na przykład programy do odczytywania tekstu.
Efekt, który udało nam się uzyskać, można obejrzeć, zapoznając się z przykładem nr 3 z płyty CD. Nawet największy zwolennik semantycznego webmasterstwa nie zaprzeczy, że zastosowanie tabel do budowy formularzy ma oczywistą zaletę. Jest oczywistym fakt, że komórki tabel umożliwiają łatwe wyrównanie pól formularza i ich etykiet. Na szczęście taki sam efekt można osiągnąć, zmieniając
styl elementu LABEL, chociaż nie wszyscy zdają sobie z tego sprawę:
label {
display: block;
width: 250px;
float:left
}
Co właściwie teraz zrobiliśmy? Najpierw, przy użyciu właściwości DISPLAY, sprawiliśmy, że etykiety wyświetlają się tak, jakby były elementami
blokowymi, choć w rzeczywistości wcale nimi nie są.
Dzięki temu można nadać im na przykład szerokość. Jednakże elementy blokowe nie mogą znajdować się w jednej linii z elementami liniowymi, więc pola formularzy \”spadają\” do następnej linijki. Można zniwelować ten efekt przy użyciu właściwości FLOAT, która zamienia etykiety w elementy pływające, a ich takie ograniczenia nie dotyczą. Uzyskany efekt został przedstawiony w przykładzie nr 4 zamieszczonym na płycie CD.
Niestety formularz wciąż nie wygląda tak, jak powinien. Nagłówki tworzone przy użyciu elementu LEGEND i przycisku SUBMIT mają dziwne odstępy. Aby temu zaradzić, najpierw za pomocą selektora gwiazdki całkowicie usuniemy wszelkie marginesy i wewnętrzne odstępy wszystkich elementów:
* {
padding: 0;
margin: 0
}
Pamiętaj, że powyższy kod nie zadziała w wersji
Internet Explorera niższej od 6. Na szczęście, obecnie nie jest to już tak duży problem i nie ma powodu, dla którego należałoby się na poważnie przejmować zapewnieniem pełnego wsparcia dla tak przestarzałego oprogramowania, jak IE 5.5 czy 5.0.
Teraz możemy poszczególnym elementom nadać odpowiednie style. Zacznijmy od LEGEND:
legend {
padding: 7px
}
W przypadku tego znacznika używamy właściwości
PADDING, ponieważ LEGEND nie posiada marginesów ze wszystkich stron, ale ma za to wewnętrzne odstępy. Znacznikom DIV nadamy nieco
większy margines z lewej strony, aby utworzyć zgrabne wcięcie:
div {
margin: 7px 7px 7px 13px
}
Pora jeszcze rozprawić się z przyciskiem SUBMIT. Wystarczy objąć go parą tagów DIV, a automatycznie ułoży się w takiej samej pozycji, jak etykiety LABEL:
Tym samym podstawy tworzenia formularzy masz już za sobą.
Pora spróbować swoich sił z bardziej ambitnym zadaniem. Spróbujemy teraz umieścić etykietę LABEL
po prawej stronie, a pole formularza po lewej. Niech nie będzie to zwykłe pole, lecz przycisk typu checkbox służący do akceptacji regulaminu podczas rejestracji użytkownika na stronie WWW. Podstawowy, standardowy kod wyglądałby następująco:
Niestety, powyższy kod nie prezentuje się w odpowiedni
sposób – LABEL \”spada\” pod pole typu checkbox. Jak można ominąć tę niedogodność? Da się to zrobić na różne sposoby, korzystając z dodatkowych znaczników, ale my posłużymy się tylko odpowiednią regułą CSS.
Utworzymy nową klasę, za pomocą której nadamy naszemu checkboksowi właściwość DISPLAY.
Zmieni go ona w element liniowy i nada mu odpowiedni margines, oddzielający go od etykiety tekstowej:
.na_lewo {
display: inline;
margin-right: 50px
}
Teraz wystarczy tylko połączyć klasę z polem formularza. Na wszelki wypadek przypomnijmy, jak to zrobić:
Możesz teraz zamieścić na swojej stronie internetowej formularz z prawdziwego zdarzenia, z którego chętnie będą korzystać wszyscy internauci,
a nawet zazdrosna konkurencja.
Dbać o semantykę
Czym jest ta cała szumna semantyka kodu HTML? O co w niej w ogóle chodzi i dlaczego coraz więcej osób o niej mówi? Najłatwiej wyjaśnić to w ten sposób: w semantycznym kodzie wszystkie znaczniki są używane zgodnie ze swoim przeznaczeniem.
Ogranicza się w nim także obecność znaczników odpowiadających za wygląd strony (tę działkę przerzuca się na arkusze stylów), a dba się przede wszystkim o jej odpowiednią strukturę. Dbanie o semantykę niesie ze sobą wiele korzyści:
- Ułatwia posługiwanie się arkuszami stylów. Zmodyfikowanie danej reguły wpłynie tylko i wyłącznie na określone elementy strony.
- Kod staje się jasny i klarowny, a to ułatwia jego późniejszą edycję albo przekazanie witryny innemu webmasterowi.
- Ułatwia odbiór strony osobom korzystającym
z przeglądarek tekstowych i programów
udźwiękowiających tekst. Dla tego rodzaju aplikacji nie ma żadnego znaczenia wspaniała grafika twojej witryny, a jedynie jej semantyczna struktura. - Masz większą pewność, że przeglądarka wyświetli twoją stronę tak, jak byś sobie tego życzył.
- Semantyka pozwala na lepszą optymalizację
strony pod kątem wyszukiwarek internetowych
Użyteczność pod lupą
Po pierwsze, zawsze pamiętaj o tym, żeby wymagać od użytkowników tylko naprawdę niezbędnych danych. Im prostszy będzie formularz, tym większa liczba internautów go wypełni. Podejrzenie budzą sytuacje, gdy od osoby chcącej zarejestrować się na stronie internetowej wymaga się podania mnóstwa zbędnych danych, jak na przykład daty urodzin. Czy takie dane są komuś do czegokolwiek potrzebne? Nawet jeśli tak, to są to przypadki naprawdę rzadkie. Lepiej zamiast tego postawić na maksymalną przyjazność
wobec użytkowników i jak najbardziej ułatwić im życie. Niech strona będzie przyjemna i dobrze im się kojarzy.
Drugą kwestią, którą powinieneś rozważyć, jest kontrola danych. Powinna się ona odbywać jeszcze po stronie przeglądarki, przy użyciu języka JavaScript. Oczywiście nie należy rezygnować ze sprawdzania poprawności danych przy użyciu języków typu server-side, ponieważ nie każdy użytkownik musi mieć w przeglądarce włączoną obsługę JavaScriptu.
Po trzecie, zawsze wyraźnie oznaczaj obowiązkowe pola formularza. Najczęściej stosuje się oznaczenie ich symbolem gwiazdki i podanie stosownej informacji pod formularzem, np: \”* – pola obowiązkowe\”.
Jeżeli dopuszczasz tylko jedną formę podawania pewnych danych (np. numeru telefonu lub kodu pocztowego),
wyraźnie zakomunikuj ten fakt użytkownikom. Bez tego narazisz się na ich irytację, a być może nawet rezygnację z wypełniania formularza.
ich skuteczności nawet o 400%.
Kolejna sprawa to sposób informowania o źle wypełnionych polach. Użytkownicy powinni ujrzeć rzeczowy
i konkretny komunikat błędu o wszystkich niewypełnionych bądź źle wypełnionych polach. Oznacz te pola kolorem czerwonym i stosowną ikonką.
Do często popełnianych błędów należy zamieszczanie jedynie ogólnego komunikatu \”wystąpił błąd\”, bez wskazania, gdzie on wystąpił oraz na czym polega. Niedopuszczalna jest także sytuacja, gdy komunikat o błędzie pojawia się na nowej stronie, a wciśnięcie przycisku \”wstecz\” powoduje zniknięcie wcześniej wpisanych danych. Takie rozwiązanie to, nie owijając w bawełnę, totalna tragedia, a webmaster, który je stworzył, powinien pomyśleć o zmianie zawodu.
W dzisiejszych czasach jest to coraz rzadziej spotykane rozwiązanie, ale niektórzy wciąż uparcie umieszczają
w formularzu całkowicie nieprzydatny przycisk \”wyczyść\”. Jest on tylko i wyłącznie źródłem irytacji nieszczęśliwców, którzy przypadkiem go użyli. Naszym zdaniem jego stosowanie to sabotaż własnej strony i własnego biznesu.
Generalnie rzecz ujmując, dbanie o użyteczność formularzy w dużej mierze polega na umiejętności wcześniejszego
przewidywania problemów, na które użytkownicy mogą się natknąć i ich zapobieganiu. Dla ciebie wszystkie elementy formularzy są na pewno całkowicie zrozumiałe i jasne, ale nie popełniaj tego fatalnego błędu i nie myśl, że zwykli internauci równie łatwo je zrozumieją.
